Model binding like syntax for the property binding

Question

I'm working on Metronic Theme's Angular 6 project. It has below code. Can you tell me what is the functionality of [(action)]="action". I know how to bind to input metadata (i.e. @Input()). We normally do like so

<m-login *ngIf="action === 'login'" [action]="action"></m-login>

But here it is different. It is like 2-way model binding. But we normally use this syntax for that [(ngModel)]="model". Any clue?

auth.component.html

<m-login *ngIf="action === 'login'" [(action)]="action"></m-login>

login.ts

export class LoginComponent implements OnInit, OnDestroy {

    @Output() actionChange = new Subject<string>();
    @Input() action: string;

}

Answer 1

The two-way binding syntax is really just syntactic sugar for a property binding and an event binding. Angular desugars the binding into this:

if your property name is action, you only need to name its corresponding EventEmitter to actionChange and do the banana-in-a-box syntax for the child component [(action)] = "parentProperty" and Angular takes care of the rest.

Answer 2

Can you tell me what is the functionality of [(action)]="action"

This functionality is called two-way data binding

For more information: Two Way Binding

You often want to both display a data property and update that property when the user makes changes.

On the element side that takes a combination of setting a specific element property and listening for an element change event.

Angular offers a special two-way data binding syntax for this purpose, [(x)]. The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).