3. Angular CLI. Custom Directives. Renderer

Lifecycle hooks - https://github.com/angular/angular/blob/1d0ed6f75f243efa72c8aa1484028431f7b46e52/modules/%40angular/core/src/metadata/lifecycle_hooks.ts#L60

ngIf - https://github.com/angular/angular/blob/e85232afd28765745d9c4cd0cde66ad9d674c676/modules/%40angular/common/src/directives/ng_if.ts

ViewContainerRef -
https://github.com/angular/angular/blob/7b7ae5fe56dd05a28821b5324e7d7863247bacee/modules/%40angular/core/src/linker/view_container_ref.ts#L73

ContentChild -
https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/examples/core/di/ts/contentChildren/content_children_example.ts

DI: https://github.com/angular/angular/blob/d169c2434e3b5cd5991e38ffd8904e0919f11788/modules/%40angular/core/src/metadata/di.ts#L148

Renderer:

https://github.com/angular/angular/blob/2.4.7/modules/%40angular/core/src/render/api.ts#L41-L92

Transcript

2. Today's Schedule 1. Angular CLI 2. Component / Directive Lifecycle 3. Build-in Directives *(template) Overview 4. Custom Directives 5. Interacting with DOM
3. Angular CLI Helps us automate our workflow developing Angular apps
 
 https://github.com/angular/angular-cli
4. CLI Workflow • Scaffolding • Generating • Serving • Testing • Distributing
5. Demo
6. ng serve • Compile SCSS/LESS • Transpile TypeScript • Bundle JS, CSS with Webpack • Asset optimization • Virtual filesystem for serving the assets • Live-reload • Code splitting (for Lazy Loading)
7. build environments When production is used the bundle gets minified
8. ng build --prod --base-href /
9. ng github-pages:deploy • Build • Create git branch with the appropriate layout • Commit • Push
10. CLI Future • Creating Universal App (Server side pre-rendering) • Refactoring • Upgrading Angular Versions • Customize Deployment Targets (like github pages) • Webpack Configuration Access • Library developer mode
11. Component / Directive Lifecycle
12. Lifecycle A Directive / Component has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.
13. Lifecycle Hooks https://github.com/angular/angular/blob/ 1d0ed6f75f243efa72c8aa1484028431f7b46e52/ modules/%40angular/core/src/metadata/ lifecycle_hooks.ts#L60 Available Directives & Components All are available to Components
14. Directives
15. Directives • Allows us to attach behavior to DOM elements. • Directives are defined using @Directive decorator.
16. The mysterious asterisk The * is syntactic sugar that makes it easier to read and write directives that modify HTML layout with the help of templates.
17. Angular renderer & ngIf • The renderer moves *ngIf to a <template> tag where it becomes a property binding - [ngIf]. • The rest of the element that we used the ngIf on, including its attributes, gets moved inside the <template> tag.
18. Example
19. Example
 (custom if directive) Represents a container where one or more Views can be attached.
20. https://github.com/angular/angular/blob/ e85232afd28765745d9c4cd0cde66ad9d674c676/modules/%40angular/ common/src/directives/ng_if.ts Angular ngIf
21. ngFor
22. Views and View Containers • A View is a fundamental building block of the application UI. It is the smallest grouping of Elements which are created and destroyed together. • Properties of elements in a View can change, but the structure (number and order) of elements in a View cannot. • Changing the structure of Elements can only be done by inserting, moving or removing nested Views via a ViewContainerRef. • Each View can contain many View Containers.
23. View ContainerRef
24. View ContainerRef https://github.com/angular/angular/blob/7b7ae5fe56dd05a28821b5324e7d7863247bacee/modules/ %40angular/core/src/linker/view_container_ref.ts#L73
25. ContentChild Example https://github.com/angular/angular/blob/ 14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/ examples/core/di/ts/contentChildren/content_children_example.ts
26. ContentChild Another way of getting a reference to an element in-between the opening and closing tags (content DOM) of a Directive / Component Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value. Content queries are set before the `ngAfterContentInit` callback is called. https://github.com/angular/angular/blob/d169c2434e3b5cd5991e38ffd8904e0919f11788/modules/ %40angular/core/src/metadata/di.ts#L148
27. Manipulating DOM
28. Color Directive !!! !!!
29. Why not to access the DOM directly? Web workers cant access DOM directly. Server-side rendering Native apps So if we don't plan using this awesomeness that Angular 2 provides for us its OK to do it the other way.
30. Renderer https://github.com/angular/angular/blob/2.4.7/modules/%40angular/ core/src/render/api.ts#L41-L92 Injectable service that provides a low-level interface for modifying the UI. Every renderer implements (should) this interface
31. Color Directive With Renderer
32. Questions?