3. Master/Detail

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

ServerTestingModule

Experimental Class Class Overview class ServerTestingModule { } Class Description NgModule for testing. Annotations @NgModule({exports: [BrowserDynamicTestingModule]}) exported from @angular/platform-server/testing/index, defined in @angular/platform-server/testing/server.ts

JSONPBackend

Experimental Class Class Overview class JSONPBackend { } Class Description A ConnectionBackend that uses the JSONP strategy of making requests. exported from @angular/http/index, defined in @angular/http/src/backends/jsonp_backend.ts

PatternValidator

Stable Directive Class Overview class PatternValidator { pattern : string ngOnChanges(changes: SimpleChanges) validate(c: AbstractControl) : {[key: string]: any} registerOnValidatorChange(fn: () => void) } Selectors [pattern][formControlName] [pattern][formControl] [pattern][ngModel] Class Description A Directive that adds the pattern validator to any controls marked with the pattern attribute, via the NG_VALIDATORS binding. Uses attribute value as the regex to validate Contro

RequiredValidator

Stable Directive Class Overview class RequiredValidator { required : boolean validate(c: AbstractControl) : {[key: string]: any} registerOnValidatorChange(fn: () => void) } Selectors [required][formControlName] [required][formControl] [required][ngModel] Class Description A Directive that adds the required validator to any controls marked with the required attribute, via the NG_VALIDATORS binding. Example <input name="fullName" ngModel required> Class Details required :

APP_INITIALIZER

Experimental Const Variable Export export APP_INITIALIZER A function that will be executed when an application is initialized. exported from @angular/core/index defined in @angular/core/src/application_init.ts

UrlSerializer

Stable Class What it does Serializes and deserializes a URL string into a URL tree. Class Overview class UrlSerializer { parse(url: string) : UrlTree serialize(tree: UrlTree) : string } Class Description The url serialization strategy is customizable. You can make all URLs case insensitive by providing a custom UrlSerializer. See DefaultUrlSerializer for an example of a URL serializer. Class Details parse(url: string) : UrlTree Parse a url into a UrlTree. serialize(tree: UrlTree)

platformServerTesting

Experimental Const Variable Export export platformServerTesting Platform for testing exported from @angular/platform-server/testing/index defined in @angular/platform-server/testing/server.ts

UpgradeAdapterRef

Stable Class Class Overview class UpgradeAdapterRef { ng1RootScope : IRootScopeService ng1Injector : IInjectorService ng2ModuleRef : NgModuleRef<any> ng2Injector : Injector ready(fn: (upgradeAdapterRef?: UpgradeAdapterRef) => void) dispose() } Class Description Use UpgradeAdapterRef to control a hybrid AngularJS v1 / Angular v2 application. Class Details ng1RootScope : IRootScopeService ng1Injector : IInjectorService ng2ModuleRef : NgModuleRef<any> ng2Inject

LocationChangeEvent

Experimental Interface Interface Overview interface LocationChangeEvent { type : string } Interface Description A serializable version of the event from onPopState or onHashChange Interface Details type : string exported from @angular/common/index, defined in @angular/common/src/location/platform_location.ts