Angular Deep Dive: Components & Directives

Transcript

1. @ManfredSteyer
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Goal • Learn advanced concepts • Try them out
5. @ManfredSteyer Manfred Steyer
6. @ManfredSteyer Contents • Interacting with Content • Interacting with View • Working with Handles • Providers vs. ViewProviders
7. @ManfredSteyer Why is this Intersting? • Reusable Components (Component Libraries) • Better Understanding for Angular
8. @ManfredSteyer
9. @ManfredSteyer Case Study #1: Tabbed Pane
10. @ManfredSteyer Tabbed Pane <app-tabbed-pane> <app-tab title="Upcoming Flights"> <p>No upcoming flights!</p> </app-tab> <app-tab title="Operated Flights"> <p>No operated flights!</p> </app-tab> <app-tab title="Cancelled Flights"> <p>No cancelled flights!</p> </app-tab> </app-tabbed-pane>
11. @ManfredSteyer
12. @ManfredSteyer
13. @ManfredSteyer View vs. Content @Component({ selector: 'tab', template: ` <div *ngIf="visible"> <h1>{{title}}</h1> <div> <ng-content></ng-content> </div> </div> ` }) export class TabComponent { @Input() title: string; visible: boolean = true; } Content <tab title="Booked"> Sample Text ... </tab> View
14. @ManfredSteyer Hooks 1) ngOnChanges 2) ngOnInit 3) ngDoCheck 4) ngAfterContentInit 5) ngAfterContentChecked 6) ngAfterViewInit 7) ngAfterViewChecked 8) ngOnDestroy
15. @ManfredSteyer Hooks 1) ngOnChanges 2) ngOnInit 3) ngDoCheck 4) ngAfterContentInit 5) ngAfterContentChecked 6) ngAfterViewInit 7) ngAfterViewChecked 8) ngOnDestroy
16. @ManfredSteyer
17. @ManfredSteyer
18. @ManfredSteyer Handles <app-tabbed-pane #pane> […] </app-tabbed-pane> Current Page: {{ pane.currentPage }}
19. @ManfredSteyer
20. @ManfredSteyer
21. @ManfredSteyer Providers @Component({ […], providers: [NavigatorService] }) export class TabbedPaneComponent { […] }
22. @ManfredSteyer Providers @Component({ […], providers: [NavigatorService] // Visible in View and Content }) export class TabbedPaneComponent { […] }
23. @ManfredSteyer View Providers @Component({ […], viewProviders: [NavigatorService] // Visible only in View }) export class TabbedPaneComponent { […] }
24. @ManfredSteyer
25. @ManfredSteyer Summary • Content vs. View • [Content|View][Child|Children] • Providers vs. ViewProviders • Handles
26. @ManfredSteyer Directives • „Components without Templates“ • Add behavior to an element • Examples: ngModel, ngClass, ngStyle
27. @ManfredSteyer
28. @ManfredSteyer Case Study <button appClickWithWarning>Delete</button>
29. @ManfredSteyer Simple Example @Directive({ […], selector: '[appClickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { constructor(private elementRef: ElementRef) { } ngOnInit(): void { this.elementRef .nativeElement.setAttribute('class', 'btn btn-danger'); } }
30. @ManfredSteyer Calling a Directive <button appClickWithWarning>Delete</button> Host-Element
31. @ManfredSteyer Bindings @Directive({ […], selector: '[appClickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { @Input() warning = 'Are you sure?'; @Output() appClickWithWarning = new EventEmitter(); }
32. @ManfredSteyer Bindings @Directive({ […], selector: '[appClickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { @Input() warning = 'Are you sure?'; @Output() appClickWithWarning = new EventEmitter(); @HostBinding('class') classBinding = 'btn btn-danger'; }
33. @ManfredSteyer Bindings @Directive({ […], selector: '[appClickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { @Input() warning = 'Are you sure?'; @Output() appClickWithWarning = new EventEmitter(); @HostBinding('class') classBinding = 'btn btn-danger'; @HostListener('click', ['$event']) handleClick($event: MouseEvent): void { … } }
34. @ManfredSteyer Calling the Directive <button (appClickWithWarning)="delete()" message="Sure?">Delete</button>
35. @ManfredSteyer
36. @ManfredSteyer
37. @ManfredSteyer Example: Tooltip <input [appTooltip]="tmpl"> <ng-template #tmpl> <h3>2 Tips for Success</h3> <ol> <li>Don't tell everything!</li> </ol> </ng-template> ViewContainer
38. @ManfredSteyer Implementation @Directive({ […], selector: '[appTooltip]' }) export class TooltipDirective implements OnInit { @Input('appTooltip') template: TemplateRef<unknown>; constructor(private host: ElementRef, private viewContainer: ViewContainerRef) { } ngOnInit(): void { this.viewContainer.createEmbeddedView(this.template); } }
39. @ManfredSteyer Implementation export class TooltipDirective implements OnInit { private viewRef: EmbeddedViewRef<unknown>; @Input('appTooltip') template: TemplateRef<unknown>; constructor( private viewContainer: ViewContainerRef) { } ngOnInit(): void { this.viewRef = this.viewContainer.createEmbeddedView(this.template); […] } }
40. @ManfredSteyer Mouse-Events const elm = this.host.nativeElement as HTMLElement; elm.addEventListener('mouseover', () => { […] }); elm.addEventListener('mouseout', () => { […] });
41. @ManfredSteyer Iterate over Projected Root Nodes this.viewRef.rootNodes.forEach(nativeElement => { nativeElement.hidden = true; }); <input [appTooltip]="tmpl"> <ng-template #tmpl> <h3>2 Tips for Success</h3> <ol> <li>Don't tell everything!</li> </ol> </ng-template> Root Nodes
42. @ManfredSteyer
43. @ManfredSteyer Passing Parameters to Templates this.viewContainer.createEmbeddedView(this.template, { $implicit: 'Tooltip!', helpLink: 'http://www.google.com' }); Context
44. @ManfredSteyer Using Parameters in Template <ng-template #tmpl let-title let-link="helpLink"> <h3>{{title}}</h3> <p> Deletes EVERYTHING! </p> <a [href]="link">More</a> </ng-template>
45. @ManfredSteyer
46. @ManfredSteyer
47. @ManfredSteyer ViewContainer • createEmbeddedView • createComponent
48. @ManfredSteyer ContentChildren • @ContentChildren(MyComponentOrDirective, { read: ElementRef | ViewContainerRef }) • Same for @ContentChild, @ViewChildren, @ViewChild
49. @ManfredSteyer
50. @ManfredSteyer Structural Directive <div *ngFor="let f of flights; index as i"> <pre>{{i}}: {{ f | json }}</pre> </div> Template Micro Syntax
51. @ManfredSteyer ngFor Implementation Structural Directive <div *ngFor="let f of flights; index as i"> <pre>{{i}}: {{ f | json }}</pre> </div> Template
52. @ManfredSteyer $implicit ngForOf index Structural Directive <div *ngFor="let f of flights; index as i"> <pre>{{i}}: {{ f | json }}</pre> </div> Template context
53. @ManfredSteyer Syntax Sugar <div *ngFor="let f of flights; index as i"> <pre>{{i}}: {{ f | json }}</pre> </div> <ng-template ngFor let-f [ngForOf]="flights" let-i="index"> <div> <pre>{{i}}: {{ f | json }}</pre> </div> </ng-template>
54. @ManfredSteyer Case Study #2: DataTable
55. @ManfredSteyer DataTable <app-data-table [data]="flights"> <div *appTableField="let data as 'id'">{{data}}</div> <div *appTableField="let data as 'from'">{{data}}</div> <div *appTableField="let data as 'to'">{{data}}</div> <div *appTableField="let data as 'date'"> {{data | date:'dd.MM.yyyy HH:mm'}} </div> </app-data-table>
56. @ManfredSteyer
57. @ManfredSteyer
58. @ManfredSteyer 2 1 3 4
59. @ManfredSteyer Case Study #3: Formatting/Parsing Dates <input [(ngModel)]="date" appDate name="date">
60. @ManfredSteyer
61. @ManfredSteyer Summary ContentChildren & ViewChildren Handles ViewProviders Attribute Directives Templates & ViewContainer Structural Directives Control Value Accessor