Angular tips debugger – Pause Your Code With Breakpoints In Chrome DevTools

You can use this in Angular development for instance.
Just place till code on a line you wish to debug (e.g. in an component.ts file):

debugger;

Chrome will pause on that breakpoint.

Source: How To Pause Your Code With Breakpoints In Chrome DevTools

Binding select element to object in Angular

Component.ts file:

Component.ts file: 

@Component({
   selector: 'myApp',
   template: 'myApp.html'
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null; //the current selected option id
}

Template:

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]=”c” instead of [ngValue]=”c.id” where c is the complete country object.

Source: html – Binding select element to object in Angular – Stack Overflow

Angular – Reactive forms API summary

Reactive forms API summary

The following table lists the base classes and services used to create and manage reactive form controls. For complete syntax details, see the API reference documentation for the Forms package.

Classes

Class Description
AbstractControl The abstract base class for the concrete form control classes FormControl, FormGroup, and FormArray. It provides their common behaviors and properties.
FormControl Manages the value and validity status of an individual form control. It corresponds to an HTML form control such as <input> or <select>.
FormGroup Manages the value and validity state of a group of AbstractControl instances. The group’s properties include its child controls. The top-level form in your component is FormGroup.
FormArray Manages the value and validity state of a numerically indexed array of AbstractControl instances.
FormBuilder An injectable service that provides factory methods for creating control instances.

Directives

Directive Description
FormControlDirective Syncs a standalone FormControl instance to a form control element.
FormControlName Syncs FormControl in an existing FormGroup instance to a form control element by name.
FormGroupDirective Syncs an existing FormGroup instance to a DOM element.
FormGroupName Syncs a nested FormGroup instance to a DOM element.
FormArrayName Syncs a nested FormArray instance to a DOM element.

Source: Angular – Reactive forms – API Summary