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

angular#2

 angular#2

Danila Marchenkov

September 01, 2017
Tweet

More Decks by Danila Marchenkov

Other Decks in Programming

Transcript

  1. Components • Q: What about AngularJS $scope and controller notation?

    • A: Always isolated scope and linked ‘controller’
  2. @Component({ changeDetection?: ChangeDetectionStrategy viewProviders?: Provider[] moduleId?: string templateUrl?: string template?:

    string styleUrls?: string[] styles?: string[] animations?: any[] encapsulation?: ViewEncapsulation interpolation?: [string, string] entryComponents?: Array<Type<any>|any[]> })
  3. <my-zippy title="Details"> #shadow-root | <style> | .zippy { | background:

    green; | } | </style> | <div class="zippy"> | <div (click)="toggle()" class="zippy__title"> | ▾ Details | </div> | <div [hidden]="!visible" class="zippy__content"> | <content></content> | </div> | </div> "This is some content" </my-zippy> ViewEncapsulation.Native
  4. private doSomething() { let c = this.viewChild.hero.length > 10 ?

    `That's a long name` : ''; if (c !== this.comment) { // Wait a tick because the component's view has already been checked this.logger.tick_then(() => this.comment = c); } } export class AfterViewComponent implements AfterViewChecked, AfterViewInit { private prevHero = ''; // Query for a VIEW child of type `ChildViewComponent` @ViewChild(ChildViewComponent) viewChild: ChildViewComponent; ngAfterViewInit() { // viewChild is set after the view has been initialized this.logIt('AfterViewInit'); this.doSomething(); } ngAfterViewChecked() { // viewChild is updated after the view has been checked if (this.prevHero === this.viewChild.hero) { this.logIt('AfterViewChecked (no change)'); } else { this.prevHero = this.viewChild.hero; this.logIt('AfterViewChecked'); this.doSomething(); } } // ... }