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
