Angular Kickstart: von 0 auf 100

Angular ist das aktuelle Single-Page-Framework von Google. Es vereinfacht die Implementierung selbst großer Webanwendungen, die nicht nur im Browser, sondern auch als App auf Ihrem Smartphone oder dem Desktop ausgeführt werden können.

Sie haben von Angular schon viel gehört und möchten wissen, wie damit entwickelt wird? Oder haben Sie Angular bereits bei Projekten im Einsatz und möchten die Grundkonzepte besser verstehen? Dann sind Sie bei diesem ganztägigen Workshop genau richtig. Sascha Lehmann rollt die Angular-Story komplett von vorne auf: Lernen Sie einige Tricks und Kniffe sowie den Unterschied zwischen Komponenten, Direktiven, Pipes und Services anhand einiger Aufgaben kennen.

Sie erfahren, wie Komponenten untereinander kommunizieren können, Benutzereingaben mithilfe von Formularen erfasst oder Anwendungssichten über das Routing gezielt adressiert und parametrisiert werden. Eben von 0 auf 100!

Transcript

1. Angular Kickstart von 0 auf 100
2. Angular Kickstart von 0 auf 100 Developer Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Spezialisierung: Angular und UI/UX
3. Angular Kickstart von 0 auf 100 Consultant @ Thinktecture AG Christian Liebel @christianliebel christian.liebel@thinktecture.com https://www.thinktecture.com/thinktects/christian-liebel/ Spezialisierung: Angular, PWA, Cross-Platform
4. 09:00–10:30 Part I 10:30–11:00 Break 11:00–12:30 Part II 12:30–13:30 Lunch Break 13:30–15:00 Part III 15:00–15:30 Break 15:30–17:00 Part IV Timetable von 0 auf 100 Angular Kickstart
5. Expectations Angular Kickstart von 0 auf 100
6. Questions: anytime! Hands-on labs (everyone can participate) https://bit.ly/ngdkick Angular Kickstart von 0 auf 100 Setup LAB #N
7. 1. What is Angular? 2. Why SPA? 3. Angular CLI 4. Modules 5. Bindings 6. Pipes 7. Components 8. Input/Output 9. Directives 10.Dependency Injection Angular Kickstart von 0 auf 100 Agenda
8. 11. Services 12. Structural Directives 13. Observables & RxJS 14. HttpClient 15. Lifecycle Hooks 16. Async Pipe 17. Routing 18. Template-Driven Forms 19. Debugging Angular Kickstart von 0 auf 100 Agenda
9. The next best todo list app! Angular Kickstart von 0 auf 100 Our Demo Use-Case
10. 1. What is Angular? von 0 auf 100 Angular Kickstart
11. SPA Framework Cross- Platform Platform- agnostic Open- source What is Angular? von 0 auf 100 Angular Kickstart
12. Technical Basis Angular Kickstart von 0 auf 100 Angular
13. Release Schedule Time-based release schedule (6 months) • March/April: even version • September/October: odd version Deprecation Policy • Compatibility to previous major version (1 year) • Long-Term Supported Version (critical fixes/security patches only) • Current Version -> 15 Angular von 0 auf 100 Angular Kickstart
14. 2. Why SPA? von 0 auf 100 Angular Kickstart
15. Properties • Fat clients (i.e., load everything they need to run during bootstrap) • A change of the view does not lead to a server-side page navigation Single-Page Web Applications (SPA) von 0 auf 100 Angular Kickstart
16. Advantages • Very performant • Works offline • No special server requirements (i.e., serving static files is sufficient) Disadvantages • Some logic (i.e., computation- intensive) can only be run on a server (connection required) • Logic is transfered to the client (code can’t be kept secret) Single-Page Web Applications (SPA) von 0 auf 100 Angular Kickstart
17. Architecture Single-Page Web Applications (SPA) Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS von 0 auf 100 Angular Kickstart
18. Cross-Platform Support Single-Page Web Applications (SPA) JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Capacitor Electron von 0 auf 100 Angular Kickstart
19. 3. Angular CLI von 0 auf 100 Angular Kickstart
20. Features Angular CLI von 0 auf 100 Angular Kickstart
21. Features Angular CLI von 0 auf 100 Angular Kickstart
22. Features Angular CLI von 0 auf 100 Angular Kickstart
23. Features Angular CLI von 0 auf 100 Angular Kickstart
24. Features Angular CLI von 0 auf 100 Angular Kickstart
25. Angular Kickstart von 0 auf 100 Let’s try out StackBlitz LAB #0
26. 4. Modules von 0 auf 100 Angular Kickstart
27. Application Segmentation UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Modules von 0 auf 100 Angular Kickstart
28. Angular Building Blocks UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Modules Components Directives Pipes High-Level Services Low-Level Services von 0 auf 100 Angular Kickstart
29. Modules Components Directives Pipes Modules Services von 0 auf 100 Angular Kickstart
30. Dependency Tree AppModule TodoModule CommonModule BookModule CommonModule TicketModule ShopModule EditorModule Modules von 0 auf 100 Angular Kickstart
31. For the future Modules von 0 auf 100 Angular Kickstart Standalone Components Directives Pipes !
32. 5. Bindings von 0 auf 100 Angular Kickstart
33. UI references a property on the component instance that should be interpolated Or: UI references a method on the component instance that should be called on a certain event Automatically updates UI when the model is updated Keeps presentation and model in sync Data Binding von 0 auf 100 Angular Kickstart
34. btnCalc lblVal von 0 auf 100 Angular Kickstart
35. {{ Moustache Syntax von 0 auf 100 Angular Kickstart
36. Handlebars von 0 auf 100 Angular Kickstart
37. Interpolation Component view (HTML) {{ value }} Component logic (TS) @Component(/* … */) export class AppComponent { public value = 'Hello'; } Bindings von 0 auf 100 Angular Kickstart
38. Interpolation Component view (HTML) {{ value }} Component logic (TS) @Component(/* … */) export class AppComponent { public value = 'Hello'; } Bindings von 0 auf 100 Angular Kickstart
39. [ ] ( ) More Bindings von 0 auf 100 Angular Kickstart
40. Pass data in Bind to a certain property of a DOM node or component/directive Property Binding [ ] von 0 auf 100 Angular Kickstart
41. More options Angular Kickstart von 0 auf 100 Property Bindings
42. Get data out Bind to a certain event of a DOM node or component/directive Event Binding ( ) von 0 auf 100 Angular Kickstart
43. Event Binding von 0 auf 100 Angular Kickstart
44. - Interpolations - Property Bindings - Event Bindings Angular Kickstart von 0 auf 100 Bindings LAB #1
45. Magic value: $event Contains the event arguments Event Binding ( ) von 0 auf 100 Angular Kickstart
46. Event Binding LAB #2 von 0 auf 100 Angular Kickstart
47. 6. Pipes von 0 auf 100 Angular Kickstart
48. UI-related Re-usable Manipulate binding values for the view without changing the underlying value (one-way) UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) von 0 auf 100 Angular Kickstart
49. Principle Pipes Value Pipe Transformed Value von 0 auf 100 Angular Kickstart
50. Principle Pipes Hello UppercasePipe HELLO von 0 auf 100 Angular Kickstart
51. Built-in Pipes • uppercase • lowercase • date • number • percent • currency • json Pipes von 0 auf 100 Angular Kickstart
52. Parameters Pipes can also have parameters delimited by a colon Pipes von 0 auf 100 Angular Kickstart
53. Built-in Pipes Pipes von 0 auf 100 Angular Kickstart
54. Custom Pipes Pipes von 0 auf 100 Angular Kickstart
55. - Interpolation - Built-in pipes - Create a new pipe Angular Kickstart von 0 auf 100 Pipes LAB #3
56. 7. Components von 0 auf 100 Angular Kickstart
57. UI-related Re-usable Custom DOM element HTML Template UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) von 0 auf 100 Angular Kickstart
58. Principle Components Input 1 Component Output A Input 2 Output B Input 1 Component von 0 auf 100 Angular Kickstart
59. Components von 0 auf 100 Angular Kickstart
60. Usage <app-todo></app-todo> @Component({ selector: 'app-todo', templateUrl: './todo.component.html', styleUrls: ['./todo.component.css'] }) export class AppComponent { } Components von 0 auf 100 Angular Kickstart
61. - Create a new component - Use the new component in your AppComponent’s template Components LAB #4 von 0 auf 100 Angular Kickstart
62. 8. Input/Output von 0 auf 100 Angular Kickstart
63. Bindings for component state/events [ ] ( ) Input/Output von 0 auf 100 Angular Kickstart
64. We want to pass arbitrary data to components: Input von 0 auf 100 Angular Kickstart
65. Component Perspective Input von 0 auf 100 Angular Kickstart
66. Property Bindings If you want to bind a static string to a property, you can use a simplified form by leaving out the square brackets. Angular Kickstart von 0 auf 100 Input
67. Property Bindings If you want to react to changes (i.e. new value or updated reference) of the property binding, use TypeScript field setters: Angular Kickstart von 0 auf 100 Input
68. We want to get informed about custom events: Output von 0 auf 100 Angular Kickstart
69. Component Perspective Output von 0 auf 100 Angular Kickstart
70. - Input - Output Input/Output LAB #5 von 0 auf 100 Angular Kickstart
71. 9. Directives von 0 auf 100 Angular Kickstart
72. UI-related Re-usable Manipulate styling or behaviour of a DOM element Or: Manipulate DOM structure (not covered here) UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) von 0 auf 100 Angular Kickstart
73. Angular Kickstart von 0 auf 100 Directives
74. Angular Kickstart von 0 auf 100 HostBinding
75. Angular Kickstart von 0 auf 100 HostListener
76. - Create a color directive - Create a click directive Angular Kickstart von 0 auf 100 Directives LAB #6
77. 10. Dependency Injection von 0 auf 100 Angular Kickstart
78. Motivation - Low Coupling, High Cohesion - In a unit test, a developer is not interested in arranging a test setup for a complete tax calculation or even performing it. - A developer might be interested in switching between different strategies (e.g. a different tax calculation for Germany and Austria) - Thus: A component should not arrange its dependencies on its own (Inversion of Control, IoC) but rely on an external party instead (dependency injection container/IoC container) Angular Kickstart von 0 auf 100 Dependency Injection
79. Goal - DI container is aware of environment - Sets up dependencies accordingly - Low Coupling, High Cohesion Angular Kickstart von 0 auf 100 Dependency Injection DI Container My Calculation Mock TaxCalc Germany TaxCalc ELSTER
80. Dependency Tree Angular Kickstart von 0 auf 100 Angular DI RootInjector Module Component Module Component Module Component Component
81. Dependency Tree - Angular Dependency Injection is type-based - Only classes can be used as providers and injectables, as interfaces vanish during TypeScript transpilation - Alternative for non-class dependencies: InjectionTokens - Classes have to be marked as @Injectable() if they want to request dependencies - Dependencies can be requested by simply using them as a constructor parameter Angular Kickstart von 0 auf 100 Angular DI
82. Self-Register as an Application-wide Singleton @Injectable({ providedIn: 'root' }) export class TaxCalculation {} Angular Kickstart von 0 auf 100 Angular DI RootInjector Module Component Module Component Module Component Component
83. Providing Dependencies Angular Kickstart von 0 auf 100 Angular DI RootInjector Module Component Module Component Module Component Component
84. Consuming Dependencies @Injectable() } Throws an error if dependency cannot be resolved! Angular Kickstart von 0 auf 100 Angular DI
85. Consuming Dependencies @Injectable() } Angular Kickstart von 0 auf 100 Angular DI
86. Sample ElementRef allows accessing the native rendering host element of the directive or component Retrieved via Dependency Injection constructor(elRef: ElementRef) {} Dependency Injection von 0 auf 100 Angular Kickstart
87. Storing Dependencies Angular Kickstart von 0 auf 100 Angular DI
88. Storing Dependencies } Useful TypeScript feature: Constructor parameter + access modifier automatically creates a field with the same name and type Angular Kickstart von 0 auf 100 Angular DI
89. 11. Services von 0 auf 100 Angular Kickstart
90. Not UI-related Re-usable Contain common (domain-specific) logic Contain infrastructure (non-domain-specific) code UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) von 0 auf 100 Angular Kickstart
91. Angular Kickstart von 0 auf 100 Service
92. - Injecting ElementRef - Injection Tokens - Create a new service Dependency Injection/Services LAB #7 von 0 auf 100 Angular Kickstart
93. 12. Structural Directives von 0 auf 100 Angular Kickstart
94. UI-related Re-usable Manipulate DOM structure UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) von 0 auf 100 Angular Kickstart
95. Conditionally Include Node in DOM Angular Kickstart von 0 auf 100 *ngIf
96. Multiple conditions <div [ngSwitch]="user.language"> Angular Kickstart von 0 auf 100 *ngSwitchCase
97. Repeat DOM Node Angular Kickstart von 0 auf 100 *ngFor
98. Repeat DOM Node <ul> <li>Wash my clothes</li> <li>Tidy up the room</li> <li>Mine bitcoin</li> </ul> Angular Kickstart von 0 auf 100 *ngFor [ "Wash my clothes" "Tidy up the room" "Mine bitcoin" ]
99. - *ngIf - *ngFor Angular Kickstart von 0 auf 100 *ngFor LAB #8
100. 13. Observables & RxJS von 0 auf 100 Angular Kickstart
101. Motivation Obviously, not all use cases can be solved synchronously When we are using our to-do API, this will be an asynchronous task (due to network roundtrip) For a fast and fluid user experience, everything that could potentially take longer than 16ms (=> 60 fps) should be done asynchronously! Angular Kickstart von 0 auf 100 Observables
102. Motivation Callback Promise Observable Execution Eager Eager Lazy Values Multiple Single Multiple Cancelable No No* Yes Composable No Yes Yes Angular Kickstart von 0 auf 100 Observables
103. “Data over Time” https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular Kickstart von 0 auf 100 Observables
104. Reactive https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular Kickstart von 0 auf 100 Observables
105. Originally known as Reactive Extensions for .NET Open-Source Published for JavaScript, Java, … High-Level Flow Composition Provides an Observable implementation Provides operators (map, throttle, …) Angular Kickstart von 0 auf 100 RxJS
106. Upgrade Synchronous Values to an Observable of(value) à Promise.resolve(value) throwError(err) à Promise.reject(err) Angular Kickstart von 0 auf 100 Observables
107. Subscribe Angular Kickstart von 0 auf 100 Observables
108. Unsubscribe Angular Kickstart von 0 auf 100 Observables
109. Future in Angular Angular Kickstart von 0 auf 100 Observables Signals !
110. 14. HttpClient von 0 auf 100 Angular Kickstart
111. Infrastructure service provided by Angular’s @angular/common/http package. Allows setting up HTTP Requests using a TypeScript-friendly interface: - get(url) - post(url, data) - put(url, data) - delete(url) Angular Kickstart von 0 auf 100 HttpClient
112. Service API - Adjust service - Use HttpClient Observables LAB #9 von 0 auf 100 Angular Kickstart
113. 15. Lifecycle Hooks Angular Kickstart von 0 auf 100
114. - “Technical” lifecycle hook - Called on object construction - Assign fields synchronously - Called once Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
115. - Called when bound properties (Input/Output) change - Event parameters: SimpleChanges (contains previous and current values) - Purpose: React to changes of bound properties - Called repeatedly Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
116. - Called after constructor and first ngOnChanges call - Purpose: Launch asynchronous tasks/offload complex initialization from constructor - No parameters - Called once Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
117. - Called whenever change detection is executed (“check”) - Purpose: React to any change in general - No parameters - Called repeatedly Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
118. - Called after the content (i.e. components/directives and subcomponents/subdirectives) has been initialized - Purpose: Access directives in the component’s content - No parameters - Called once Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
119. - Called whenever change detection has been executed on the content - Purpose: React to any changes in the content - No parameters - Called repeatedly Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
120. - Called after the view (i.e. components/directives and subcomponents/subdirectives) has been initialized - Purpose: Access directives in the component’s view - No parameters - Called once Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
121. - Called whenever change detection has been executed on the view - Purpose: React to any changes in the view - No parameters - Called repeatedly Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
122. - Called before the component/directive is destroyed - Purpose: Clean-up (unsubscribe from observables, unregister from events, …) - No parameters - Called once Angular Kickstart von 0 auf 100 Lifecycle Hooks 1. constructor 2. ngOnChanges 3. ngOnInit 4. ngDoCheck 5. ngAfterContentInit 6. ngAfterContentChecked 7. ngAfterViewInit 8. ngAfterViewChecked 9. ngOnDestroy
123. 16. Async Pipe von 0 auf 100 Angular Kickstart
124. Unsubscribe Angular Kickstart von 0 auf 100 Observables
125. Let Angular handle subscribing and unsubscribing for you! Makes handling observables as easy as handling synchronous values. Angular Kickstart von 0 auf 100 Async Pipe
126. Step 1: Use Observable fields Angular Kickstart von 0 auf 100 Async Pipe
127. Step 2: Adjust binding Angular Kickstart von 0 auf 100 Async Pipe
128. - Using the async pipe Async Pipe LAB #10 von 0 auf 100 Angular Kickstart
129. 17. Routing von 0 auf 100 Angular Kickstart
130. We want to map an application state to a certain URL Problem: There’s no server-side roundtrip So we need a different method to map app states to a URL Angular Kickstart von 0 auf 100 Routing
131. Angular Kickstart von 0 auf 100 Routing
132. Strategies PathLocationStrategy: Use HTML5-based history routing (default) https://localhost:4200/home/users/peter Note: Requires server-side rewriting! HashLocationStrategy: Use classic hash-based routing https://localhost:4200/#/home/users/peter Typically used for cross-platform builds (Electron, Cordova) Angular Kickstart von 0 auf 100 Routing
133. Root module Angular Kickstart von 0 auf 100 Routing Optional, default: false
134. Child module @NgModule({ declarations: [ ], imports: [ RouterModule.forChild([ /* Routes */ ]) ], providers: [] }) export class OtherModule { } Angular Kickstart von 0 auf 100 Routing
135. Routes { path: 'home', component: HomeComponent } Maps a static path to a component http://localhost:4200/home --> HomeComponent Angular Kickstart von 0 auf 100 Routing
136. Routes with Parameters { path: 'todos/:id', component: DetailComponent } Route parameter matches any string http://localhost:4200/todos/123 --> DetailComponent http://localhost:4200/todos/abc --> DetailComponent Angular Kickstart von 0 auf 100 Routing
137. Route Redirects { path: '', pathMatch: 'full', redirectTo: 'home' } Angular Kickstart von 0 auf 100 Routing
138. Wildcard Route { path: '**', component: NotFoundComponent } The wildcard route matches everything and must be the last route. Angular Kickstart von 0 auf 100 Routing
139. RouterOutlet <router-outlet></router-outlet> <resolved-component></resolved-component> Angular Kickstart von 0 auf 100 Routing
140. Mind the route order Angular Kickstart von 0 auf 100 Routing “new” matches :id this route never applies
141. Creating Links <a href="home">My link</a> Problem: How to assign a dynamic route? Angular Kickstart von 0 auf 100 Routing
142. Creating Links <a href="home">My link</a> <a [href]="'todos Problem: How to switch between hash and path-based routing? Angular Kickstart von 0 auf 100 Routing
143. RouterLink Angular Kickstart von 0 auf 100 Routing
144. Advanced RouterLink Angular Kickstart von 0 auf 100 Routing
145. Accessing Route Parameters } Note: There’s also an activated route snapshot. This snapshot isn’t updated when a route parameter changes. Hence, you should avoid using the snapshot. Angular Kickstart von 0 auf 100 Routing
146. Accessing Route Parameters Angular Kickstart von 0 auf 100 Routing
147. Accessing Route Parameters - Generate components - Define routes - Router outlet - Router links - Active router links - Activated route Angular Kickstart von 0 auf 100 Routing LAB #11
148. Programmatic Routing Angular Kickstart von 0 auf 100 Routing
149. Child Routes { path: 'todos', component: TodoComponent, children: [{ path: '', component: TodoListComponent }, { path: ':id', component: TodoDetailComponent }] } Angular Kickstart von 0 auf 100 Routing
150. Child Routes { Angular Kickstart von 0 auf 100 Routing app.component.ts <router-outlet></router-outlet> todo.component.ts <router-outlet></router-outlet> todo-list.component.ts http://localhost:4200/todos
151. Not Covered Here - Lazy Loading - Preloading Strategies - Aux Routes - Guards - Resolvers - Router Events Angular Kickstart von 0 auf 100 Routing
152. 18. Template-Driven Forms von 0 auf 100 Angular Kickstart
153. Module Import Angular Kickstart von 0 auf 100 Template-Driven Forms
154. Two-Way Binding Angular Kickstart von 0 auf 100 Template-Driven Forms
155. Two-Way Binding [ ] ( ) Template-Driven Forms von 0 auf 100 Angular Kickstart
156. Two-Way Binding [( )] Angular Kickstart von 0 auf 100 Template-Driven Forms
157. Field Definition Angular Kickstart von 0 auf 100 Template-Driven Forms
158. Validation Angular Kickstart von 0 auf 100 Template-Driven Forms
159. Validators - required - maxlength - minlength - min - max - pattern - email Angular Kickstart von 0 auf 100 Template-Driven Forms
160. Template Reference Variables Angular Kickstart von 0 auf 100 Template-Driven Forms
161. - Use a form - Validation Angular Kickstart von 0 auf 100 Template-Driven Forms LAB #12
162. Form States State Opposite Description ng-touched ng-untouched Control had focus ng-dirty ng-pristine Control value was changed ng-valid ng-invalid Control value is valid ng-pending Async validation is pending Angular Kickstart von 0 auf 100 Template-Driven Forms
163. ngModelOptions Update bound value on submit [ngModelOptions]="{ updateOn: 'submit' }" Update bound value on change (default) [ngModelOptions]="{ updateOn: 'change' }" Angular Kickstart von 0 auf 100 Template-Driven Forms
164. ngFormOptions Default update method can also be set on form level: <form [ngFormOptions]="{ updateOn Angular Kickstart von 0 auf 100 Template-Driven Forms
165. 19. Debugging von 0 auf 100 Angular Kickstart
166. Angular Kickstart von 0 auf 100 Chrome DevTools
167. ng.probe Angular Kickstart von 0 auf 100 Debugging
168. Angular DevTools Chrome DevTools Extension https://angular.io/guide/devtools Angular Kickstart von 0 auf 100 Debugging
169. Tour of Heroes https://angular.io/tutorial Bonus Material von 0 auf 100 Angular Kickstart
170. Thank you for your kind attention.