what is ngmodel property binding
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>what is ngmodel property binding
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>angular two way binding
content_copy
export class SizerComponent {
@Input() size!: number | string;
@Output() sizeChange = new EventEmitter<number>();
dec() { this.resize(-1); }
inc() { this.resize(+1); }
resize(delta: number) {
this.size = Math.min(40, Math.max(8, +this.size + delta));
this.sizeChange.emit(this.size);
}
}angular two way binding
content_copy
<div>
<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>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}}
*/Bidirectionnal model binding
content_copy
<app-sizer [(size)]="fontSizePx"></app-sizer>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>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
