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

Angular Deep Dive: Components & Directives

Angular Deep Dive: Components & Directives

Manfred Steyer
PRO

March 21, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer

    View Slide

  2. @ManfredSteyer

    View Slide

  3. @ManfredSteyer

    View Slide

  4. @ManfredSteyer
    Goal
    • Learn advanced concepts
    • Try them out

    View Slide

  5. @ManfredSteyer
    Manfred Steyer

    View Slide

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

    View Slide

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

    View Slide

  8. @ManfredSteyer

    View Slide

  9. @ManfredSteyer
    Case Study #1: Tabbed Pane

    View Slide

  10. @ManfredSteyer
    Tabbed Pane


    No upcoming flights!


    No operated flights!


    No cancelled flights!


    View Slide

  11. @ManfredSteyer

    View Slide

  12. @ManfredSteyer

    View Slide

  13. @ManfredSteyer
    View vs. Content
    @Component({
    selector: 'tab',
    template: `

    {{title}}




    `
    })
    export class TabComponent {
    @Input() title: string;
    visible: boolean = true;
    }
    Content

    Sample Text ...

    View

    View Slide

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

    View Slide

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

    View Slide

  16. @ManfredSteyer

    View Slide

  17. @ManfredSteyer

    View Slide

  18. @ManfredSteyer
    Handles

    […]

    Current Page: {{ pane.currentPage }}

    View Slide

  19. @ManfredSteyer

    View Slide

  20. @ManfredSteyer

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. @ManfredSteyer

    View Slide

  25. @ManfredSteyer
    Summary
    • Content vs. View
    • [Content|View][Child|Children]
    • Providers vs. ViewProviders
    • Handles

    View Slide

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

    View Slide

  27. @ManfredSteyer

    View Slide

  28. @ManfredSteyer
    Case Study
    Delete

    View Slide

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

    View Slide

  30. @ManfredSteyer
    Calling a Directive
    Delete
    Host-Element

    View Slide

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

    View Slide

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

    View Slide

  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 { … }
    }

    View Slide

  34. @ManfredSteyer
    Calling the Directive
    Delete

    View Slide

  35. @ManfredSteyer

    View Slide

  36. @ManfredSteyer

    View Slide

  37. @ManfredSteyer
    Example: Tooltip


    2 Tips for Success

    Don't tell everything!


    ViewContainer

    View Slide

  38. @ManfredSteyer
    Implementation
    @Directive({
    […],
    selector: '[appTooltip]'
    })
    export class TooltipDirective implements OnInit {
    @Input('appTooltip') template: TemplateRef;
    constructor(private host: ElementRef,
    private viewContainer: ViewContainerRef) { }
    ngOnInit(): void {
    this.viewContainer.createEmbeddedView(this.template);
    }
    }

    View Slide

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

    View Slide

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

    View Slide

  41. @ManfredSteyer
    Iterate over Projected Root Nodes
    this.viewRef.rootNodes.forEach(nativeElement => {
    nativeElement.hidden = true;
    });


    2 Tips for Success

    Don't tell everything!


    Root Nodes

    View Slide

  42. @ManfredSteyer

    View Slide

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

    View Slide

  44. @ManfredSteyer
    Using Parameters in Template

    {{title}}

    Deletes EVERYTHING!

    More

    View Slide

  45. @ManfredSteyer

    View Slide

  46. @ManfredSteyer

    View Slide

  47. @ManfredSteyer
    ViewContainer
    • createEmbeddedView
    • createComponent

    View Slide

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

    View Slide

  49. @ManfredSteyer

    View Slide

  50. @ManfredSteyer
    Structural Directive

    {{i}}: {{ f | json }}

    Template
    Micro Syntax

    View Slide

  51. @ManfredSteyer
    ngFor Implementation
    Structural Directive

    {{i}}: {{ f | json }}

    Template

    View Slide

  52. @ManfredSteyer
    $implicit ngForOf index
    Structural Directive

    {{i}}: {{ f | json }}

    Template
    context

    View Slide

  53. @ManfredSteyer
    Syntax Sugar

    {{i}}: {{ f | json }}



    {{i}}: {{ f | json }}


    View Slide

  54. @ManfredSteyer
    Case Study #2: DataTable

    View Slide

  55. @ManfredSteyer
    DataTable

    {{data}}
    {{data}}
    {{data}}

    {{data | date:'dd.MM.yyyy HH:mm'}}


    View Slide

  56. @ManfredSteyer

    View Slide

  57. @ManfredSteyer

    View Slide

  58. @ManfredSteyer
    2
    1
    3
    4

    View Slide

  59. @ManfredSteyer
    Case Study #3: Formatting/Parsing Dates

    View Slide

  60. @ManfredSteyer

    View Slide

  61. @ManfredSteyer
    Summary
    ContentChildren
    & ViewChildren
    Handles ViewProviders
    Attribute
    Directives
    Templates &
    ViewContainer
    Structural
    Directives
    Control Value
    Accessor

    View Slide