Reusable Components & Directives: Deep Dive

@ManfredSteyer

@ManfredSteyer Contents • Interacting with Content • Interacting with View
• Working with Handles • Providers vs. ViewProviders

@ManfredSteyer Contents • Attribute Directives • Templates and View Containers
• Structural Directives

@ManfredSteyer Why is this Intersting? • Reusable Components (Component Libraries)
• Better Understanding for Angular

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Case Study #1: Tabbed Pane

@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>

@ManfredSteyer

@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

@ManfredSteyer Hooks 1) ngOnChanges 2) ngOnInit 3) ngDoCheck 4) ngAfterContentInit
5) ngAfterContentChecked 6) ngAfterViewInit 7) ngAfterViewChecked 8) ngOnDestroy

@ManfredSteyer

@ManfredSteyer Handles <app-tabbed-pane #pane> […] </app-tabbed-pane> Current Page: {{ pane.currentPage
}}

@ManfredSteyer

@ManfredSteyer Providers @Component({ providers: [NavigatorService] }) export class TabbedPaneComponent {
[…] }

@ManfredSteyer Providers @Component({ providers: [NavigatorService] // Visible in View and
Content }) export class TabbedPaneComponent { […] }

@ManfredSteyer View Providers @Component({ viewProviders: [NavigatorService] // Visible only in
View }) export class TabbedPaneComponent { […] }

@ManfredSteyer

@ManfredSteyer Directives • „Components without Templates“ • Add behavior to
an element • Examples: ngModel, ngClass, ngStyle

@ManfredSteyer Case Study <button appClickWithWarning>Delete</button>

@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'); } }

@ManfredSteyer Calling a Directive <button appClickWithWarning>Delete</button> Host-Element

@ManfredSteyer Bindings @Directive({ selector: '[appClickWithWarning]' }) export class ClickWithWarningDirective implements
OnInit { @Input() warning = 'Are you sure?'; @Output() appClickWithWarning = new EventEmitter(); }

OnInit { @Input() warning = 'Are you sure?'; @Output() appClickWithWarning = new EventEmitter(); @HostBinding('class') classBinding = 'btn btn-danger'; }

OnInit { @Input() warning = 'Are you sure?'; @Output() appClickWithWarning = new EventEmitter(); @HostBinding('class') classBinding = 'btn btn-danger'; @HostListener('click', ['$event']) handleClick($event: MouseEvent): void { … } }

@ManfredSteyer Calling the Directive <button (appClickWithWarning)="delete()" message="Sure?">Delete</button>

@ManfredSteyer

@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

@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); } }

@ManfredSteyer Implementation export class TooltipDirective implements OnInit { private viewRef:
EmbeddedViewRef<unknown>; @Input('appTooltip') template: TemplateRef<unknown>; constructor( private host: ElementRef, private viewContainer: ViewContainerRef) { } ngOnInit(): void { this.viewRef = this.viewContainer.createEmbeddedView(this.template); […] } }

@ManfredSteyer Mouse-Events const elm = this.host.nativeElement as HTMLElement; elm.addEventListener('mouseover', ()
=> { […] }); elm.addEventListener('mouseout', () => { […] });

@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

@ManfredSteyer

@ManfredSteyer Passing Parameters to Templates this.viewContainer.createEmbeddedView(this.template, { $implicit: 'Tooltip!', helpLink:
'http://www.google.com' }); Context

@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>

@ManfredSteyer

@ManfredSteyer ViewContainer • createEmbeddedView • createComponent

@ManfredSteyer

@ManfredSteyer TemplateOutletDirective Insert Template in Placeholder <div *templateOutlet="tmpl"></div> <ng-template #tmpl>Hallo
Welt!</ng-template>

@ManfredSteyer ComponentOutletDirective Insert Component in Placeholder <div *componentOutlet="FlightSearchComponent"></div>

@ManfredSteyer

@ManfredSteyer ContentChildren • @ContentChildren(MyComponentOrDirective, { read: ElementRef | ViewContainerRef })
• Same for @ContentChild, @ViewChildren, @ViewChild

@ManfredSteyer

@ManfredSteyer Structural Directive <div *ngFor="let f of flights; index as
i"> <pre>{{i}}: {{ f | json }}</pre> </div> Template Micro Syntax

@ManfredSteyer ngFor Implementation Structural Directive <div *ngFor="let f of flights;
index as i"> <pre>{{i}}: {{ f | json }}</pre> </div> Template

@ManfredSteyer $implicit ngForOf index Structural Directive <div *ngFor="let f of
flights; index as i"> <pre>{{i}}: {{ f | json }}</pre> </div> Template context

@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>

@ManfredSteyer Case Study #2: DataTable

@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>

@ManfredSteyer

@ManfredSteyer Summary • Attribute Directive with Input, Output, HostBinding, HostListener
• ElementRef, TemplateRef, ViewContrainerRef • *ngComponentOutlet, *ngTemplateOutlet • Struktruelle Direktive: Template + Micro Syntax

@ManfredSteyer

@ManfredSteyer 2 1 3 4

@ManfredSteyer Case Study #3: Formatting/Parsing Dates <input [(ngModel)]="date" appDate name="date">

@ManfredSteyer

@ManfredSteyer Case Study #3a: DateControl <app-date [(ngModel)]="date"></app-date>

@ManfredSteyer

Reusable Components & Directives: Deep Dive

Reusable Components & Directives: Deep Dive

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript