property binding in angular code example
Example 1: what is ngmodel property binding
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>
Example 2: angular property binding
// component.ts
@Component({
templateUrl: 'component.html',
selector: 'app-component',
})
export class Component {
name = 'Peter';
updateName() {
this.name = 'John';
}
}
Example 3: property binding angular documentation
// component.ts
@Component({
templateUrl: 'component.html',
selector: 'app-component',
})
export class Component {
name = 'Peter';
updateName() {
this.name = 'John';
}
}
// component.html
<p>My name is {{name}}</p>
<button (click)="updateName()">Update button</button>
Example 4: angular two way property binding
/* Two-Way Data Binding
- communicates data between the component and the view
(bi-directionally)
- this is acheived by using the ngModel directive
- include `import { FormsModule } from @angular/forms`
- syntax: `[(ngModel)]='some value'`
*/
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
Enter the value: <input [(ngModel)]='val'>
<br>
Entered value is: {{val}}
`
})
export class AppComponent {
val: string = '';
}
/*
Process:
1. View communicates inputted value to AppComponent
2. AppComponent communicates the updated val to the view
via {{val}}
*/
Example 5: angular property binding
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<input [value]='myText'></span>
</div>
`
})
export class AppComponent {
myText: string = "Hello World";
}