Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Deep Dive: Components & Directives
Search
Manfred Steyer
PRO
March 21, 2023
Programming
0
430
Angular Deep Dive: Components & Directives
Manfred Steyer
PRO
March 21, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
96
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
95
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
100
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
【Go言語】ジェネリクス
tomo1227
0
170
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
CSC307 Lecture 10
javiergs
PRO
0
310
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
How to Think Like a Performance Engineer
csswizardry
4
590
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Typedesign – Prime Four
hannesfritz
37
2.2k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Design by the Numbers
sachag
277
18k
Building an army of robots
kneath
301
42k
Infographics Made Easy
chrislema
238
18k
Transcript
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Goal • Learn advanced concepts • Try them out
@ManfredSteyer Manfred Steyer
@ManfredSteyer Contents • Interacting with Content • Interacting with View
• Working with Handles • Providers vs. ViewProviders
@ManfredSteyer Why is this Intersting? • Reusable Components (Component Libraries)
• Better Understanding for Angular
@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
@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 Hooks 1) ngOnChanges 2) ngOnInit 3) ngDoCheck 4) ngAfterContentInit
5) ngAfterContentChecked 6) ngAfterViewInit 7) ngAfterViewChecked 8) ngOnDestroy
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Handles <app-tabbed-pane #pane> […] </app-tabbed-pane> Current Page: {{ pane.currentPage
}}
@ManfredSteyer
@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 Summary • Content vs. View • [Content|View][Child|Children] • Providers
vs. ViewProviders • Handles
@ManfredSteyer Directives • „Components without Templates“ • Add behavior to
an element • Examples: ngModel, ngClass, ngStyle
@ManfredSteyer
@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(); }
@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'; }
@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 { … } }
@ManfredSteyer Calling the Directive <button (appClickWithWarning)="delete()" message="Sure?">Delete</button>
@ManfredSteyer
@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 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
@ManfredSteyer ViewContainer • createEmbeddedView • createComponent
@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
@ManfredSteyer 2 1 3 4
@ManfredSteyer Case Study #3: Formatting/Parsing Dates <input [(ngModel)]="date" appDate name="date">
@ManfredSteyer
@ManfredSteyer Summary ContentChildren & ViewChildren Handles ViewProviders Attribute Directives Templates
& ViewContainer Structural Directives Control Value Accessor