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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
98
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
0
350
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
PipeCDのプラグイン化で目指すところ
warashi
1
250
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
100
技術同人誌をMCP Serverにしてみた
74th
1
570
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
Goで作る、開発・CI環境
sin392
0
190
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
260
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Is Xcode slowly dying out in 2025?
uetyo
1
250
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A Modern Web Designer's Workflow
chriscoyier
694
190k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
240
Building an army of robots
kneath
306
45k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How to Ace a Technical Interview
jacobian
277
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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