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
320
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
480
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
220
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
220
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
420
速いWebフレームワークを作る
yusukebe
5
1.7k
機能追加とリーダー業務の類似性
rinchoku
2
1.1k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
540
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
ProxyによるWindow間RPC機構の構築
syumai
3
1k
旅行プランAIエージェント開発の裏側
ippo012
2
850
RDoc meets YARD
okuramasafumi
4
160
AIコーディングAgentとの向き合い方
eycjur
0
260
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
190
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Laravel Boost 超入門
fire_arlo
2
200
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Rails Girls Zürich Keynote
gr2m
95
14k
Being A Developer After 40
akosma
90
590k
The Language of Interfaces
destraynor
161
25k
Code Review Best Practice
trishagee
70
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
KATA
mclloyd
32
14k
Building an army of robots
kneath
306
46k
Speed Design
sergeychernyshev
32
1.1k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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