See also

Chapter 9. The templating syntax

9.7. Structural directives

9.7.1. NgIf

<div *ngIf="races.length > 0"><h2>Races</h2></div>

9.7.2. NgFor

<ul>
<li *ngFor="let race of races">{{ race.name }}</li>
</ul>

Chapter 12. Pipes

12.11. date

<p>{{ birthday | date:'dd/MM/yyyy' }}</p> <!-- will display '16/07/1986' -->
<p>{{ birthday | date:'longDate' }}</p> <!-- will display 'July 16, 1986' -->
<p>{{ birthday | date:'HH:mm' }}</p> <!-- will display '15:30' -->
<p>{{ birthday | date:'shortTime' }}</p> <!-- will display '3:30 PM' -->

Chapter 16. Testing your app

Chapter 19. Forms

19.1. Forms, dear forms

Table 1. FormControl attributes

valid

if the field is valid, regarding the requirements and validations applied on it.

invalid

if the field is invalid, regarding the requirements and validations applied on it. • errors: an object containing the field errors

dirty

false until the user has modified its value.

pristine

the opposite of dirty.

touched

false until the user has entered it.

untouched

the opposite of touched.

value

the value of the field.

valueChanges

an Observable emitting every time there is a change on the field

19.3. Code-driven

<h2>Sign up</h2>
<form (ngSubmit)="register()" [formGroup]="userForm">
  <div>
    <label>Username</label><input formControlName="username">
  </div>
  <div>
    <label>Password</label><input type="password" formControlName="password">
  </div>
  <button type="submit">Register</button>
</form>
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'ns-register',
  templateUrl: './register-form.component.html'
})
export class RegisterFormComponent {
  userForm: FormGroup;

  constructor(fb: FormBuilder) {
    this.userForm = fb.group({
      username: fb.control(''),
      password: fb.control('')
    });
  }

  register(): void {
    console.log(this.userForm.value);
  }
}

Chapter 22. Advanced observables

22.2. Leveraging operators

PonyTypeAheadComponent
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { PonyService, PonyModel } from './pony.service';

@Component({
    selector: 'ns-typeahead',
    template: `
      <div>
        <input [formControl]="input" />
        <ul>
          <li *ngFor="let pony of ponies">{{ pony.name }}</li>
        </ul>
      </div> `
})
export class PonyTypeAheadComponent implements OnInit {
    input = new FormControl();
    ponies: Array<PonyModel> = [];

    constructor(private ponyService: PonyService) {}

    ngOnInit(): void {
        // todo: do something with the input
    }
}
Search operator
this.input.valueChanges
  .pipe(
    filter(query => query.length >= 3),      (1)
    debounceTime(400),                       (2)
    distinctUntilChanged(),                  (3)
    switchMap(value =>                       (4)
      this.ponyService.search(value)
      .pipe(catchError(error => of([])))) )  (5)
  .subscribe(results => (this.ponies = results));
1 в запросе должно быть не менее 3х символов
2 ждем указанное время после последнего нажатия клавиши
3 не отсылаем повторно тот же запрос
4 process only the last value emitted
5 process request errors