Angular Basics I

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

Values N G U L A R Apps that users
♥ to use Apps that developers to build Community where everyone feels welcome

Values NGULAR Apps that users to use Apps that developers
♥ to build Community where everyone feels welcome Igor Minar Lead at project - Keynote at AngularConnect 2018, London

Firebase Google Cloud Platform Google Express Google Analytics +600 more
… @Google N G U L A R

N G U L A R Clientside Rendering Serverside Rendering
Mobile Native Mobile Embedded Flavours

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

Group wisely N G U L A R T o
g g le All Prepare Workshop Hold the Workshop ToDo App List Item

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

Components

Purpose C O M P O N E N T
S Prepare Workshop Representation & Interaction

S Representation

S Interaction

HANDS ON Components in the wild

Start Application ANGULAR CLI npm start -- --open Watch out!
!

Your Entry Point COMPONENTS app.component.(html,scss,ts,spec.ts) is the root of all
good. !

Auto Reload ANGULAR CLI

Declaration COMPONENTS import { Component } from '@angular/core'; @Component({ selector:
'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'solid-foundations'; }

Usage COMPONENTS <body> <app-root></app-root> </body> index.html

Declaration COMPONENTS import { Component } from '@angular/core'; @Component({ selector:
'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'solid-foundations'; }

HANDS ON Enhance AppComponent

Assign data COMPONENTS app.component.ts app.component.html @Component({ !" !!# }) export
class AppComponent { title = 'solid-foundations'; todo = { text: 'Prepare 1st Workshop', isComplete: true }; }  <label> <input type="checkbox“ [checked]="todo.isComplete" /> {{ todo.text }} </label>

Handle events COMPONENTS app.component.ts app.component.html @Component({ !" !!# }) export
class AppComponent { !" !!# show(todo) { alert(todo); } }  <label> <input type="checkbox" [checked]="todo.isComplete" (change)=“show(todo)" /> {{ todo.text }} </label>

Input Bindings COMPONENTS app.component.html  <label> <input type="checkbox"
[checked]="todo.isComplete" (change)=“show(todo)" /> {{ todo.text }} </label> [property]="..." Let data flow into a child component

Output Bindings COMPONENTS app.component.html !" !!# $ <label> <input type="checkbox"
[checked]="todo.isComplete" (change)=“show(todo)" !% {{ todo.text }} !&label> (event)="fn(...)" React to events of a child component

Component Tree COMPONENTS AppComponent HTML Checkbox [checked] (changed) Parent Child

HANDS ON Your First Own Component

Generate Components ANGULAR CLI ng generate component path/component-name

A ToDo Component ANGULAR CLI ng generate component todo

COMPONENTS import { Component, OnInit } from '@angular/core'; @Component({ selector:
'app-todo', templateUrl: './todo.component.html', styleUrls: './todo.component.scss'] }) export class TodoComponent implments OnInit { // ... } Giving the todo a new home

Bind data COMPONENTS todo.component.ts todo.component.html import { Input, !!" }
from '@angular/core'; @Component({ !# !!" !$ }) export class ToDoComponent { !% <app-todo [todo]="value"> @Input() todo; }  <label> <input type="checkbox" [checked]="todo.isComplete" /> {{ todo.text }} </label>

Usage COMPONENTS app.component.html !" !!# $ <app-todo [todo]="todo">!&app-todo> [todo]="todo" Passing
data to ToDoComponent

Create custom an event COMPONENTS todo.component.ts todo.component.html import { EventEmitter,
Output ... } from '@angular/core'; @Component({ /* ... */ }) export class ToDoComponent { // ... @Output() update = new EventEmitter(); }  <label> <input type="checkbox" [checked]="todo.isComplete" (change)=“emitUpdate(todo)" /> {{ todo.text }} </label>

Create custom an event COMPONENTS todo.component.ts todo.component.html @Component({ /* ...
*/ }) export class ToDoComponent { // ... @Output() update = new EventEmitter(); emitUpdate(todo) { this.update.emit(todo); } }  <label> <input type="checkbox" [checked]="todo.isComplete" (change)=“emitUpdate(todo)" /> {{ todo.text }} </label>

Usage COMPONENTS app.component.html !" !!# $ <app-todo [todo]="todo" (update)="show($event)" >!&app-todo>
(update)=“show($event)" React to update of TodoComponent ☝ speciﬁed by

HANDS ON Handle Collections | *ngFor

Reuse with *ngFor COMPONENTS app.component.ts app.component.html @Component({ !" !!# !$
}) export class AppComponent { title = 'solid-foundations'; todos = [{ text: 'Prepare 2nd Workshop', isComplete: false }, { text: Hold 2nd Workshop', isComplete: false }]; !& !!# }  <app-todo [todo]="todo" (update)="show($event)“ *ngFor="let todo of todos" ></app-todo>

Recapitulation COMPONENTS is heavily used by Google Everything is a
Component @Input lets data flow into a Component @Output creates custom events CLI automates your environment setup

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

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

Angular Basics I

Angular Basics I

More Decks by Gregor Woiwode

Other Decks in Programming

Featured

Transcript