1<input [(ngModel)]="username">
2
3<p>Hello {{username}}!</p>

1      
2        content_copy
3      
4      export class SizerComponent {
5
6  @Input()  size!: number | string;
7  @Output() sizeChange = new EventEmitter<number>();
8
9  dec() { this.resize(-1); }
10  inc() { this.resize(+1); }
11
12  resize(delta: number) {
13    this.size = Math.min(40, Math.max(8, +this.size + delta));
14    this.sizeChange.emit(this.size);
15  }
16}
17    

1      
2        content_copy
3      
4      <div>
5  <button (click)="dec()" title="smaller">-</button>
6  <button (click)="inc()" title="bigger">+</button>
7  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
8</div>
9    

1/* Two-Way Data Binding
2	- communicates data between the component and the view 
3      (bi-directionally) 
4	- this is acheived by using the ngModel directive 
5	- include `import { FormsModule } from @angular/forms`	 
6    - syntax: `[(ngModel)]='some value'`     
7*/
8
9import { Component } from '@angular/core';
10import { FormsModule } from '@angular/forms';
11
12@Component({
13  selector: 'app-example', 
14  template: `
15			 Enter the value: <input [(ngModel)]='val'>
16			 <br>
17			 Entered  value is: {{val}}
18			`
19})
20
21export class AppComponent {
22  val: string = '';
23}
24
25/*
26Process:
27	1. View communicates inputted value to AppComponent
28    2. AppComponent communicates the updated val to the view 
29       via {{val}}
30*/
31

1    // component.ts
2
3    @Component({
4      templateUrl: 'component.html',
5      selector: 'app-component',
6    })
7    export class Component {
8      name = 'Peter';
9
10      updateName() {
11        this.name = 'John';
12      }
13    }
14        // component.html
15
16    <p>My name is {{name}}</p>
17    <button (click)="updateName()">Update button</button>

1<input type="range" [ngModel]="(load | async)?.cartoons.value" (ngModelChange)="loadValueChange($event)">
2