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
200
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
300
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
92
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
100
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
75
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
C++20 射影変換
faithandbrave
0
570
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
1
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
730
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
330
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
970
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
0
210
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
NPOでのDevinの活用
codeforeveryone
0
790
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building an army of robots
kneath
306
45k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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