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
32
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
400
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
100
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
160
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
310
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
200
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
97
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
What's new in AppKit on macOS 26
1024jp
0
150
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
450
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
1
400
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
4 Signs Your Business is Dying
shpigford
184
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A better future with KSS
kneath
238
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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