There are different ways for communication between components and their templates when using Angular:
- string interpolation
- property binding
- event binding
- two way data binding
- two way data binding the long way
String Interpolation
We can display values in the template by wrapping the public properties of the component with double curly braces.
export class AppComponent {
str: string = "string interpolation";
}
<div>
{{ str }}
</div>
Property Binding
we can control the attributes value of the html elements by wrapping the attributes with a square bracket and assigning them an expression.
export class AppComponent {
bool: boolean = true;
}
<div>
<button [disabled]="bool">Disabled Button</button>
</div>
keep in mind that we can bind to all html element properties. we can console.log the html element to see which properties it offers. we can also bind to properties of directives and components.
we can replace the string interpolation with property binding like this:
export class AppComponent {
someText: string= 'display text with property binding';
}
<div>
<p [innerText]="someText"></p>
</div>
so when we should use interpolation or property binding?
If we want to print some text in the template we should use string interpolation, if we want to change some property then we should use property binding.
Event Binding
We can control what code will run when an event fires by wrapping the event with a parentheses and assigning a function.
export class AppComponent {
onButtonClick() {
alert("Button Clicked!");
}
}
<div>
<button (click)="onButtonClick()">Disabled Button</button>
</div>
keep in mind that we can bind to all the events made available by the HTML attribute we use. we can console.log the html element to see which events it offers.
we also can pass and use data with event binding by using the $event object which gives us access to event data. Below is an example of using the $event object. we bind to the input event on the text input element and extract the text input value from the $event.
export class AppComponent {
inputText: string = "";
onInputTyping(event: any) {
this.inputText = (<HTMLInputElement>event.target).value;
}
}
<div>
<input type="text" (input)="onInputTyping($event)"/>
<br />
{{inputText}}
</div>
Two Way Binding
For two-way binding to work , we need to enable the ngModel directive by adding the FormsModule to the imports[] array in the AppModule.
Two way binding is a combination of property and event binding, and we use it by wrapping the ngModel with square brackets and within these parentheses.
The input event will update the value of the property in the component code and when the value of the property will change in component code, it will update the value of the input element.
export class AppComponent {
twoWayData: string = "initial value";
}
<div>
<input type="text" [(ngModel)]="twoWayData"/>
<br />
{{twoWayData}}
</div>
Two Way Binding the Long Way
we can use the ngModel differently by using a property binding on the ngModel and using event binding with the ngModelChange event (an output of the ngModel directive)
export class AppComponent {
inputValue: string = "initial value";
onInputChange(event: any) {
this.inputValue = event;
}
}
<div>
<input type="text" [ngModel]="inputValue" (ngModelChange)="onInputChange($event)" />
<br />
{{inputValue}}
</div>