We build a master/detail page with a list of heroes It Takes Many Heroes Our story needs more heroes. We’ll expand our Tour of Heroes app to display a list of heroes, allow the user to select a hero, and display the hero’s details. Run the live example for this part. Let’s take stock of what we’ll need to display a list of heroes. First, we need a list of heroes. We want to display those heroes in the view’s template, so we’ll need a way to do that. Where We Left Off Before we continue with Par

A guide to Angular's animation system. Motion is an important aspect in the design of modern web applications. We want our user interfaces to have smooth transitions between states, and engaging animations that call attention where it's needed. Well-designed animations can make a UI not only more fun but also easier to use. Angular's animation system gives us what we need to make the kinds of animations we want. We can build animations that run with the same kind of native performance that we'r

Stable Directive What it does Syncs a FormControl in an existing FormGroup to a form control element by name. In other words, this directive ensures that any values written to the FormControl instance programmatically will be written to the DOM element (model -> view). Conversely, any values written to the DOM element through user input will be reflected in the FormControl instance (view -> model). How to use This directive is designed to be used with a parent FormGroupDirective (sel

Stable Directive Class Overview class CheckboxControlValueAccessor { constructor(_renderer: Renderer, _elementRef: ElementRef) onChange : (_: any) => {} onTouched : () => {} writeValue(value: any) : void registerOnChange(fn: (_: any) => {}) : void registerOnTouched(fn: () => {}) : void setDisabledState(isDisabled: boolean) : void } Selectors input[type=checkbox][formControlName] input[type=checkbox][formControl] input[type=checkbox][ngModel] Class Descript

Experimental Function Class Export export group(steps: AnimationMetadata[]) : AnimationGroupMetadata group is an animation-specific function that is designed to be used inside of Angular2's animation DSL language. If this information is new, please navigate to the component animations metadata page to gain a better understanding of how animations in Angular2 are used. group specifies a list of animation steps that are all run in parallel. Grouped animations are useful when a series of styles

Experimental Class Class Overview class CompilerFactory { createCompiler(options?: CompilerOptions[]) : Compiler } Class Description A factory for creating a Compiler Class Details createCompiler(options?: CompilerOptions[]) : Compiler exported from @angular/core/index, defined in @angular/core/src/linker/compiler.ts

Interpolation and other forms of property binding help us show app data in the UI. We typically display data in Angular by binding controls in an HTML template to properties of an Angular component. In this chapter, we'll create a component with a list of heroes. Each hero has a name. We'll display the list of hero names and conditionally show a message below the list. The final UI looks like this: Table Of Contents Showing component properties with interpolation Showing an array property wit

Stable Interface Interface Overview interface AsyncValidatorFn { } Interface Description exported from @angular/forms/index, defined in @angular/forms/src/directives/validators.ts

Stable Class Class Overview class ChangeDetectorRef { markForCheck() : void detach() : void detectChanges() : void checkNoChanges() : void reattach() : void } Class Description Class Details markForCheck() : void Marks all ChangeDetectionStrategy ancestors as to be checked. (live demo) @Component({ selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush, template: `Number of ticks: {{numberOfTicks}}` }) class Cmp { numberOfTicks = 0; constructor(ref: Chang

Browser support and polyfills guide. Browser support Angular supports most recent browsers. This includes the following specific versions: Chrome Firefox Edge IE Safari iOS Android IE mobile latest latest 14 11 9 9 Marshmallow (6.0) 11 13 10 8 8 Lollipop(5.0, 5.1) 9 7 7 KitKat(4.4) Jelly Bean(4.1, 4.2, 4.3) Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, using SauceLabs and Browserstack. Polyfills Angul