Angular 5: Interpolation, Property & Event Binding

Interpolation uses the {{ }} brackets:

export class HomeComponent implements OnInit {

itemCount = 4;

btnText: string = 'Add an item';

constructor() {}

ngOnInit() {}

}

<div class="col">

<p>Add a bucket list item ( {{ itemCount }} )</p>

</div>

<form>

<input type="text" class="txt" name="item" placeholder="life goal.." />

<input type="submit" class="btn" value="{{ btnText }}" />

</form>

Property Binding uses the [ ] brackets:

<form>

<input type="text" class="txt" name="item" placeholder="life goal.." />

<input type="submit" class="btn" [value]="btnText" />

</form>

2-way data binding uses the [(  )]. You need to import the FormsModule in the app.modules.ts file:

import { FormsModule } from '@angular/forms';

@NgModule({

declarations: [AppComponent, HomeComponent, AboutComponent],

imports: [BrowserModule, AppRoutingModule, FormsModule],

providers: [],

bootstrap: [AppComponent]

})

<form>

<input

type="text"

class="txt"

name="item"

placeholder="life goal.."

[(ngModel)]="goalText"

/>

<input type="submit" class="btn" [value]="btnText" />

<br /><span>{{ goalText }}</span>

</form>

Event Binding uses the ( ) brackets:

<input type="submit" class="btn" [value]="btnText" (click)="addItem()" />

A good way to remember all the brackets is as follows:

[    ]    and   {{   }}   is from component to html.

(  )   is from html to component.


[(   )]   is two way between component and html




ok