Render dynamic forms with FormGroup We can't always justify the cost and time to build handcrafted forms, especially if we'll need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements. It may be more economical to create the forms dynamically, based on metadata that describe the business object model. In this cookbook we show how to use formGroup to dynamically render a simple form with different control

Stable Security Risk Class Security Risk Calling any of the bypassSecurityTrust... APIs disables Angular's built-in sanitization for the value passed in. Carefully check and audit all values and code paths going into this call. Make sure any user data is appropriately escaped for this security context. For more detail, see the Security Guide. Class Overview class DomSanitizer { sanitize(context: SecurityContext, value: any) : string bypassSecurityTrustHtml(value: string) : SafeHtml

Stable Const Variable Export export DOCUMENT A DI Token representing the main rendering context. In a browser this is the DOM Document. Note: Document might not be available in the Application Context when Application and Rendering Contexts are not the same (e.g. when running the application into a Web Worker). exported from @angular/platform-browser/index defined in @angular/platform-browser/src/dom/dom_tokens.ts

Stable Class What it does Lifecycle hook that is called when Angular dirty checks a directive. How to use . @Component({selector: 'my-cmp', template: `...`}) class MyComponent implements DoCheck { ngDoCheck() { // ... } } Class Overview class DoCheck { ngDoCheck() : void } Class Description ngDoCheck gets called to check the changes in the directives in addition to the default algorithm. The default change detection algorithm looks for differences by comparing bound-property

Experimental Function Class Export export discardPeriodicTasks() : void Discard all remaining periodic tasks. exported from @angular/core/testing/index defined in @angular/core/testing/fake_async.ts

Experimental Function Class Export export disableDebugTools() : void Disables Angular 2 tools. exported from @angular/platform-browser/index defined in @angular/platform-browser/src/browser/tools/tools.ts

Experimental Function Class Export export destroyPlatform() : void Destroy the existing platform. exported from @angular/core/index defined in @angular/core/src/application_ref.ts

Techniques for Dependency Injection Dependency Injection is a powerful pattern for managing code dependencies. In this cookbook we will explore many of the features of Dependency Injection (DI) in Angular. Table of contents Application-wide dependencies External module configuration @Injectable and nested service dependencies Limit service scope to a component subtree Multiple service instances (sandboxing) Qualify dependency lookup with @Optional and @Host Inject the component's DOM element De

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

Stable Class What it does A default implementation of the UrlSerializer. Class Overview class DefaultUrlSerializer { parse(url: string) : UrlTree serialize(tree: UrlTree) : string } Class Description Example URLs: /inbox/33(popup:compose) /inbox/33;open=true/messages/44 DefaultUrlSerializer uses parentheses to serialize secondary segments (e.g., popup:compose), the colon syntax to specify the outlet, and the ';parameter=value' syntax (e.g., open=true) to specify route specific param