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
JavaScript-Steuerelemente mit Angular: Fallstud...
Search
Manfred Steyer
PRO
May 10, 2017
Programming
0
130
JavaScript-Steuerelemente mit Angular: Fallstudie mit Live-Coding
Slides from Session at JAX 2017, Mainz, Germany
Manfred Steyer
PRO
May 10, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
340
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
490
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.3k
Navigating Dependency Injection with Metro
zacsweers
3
260
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
240
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
Design Foundational Data Engineering Observability
sucitw
3
200
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Cult of Friendly URLs
andyhume
79
6.6k
4 Signs Your Business is Dying
shpigford
184
22k
Making Projects Easy
brettharned
117
6.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing for humans not robots
tammielis
253
25k
Automating Front-end Workflow
addyosmani
1370
200k
Code Review Best Practice
trishagee
70
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Transcript
JavaScript-Steuerelemente mit Angular Fallstudie mit (viel) Live-Coding Manfred Steyer SOFTWAREarchitekt.at
Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
Ziel Einen Teil von Angular, nämlich Komponenten, anhand eines Fallbeispiels
(näher) kennen lernen.
Inhalt • Kurzer Überblick zu Angular • Property Binding •
Content Projection • Kommunikation mit Kind-Komponenten • Events und Event Bindings • Two Way Bindings
Angular 101
Anwendung == Kompontentenbaum Page ▪ 7
Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app',
templateUrl: './app.component.html', }) export class AppComponent { title: string = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app',
templateUrl: './app.component.html', }) export class AppComponent { title: string = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app',
templateUrl: './app.component.html', }) export class AppComponent { title = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app',
templateUrl: './app.component.html', }) export class AppComponent { title = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
Module Page ▪ 12 Module X Module Y AppModule AppComponent
… … … import import
Projektsetup
Fallstudie
“Im Kleinen verstehen; im Großen anwenden” [Robert Sedgewick]
Tabbed Pane TabbedPaneComponent TabComponent
Anwendung <tabbed-pane [selected]="selectedIndex"> <tab [title]="'Offene Rechnungen'"> […] </tab> <tab [title]="'Bezahlte
Rechnungen'"> […] </tab> </tabbed-pane>
Anwendung <tabbed-pane [selected]="selectedIndex"> <tab [title]="'Offene Rechnungen'"> […] </tab> <tab [title]="'Bezahlte
Rechnungen'"> […] </tab> </tabbed-pane>
Anwendung <tabbed-pane [selected]="selectedIndex"> <tab title="Offene Rechnungen"> […] </tab> <tab title="Bezahlte
Rechnungen"> […] </tab> </tabbed-pane>
DEMO
Zugriff auf Kind-Komponenten
Content abfragen @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
Content abfragen @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChild(TabComponent) tab: TabComponent;
Content abfragen @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChild(TabComponent) tab: TabComponent; @ContentChild('handle') tabWithHandle:
TabComponent; // <tab #handle>…</tab>
Lifecycle-Hooks (Auswahl) OnInit OnChanges OnDestroy AfterContent Init AfterContent Checked
DEMO
Event-Bindings
Anwendung <tabbed-pane [selected]="selectedIndex" (selectedChange)="selectedIndex = $event"> <tab title="Offene Rechnungen"> […]
</tab> <tab title="Bezahlte Rechnungen"> […] </tab> </tabbed-pane>
Anwendung <tabbed-pane [selected]="selectedIndex" (selectedChange)="selectedIndex = $event"> <tab title="Offene Rechnungen"> […]
</tab> <tab title="Bezahlte Rechnungen"> […] </tab> </tabbed-pane>
Anwendung <tabbed-pane [(selected)]="selectedIndex"> <tab title="Offene Rechnungen"> […] </tab> <tab title="Bezahlte
Rechnungen"> […] </tab> </tabbed-pane>
DEMO
Zusammenfassung Komponentenbaum Content Projection Input und Output Content Children Live
Cycle Hooks Two Way Binding
Kontakt [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer