Bind Model to child components

Question

I have 3 components. The 'Parent', 'Child 1' & 'Child 2'. On the load of the Parent component, I create a Model inside the 'Parent' and want to pass that Model to the child components, which then binds to the model and updates the parent Model.

Example:

Model:

export interface ITemplateModel {
    id: string;
    name: string;
    lastModified: Date;
    status: string;
    templateHistory: string;
}

'Parent':

templateModel = ITemplateModel();

From this point in the Parent HTML I'm unsure if this is right but shows the idea.

'Parent HTML':

<app-child1 [(ngModel)]='templateModel'></app-child1>
<app-child2 [(ngModel)]='templateModel'></app-child2>

'Child1':

{{templateModel.name}}

'Child2':

<input [(ngModel)]="templateModel.status">

Please check the docs and introduction tutorials in http://angular.io before asking such basic questions. — Günter Zöchbauer, Nov 13 '17 at 10:47

score 0 · Answer 1 · answered Nov 13 '17 at 11:35

No. I don't think your approach is correct.

If you need to pass data from Parent to child then you need to use @Input().

Reference you can check for @Input()

And If you need to pass data from Child to Parent then you need to use @Output().

Reference you can check for @Output()

This is the basic Example how you can use @Input & @Output parameters on child element.

HTML :

<app-child *ngFor="let item of items"  [name]="itemName"  (onSelect)="selectedItemName($event)"> </app-child>

TS :

export class ChildComponent {
  @Input()  name: string;
  @Output() onSelect = new EventEmitter<any>();

  sendSelect(selected: any) {
    this.onSelect.emit(selected);
  }
}

Bind Model to child components

1 Answers1