Data Binding in Angular 7
Data-binding in it’s simplest form is the communication between typescript and html.
Type of data binding
- String Interpolation : ex- {{data}}
- Property Binding : ex- [property] = “data”
- Event Binding : ex- (event) = “expression”
- Combination of both: Two-way Binding : ex- [(ngModel)] = “data”
- String Interpolation: {{ data }}
Double curly braces ( {{ }} ) prints the value of the variable inside it.
The data acts as variable here.
Variable Declaration:
serverId: number = 10;
serverStatus: string = “Online”;
Function Definition:
getServerStatus() {
return this.serverStatus;
Printing The Values:
<button class=”btn-primary”>
The server id is : {{ serverId }}
Server Status using value : {{ serverStatus }} // printing using value <br>
Server Status using Function : {{ getServerStatus() }} // printing using Function.
</button>
2. Property Binding: [property] = “data”
The attribute is a property of an html element. If the property is enclosed in
the square braces ( [ ] ) then the property is bound with data of the typescript code. It’s used to put the property onto the element wrapped in brackets
Inside servers.component.html enter the following
<app-server></app-server> <br><br>
<app-server></app-server>
Enter the following code in the servers.component.ts file to activate and deactivate a button.
export class ServersComponent implements OnInit {
allowNewServer: Boolean = false;
constructor( ) {
// Anonymus Function
setTimeout( () => {
this.allowNewServer = true;
}, 2000 ); // 2000 is the time-out time. by default in mili-sec.
// button gets deactivated in 2 sec.
setTimeout( () => {
this.allowNewServer = false; // button is activated in 4 sec.
}, 4000);
ngOnInit( ) {
}
Enter the following code in the servers.component.html file to call the above defined functions:
<button [disabled] = “allowNewServer” class=”btn-danger”>
Add new Server
</button>
<! — Property Binding with string Interpolation →
<p [innerText] = “allowNewServer”>{{allowNewServer}}</p>
<! — Property Binding without String Interpolation →
<p [innerText] = “allowNewServer”></p>
Not allowed : <p [innerText] = “{{allowNewServer}}”></p>
3. Event Binding (event) = “expression” :
An events ( A click, hover, or a keyboard action) that you can use to call component logic within Angular. It’s used to send the information from the view to the component class.
Changing the event
Click event:
onClick() {
alert(“Hello World”);
}
Input event:
onUpdateServerName(event){
this.serverName = event.target.value;
//this.serverName = (<HTMLInputElement> event.target).value;
}
4. Two Way Data Binding [(ngModel)] = “data” :
- Data-related changes affecting the model are immediately propagated to the matching view(s), and that any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model. When app data changes, so does the UI, and conversely. ( https://stackoverflow.com/questions/13504906/what-is-two-way-binding)
- For Two-Way-Binding to work, you need to enable the ngModel directive. This is done by adding the FormsModule to the imports[ ] array in the AppModule.
- You then also need to add the import from @angular/forms in the app.module.ts file:
import { FormsModule } from ‘@angular/forms’;
<input type=”text” [(ngModel)] = “serverName”>
<p>{{serverName}}</p>
