Upgrade to Pro — share decks privately, control downloads, hide ads and more …

3. Angular CLI. Custom Directives. Renderer

Avatar for iliya iliya
February 15, 2017
66

3. Angular CLI. Custom Directives. Renderer

Avatar for iliya

iliya

February 15, 2017
Tweet

Transcript

  1. Today's Schedule 1. Angular CLI 2. Component / Directive Lifecycle

    3. Build-in Directives *(template) Overview 4. Custom Directives 5. Interacting with DOM
  2. 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)
  3. 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
  4. 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.
  5. Directives • Allows us to attach behavior to DOM elements.

    • Directives are defined using @Directive decorator.
  6. 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.
  7. 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.
  8. 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.
  9. 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
  10. 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.