Angular - Two Way Binding

0
votes

I am a beginner at Angular and I covering two way binding but for some reason I do not understand what I am doing wrong with the below any input would be appreciated.

I am simply trying to understand the concept so the below code is rather simple. Per my understanding

  1. Adding the two way binding [()] to <app-child-comp> I pass the parent field "name" from the parent component to the parent view and using property binding it provides an initialization value ( default value ) to the child component that receives the value in the @Input field.
  2. Once the field "@Input childName " has its value using normal interpolation I can use the value how ever I please in the child template.
  3. Now by defining an EventEmitter and then using its .emit method I should be able to pass any changes on the variable back up to the parent component and update the DOM property to reflect the changes.

Parent Component & Template

Child Component & Template

Program Output

enter image description here

Problem:

Now this is my problem the parent --> child direction the bindings are working as intended, the name "Fin" is appearing as I expect in the input of the parent Template and in the interpolation in the child template but when I want to alter the name in the child template and have it bubble back up to the parent property it fails to update although it updates the interpolation in the child template.

Ive been trying to figure this out now for a while and everything im researching I feel says im doing it correctly but if you could please explain what im doing wrong I would much appreciate it.

2
htmlangulartypescript

2 Answers

3
votes

Im adding this so that anyone looking in the future can learn from my mistake.

There are two ways to perform event binding given a child component

  1. The first way is by explicitly declaring the property and event bindings as follows <app-child-comp [childName]="name" (childNameChange)="name =$event"></app-child-comp>

  2. The second way is to use the "Banana Box" Method where the child tag transforms into <app-child-comp [(childName)]="name"></app-child-comp>

I was trying to use the second method and something that wasn't immediately clear is that there is a naming convention when it comes to the field names in the child component that needs to be followed in order for the "Banana Method" to work

Rule: If your @Input field is named "x" then your @Output EventEmitter needs to be named "xChange" the "Change" is required as the second part of the name .

Syntax: inputName + Change

So in order to resolve my problem I needed to change the naming convention from 

@Input() childName:string;
@Output() changedName = new EventEmitter<string>();

to

@Input() childName:string;
@Output() childNameChange = new EventEmitter<string>();
0
votes

You have to add the output in your root component:

<app-child-app [(childName)]="name" (changedName)="name = $event"></app-child-app>