co-IT.eu GmbH Inspire To Change Gregor Woiwode @GregOnNet Angular Solid Foundations Part 2 

Angular Conference ng-de.org Berlin • 30 - 31 August, 2019 

Components RECAP 

Purpose C O M P O N E N T S To g g le All Prepare Workshop Hold the Workshop ToDo App Representation & Interaction 

Purpose C O M P O N E N T S Representation 

Purpose CO M P O N E N T S Interaction 

Think in features N G U L A R T o g g le All Prepare Workshop Hold the Workshop ToDo App Header ToDos 

Think in small building blocks N G U L A R T o g g le All Prepare Workshop Hold the Workshop ToDo App Title ToDo Un-/ Complete 

Group wisely NGULAR T o g g le All Prepare Workshop Hold the Workshop ToDo App List Item 

Declaration COMPONENTS import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-todo', "// ""... }) export class TodoComponent { @Output() update = new EventEmitter(); } 

Start Application C L I & B a c ke n d npm start -- --open Watch out! npm start An gu l a r C l i e n t Ba cke n d 

HANDS ON Create a new Todo 

Component Tree COMPONENTS AppComponent TodoComponent TodoQuickAddComponent (create) 

A ToDo Component ANGULAR CLI ng generate component todo-quick-add 

Instrument Forms COMPONENTS FormsModule We will use Angular‘s Forms API. That‘s why the Corresponding Module needs to be imported. @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} a p p.m od u l e.t s 

Create a Todo COMPONENTS CREATE t o d o -q u i ck -a dd . co m p o n e n t .h t m l export class TodoQuickAddComponent { @Output() create = new EventEmitter(); emitCreate( textControl: HTMLInputElement ) { this.create.emit({ text: textControl.value, isComplete: false }); } } t o d o -q u i ck -a d d . co m p o n e n t .t s 

Create a Todo COMPONENTS app.component.html

Create a Todo COMPONENTS app.component.ts createTodo(todo) { this.todos = [""...this.todos, todo]; } Spread Operator ""... Destructure a list and create a new one 

Type safety through interfaces Ty p e S c r i p t export interface TodoDraft { title ?: string; text: string; isComplete: boolean; } optional property 

Add Type safety ANGULAR CLI ng generate interface models/todo-draft 

HANDS ON Add custom types 

Think in features N G U L A R Features are organized in modules, @NgModules. 

Think in features N G U L A R Where are our @NgModules? What is our feature? 

Generate @NgModule ANGULAR CLI ng generate module todos 

NgModule Basics COMPONENTS @NgModule({ declarations: [], exports: [], imports: [CommonModule] }) export class TodosModule {} R e g i s t e r C o m p o n e n t s S h a re C o m p o n e n t s I n s t r u m e n t M o d u l e s 

HANDS ON Tidy up 

Services N G U L A R ToDosComponent TodoComponent TodoQuickAddComponent Service BACKEND Load Aggregate Transform Filter 

Generate Service ANGULAR CLI ng generate service todos/lib/todos 

@Injectable for @Component Service @Injectable({ providedIn: 'root' }) export class TodosService { ... } @Component({ "/* ""..."*/ }) export class TodosComponent implements OnInit { todos: TodoDraft[]; constructor( private service: TodosService ) {} ngOnInit(): void { this.tasks = this.service.getAll(); ); } t odos.ser vi ce .t s t o do s. co m p o n e n t .t s 

HANDS ON Handle todos in the service 

HTTP NGULAR Asynchronous operations are handled with RxJs. 

RxJs impact on Angular NGULAR Http Forms Animations Routing 

Motivation to become an RxJS expert N G U L A R Learn the RxJs-API and you can master each Angular module. 

Observable N G U L A R Learn the RxJs-API and you can master each Angular module. 

Instrument Forms COMPONENTS HttpClientModule We will use Angular‘s HttpClient to interact with an HTTP-API. @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, FormsModule, HttpClientModule, TodosModule ], bootstrap: [AppComponent] }) export class AppModule {} a p p.m od u l e.t s 

Usage of HttpClient HTTP private endpoint = 'http://localhost:3000/tasks'; constructor( private http: HttpClient ) {} getAll(): Observable { return this.http .get(this.endpoint); } ngOnInit(): void { "// TODO: Handle subscription this.todosService.getAll() .subscribe( todos "=> this.todos = todos, error "=> "/* error occured "*/ () "=> "/* stream completes "*/ ); } t odos.ser vi ce .t s t o do s. co m p o n e n t .t s 

HANDS ON Get reactive with HtppClient 

Recapitulation COMPONENTS Features are organized with NgModules Use export to share a Component with other Modules Declare types explicitly with Interfaces Services set up data to be used by the Component Subscribe and unsubscribe from Observables 

co-IT.eu GmbH Inspire To Change @GregOnNet Thank you for listening speakerdeck.com/gregonnet/angular-basics-ii 

Sources CREDITS - Keynote AngularConnect 2018 by Igor Minar - Photos from Unsplash by - Dan Gold - Yoal Desurmont - angular.io