Ensuring Consistency of Values Between Child and Parent Components

Is there a way to ensure that the value of submitted in the child component always matches the value of submitted in the parent component? Appreciate any help!

@Component({
    selector: 'child-cmp',
    template: `
        child:{{submitted}} 
  `
})
class ChildCmp {
    @Input('submitted') submitted: boolean;

    ngOnInit() {
      this.submitted = true;
    }
}

@Component({
    selector: 'app',
    template: `
    <child-cmp [submitted]="submitted"></child-cmp>
    parent:{{submitted}} 
  `,
    directives: [ChildCmp]
})
class App {
    submitted: boolean;
}
bootstrap(App);

Answer №1

Establish bi-directional model binding:

<child-component [(completed)]="completed"></child-component>

Child Component:

@Component({
    selector: 'child-component',
    template: `
        {{completed}} <button (click)="onComplete()">Complete</button>
  `
})
class ChildComponent {
    @Input('completed') completed: boolean;
    @Output('completedChange') completedChange: EventEmitter<boolean> = new EventEmitter();

    onComplete() {
        this.completed = true;
        this.completedChange.emit(this.completed);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can one go about constructing abstract models using Prisma ORM?

Among my various prisma models, there are common fields such as audit fields like created_at and updated_at. model User { id Int @id @default(autoincrement()) created_at DateTime @default(now()) updated_at DateTime @updatedAt email ...

What is the best way to implement pipes and incorporate reusable action buttons in a Mat-table component for maximum reusability?

I am seeking assistance in creating a reusable component for the Angular Material Mat-table. I have made progress on loading data from the parent component to the child component, as can be seen in StackBlitz, but I now want to apply pipes to the data bef ...

Two-way conditional type mapping

Currently, I am working on mapping the various "data types" of an object to a corresponding "schema" type. If the property's data type is boolean, it should be mapped to the "BooleanComponents" type The code snippet below demonstrates how this can ...

Attempting to dynamically load an angular2 component upon the clicking of a tab has been my latest endeavor

Currently, I have multiple components loaded on page load within different tabs by using their selectors during design time. However, I am looking to dynamically load those components upon user demand, specifically when a tab is clicked. The issue arises ...

A step-by-step guide on sending a fetch request to TinyURL

I have been attempting to send a post request using fetch to tinyURL in order to shorten a URL that is generated on my website. The following code shows how I am currently writing the script, however, it seems like it's not returning the shortened URL ...

Working with JSON data in AngularJS2's templates

Is there a way for me to process JSON from the template in a manner similar to the second code I provided? First code. This method works well when using .json and .map () @Component({ ..// template: `..// <li *ngFor="#user of users"> ...

What is the best way to make my if statement pause until a GET request finishes (GUARD) with the help of Angular?

I am currently working on implementing admin routes for my Angular app, and I have used a role guard to handle this. The code snippet below showcases my implementation: However, I would like the get request to finish executing before the if statement begi ...

Angular checkbox filtering for tables

I have a table populated with data that I want to filter using checkboxes. Below is the HTML code for this component: <div><mat-checkbox [(ngModel)]="pending">Pending</mat-checkbox></div> <div><mat-checkbox [(ngModel ...

Arranging a list of objects with a designated starting value to remain at the forefront

Consider the array and variable shown below: array = ['complete','in_progress','planned']; value = 'planned'; The goal is to always sort the array starting with the 'value' variable, resulting in: array ...

Modify the height of React Cards without implementing collapse functionality

Currently, I am in the process of developing a web interface that displays various processes and services. The information is presented in React cards that support expand/collapse functionality. However, I am facing an issue where expanding one card affect ...

Avoid assigning an `any` value in an unsafe manner, especially when using a custom hook function

export const useSpecificHook = () => { return useContext(OurContext); }; export const useCustomProcessor = () => { const [notes, setNotes] = useState([]); const removeItems = () => { setItems([]); }; return { clearNotes, } ...

Gaining entry to a static member of an exported class in a module

I am facing an issue with my Typescript code snippet. The code is as follows: module MyModule { export class MyClass { static MyStaticMember : string; } } My requirement is to access this code from a separate file after compilation. I tri ...

Using JSON to bind values to an array of checkboxes

I am working with an array of checkboxes that are populated from a collection. Here is the code snippet: <div class="form-group"> Select days in a week : <td class="even" *ngFor="let item of dayList"> <input value="{{item.check ...

The ngbDatepicker within the Bootstrap angular framework is designed to seamlessly integrate with ngbPanelContent without causing overflow issues

I've integrated the ngbDatepicker into a form as shown below <ngb-panel> <ng-template ngbPanelTitle> <div class="row"> <ui-switch (change)="onChange($event,2)" [checked]="profession ...

What causes TypeScript's ReadonlyArrays to become mutable once they are transpiled to JavaScript?

Currently, I am in the process of learning Typescript by referring to the resources provided in the official documentation. Specifically, while going through the Interfaces section, I came across the following statement: TypeScript includes a special t ...

Using TypeScript with React: Initializing State in the Constructor

Within my TypeScript React App, I have a long form that needs to dynamically hide/show or enable/disable elements based on the value of the status. export interface IState { Status: string; DisableBasicForm: boolean; DisableFeedbackCtrl: boolean; ...

Difficulty in detecting variable modifications during testing - Angular2+

After successful login, I expect a certain variable to be updated with the appropriate value. However, during testing, all I see is 'undefined' returned. This variable does change when interacting with the app, showing an error message like &apo ...

Encountering issues with integrating the node_module (website scraper) in Angular 4 for implementation

Recently, I've been attempting to integrate the node_module "website scraper" [1] into my Angular 4 project. After downloading and installing the module using "npm install website-scraper –save", I proceeded to import it in my Component with "import ...

What is the significance of the code statement in the Angular ng2-table package?

Could you please explain the functionality of this specific code line? this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData; ...

What causes the unexpected behavior of the rxjs share operator when used with an observable in a service?

I attempted to utilize the rxjs share operator in two distinct manners. Implementing it in the component Component: constructor() { const obs1 = interval(1000).pipe( tap(x => console.log('processing in comp1')), map(x => x ...