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 :

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

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

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

DefaultValueAccessor

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

Request

Experimental Class Class Overview class Request { constructor(requestOptions: RequestArgs) method : RequestMethod headers : Headers url : string withCredentials : boolean responseType : ResponseContentType detectContentType() : ContentType detectContentTypeFromBody() : ContentType getBody() : any } Class Description Creates Request instances from provided values. The Request's interface is inspired by the Request constructor defined in the Fetch Spec, but is conside

PRIMARY_OUTLET

Stable Const What it does Name of the primary outlet. Variable Export export PRIMARY_OUTLET exported from @angular/router/index defined in @angular/router/src/shared.ts

FormGroupName

Stable Directive What it does Syncs a nested FormGroup to a DOM element. How to use This directive can only be used with a parent FormGroupDirective (selector: [formGroup]). It accepts the string name of the nested FormGroup you want to link, and will look for a FormGroup registered with that name in the parent FormGroup instance you passed into FormGroupDirective. Nested form groups can come in handy when you want to validate a sub-group of a form separately from the rest or when you'd li

NG_VALIDATORS

Stable Const Variable Export export NG_VALIDATORS Providers for validators to be used for FormControls in a form. Provide this using multi: true to add validators. Example BAD FILENAME: ../../../../../_fragments/_api/core/forms/ts/ng_validators/ng_validators-ng_validators.ts.md Current path: docs,ts,latest,api,forms,index,NG_VALIDATORS-let PathToDocs: ../../../../../ exported from @angular/forms/index defined in @angular/forms/src/validators.ts

3. Displaying Data

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