angular fundamentals.pdf angular fundamentals.pdf

Angular Fundamentals
Babel Coder

Components
“A component controls a patch of screen real estate that we could call a view,
and
declares reusable UI building blocks for an application.”
Babel Coder

Components
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: ` <p>Hello {{name}}</p> `
})
export class Hello {
name: string;
constructor() {
this.name = 'World';
}
}
Metadata Hello World
Babel Coder

Components
Note List
Note#3
Note#2
Note#1 Note#4
NoteForm
Note#1
Note#2
Note#3
Note#4
Add
Notes
App
Babel Coder

Component Glosary
Bootstrap Process
Root Module
Declarations
BrowserModule
Components
Selectors
Templates
Interpolation
Input / Output and Event Handling
Event Binding and Property Binding
Safe Navigation Operator
Babel Coder

Lifecycle Hooks
lifecycle
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Babel Coder

Lifecycle Hooks
ngOnChanges
ngOnInit
ngOnChanges
set data-bound input propertirs
After first displays and sets the component's
input properties
reset data-bound input propertirs
Babel Coder

ngOnInit
import { OnInit } from '@angular/core';
export class OnInitComponent implements OnInit {
constructor() {
// fetch API
}
ngOnInit() {
// fetch API
}
}
Babel Coder

ngOnChanges
import { OnChanges, SimpleChanges } from '@angular/core';
export class OnChangesComponent implements OnChanges {
constructor() {
}
ngOnChanges(changes: SimpleChanges) {
}
}
Babel Coder

Directives
Directives DOM DOM
+
A Directive modifies the DOM to change apperance, behavior or layout of DOM elements.
Babel Coder

Directives
Component: Directives + Template
Structural Directives: Change the Dom Layout
Attribute Directives: Change the appearance or behavior
Babel Coder

structural directives
NgFor
NgIf
NgSwitch
Babel Coder

ngFor
@Component({
selector: 'app-root',
template: `
<div *ngFor="let course of courses">
{{ course.title }} - {{ course.price }} Baht
</div>
`
})
export class AppComponent {
courses = [
{ title: 'Universal Angular2', price: 7500 },
{ title: 'Advance JavaScript', price: 7500 },
{ title: 'Fullstack JavaScript', price: 7500 }
]
}
Universal Angular2 - 7500 Baht
Advance JavaScript - 7500 Baht
Fullstack JavaScript - 7500 Baht

ngFor
@Component({
template: `
@for (course of courses; track course.title) {
<div>
</div>
}
`
})
courses = [
{ title: 'Fullstack JavaScript', price: 7500 }
]
}
Universal Angular2 - 7500 Baht
Advance JavaScript - 7500 Baht
Fullstack JavaScript - 7500 Baht

ngIf
@Component({
template: `
<div *ngFor="let course of courses">
<div *ngIf="course.price <= 3000">
</div>
</div>
`
})
courses = [
{ title: 'Fullstack JavaScript', price: 7500 },
{ title: 'Instant Angular2', price: 2950 },
]
} Instant Angular2 - 2950 Baht

ngIf
@Component({
template: `
@for (course of courses; track course.title) {
@if (course.price <= 3000) {
<div>{{ course.title }} - {{ course.price }} Baht</div>
}
}
`
})
courses = [
{ title: 'Fullstack JavaScript', price: 7500 },
{ title: 'Instant Angular2', price: 2950 },
]
} Instant Angular2 - 2950 Baht

ngSwitch
@Component({
template: `
<div *ngIf="currentView === 'SHOW'">Show View</div>
<div *ngIf="currentView === 'EDIT'">Edit View</div>
<div *ngIf="currentView === 'CREATE'">Create View</div>
<div *ngIf="currentView !== 'SHOW' && currentView !== 'EDIT' && currentView
!== 'CREATE'">
Landing Page
</div> `
})
currentView = 'SHOW';
}
Babel Coder

ngSwitch
@Component({
template: `
<div [ngSwitch]="currentView">
<div *ngSwitchCase="'SHOW'">Show View</div>
<div *ngSwitchCase="'EDIT'">Edit View</div>
<div *ngSwitchCase="'CREATE'">Create View</div>
<div *ngSwitchDefault>Landing Page</div>
</div>
`
})
} Show View

ngSwitch
@Component({
template: `
<div>
@switch (currentView) {
@case ('SHOW') {
<div>Show View</div>
}
@case ('EDIT') {
<div>Edit View</div>
}
@case ('CREATE') {
<div>Create View</div>
}
@default {
<div>Landing Page</div>
}
}
</div>
`
})
}
Show View

Attribute Directives
NgStyle
NgClass
Babel Coder

ngStyle
@Component({
selector: 'bold-button',
template: `
<button [ngStyle]="{
color: color,
'background-color': bgColor,
fontWeight: 'bold'
}">
<ng-content></ng-content>
</button>
`
})
export class DeleteButtonComponent {
@Input() bgColor: string = 'red';
@Input() color: string = 'white';
}
@Component({
template: `
<bold-button bgColor="green">
Delete
</bold-button>
`
})
export class AppComponent { }
Delete

Style
@Component({
template: `
<button [style.backgroundColor]="'green'">OK!</button>
`
})
Babel Coder

ngClass
@Component({
template: `
<button ngClass="btn btn-success">OK!</button>
`,
styles: [`
.btn {
padding: 6px 12px;
line-height: 1.5;
border: none;
}
.btn-success {
color: #FFF;
background-color: #449d44;
}
`]
})
Babel Coder

Pipes
Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are
simple functions to use in template expressions to accept an input value and return a
transformed value.
Babel Coder

Built-in Pipes
DatePipe
CurrencyPipe
DecimalPipe
SlicePipe
JsonPipe
PercentPipe
LowerPipe
LowerCasePipe
UpperCasePipe
TitlePipe
Etc

Using Pipes
@Component({
selector: 'lowerupper-pipe',
template: `<div>
<label>Name: </label><input #name (keyup)="change(name.value)" type="text">
<p>In lowercase: <pre>'{{value | lowercase}}'</pre>
<p>In uppercase: <pre>'{{value | uppercase}}'</pre>
</div>`
})
export class LowerUpperPipeComponent {
value: string;
change(value: string) { this.value = value; }
}
Babel Coder

Async Pipes
@Component({
selector: 'async-pipe',
template: `<div>{{ promise | async }}</div>`
})
export class SlicePipeListComponent {
promise = new Promise((resolve) => {
resolve('Hello');
});
}

Custom Pipes
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
standalone: true,
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, maxLenght: number) {
return value.length > maxLenght ? value.slice(0, maxLenght) + '...' : value;
}
}

Custom Pipes
@Component({
selector: 'truncate-pipe',
imports: [TruncatePipe],
template: `<div>{{ 'Lorem Ipsum' | truncate: 3 }}</div>`
})
export class TruncatePipeComponent {
}

Services
logging service
data service
message bus
tax calculator
application configuration

Services
DI Framework
Service Component
1. gets registered 2. declares dependency
3. injects the service
Babel Coder

Services (Provider)
Babel Coder
@Injectable({
providedIn: 'root',
})
export class LeaveService{}

Services (Consumer)
Injector
Service A Service B Service C Service D
Component
constructor(private serviceA: ServiceA) {}
Babel Coder
private serviceA = inject(ServiceA)
Component

Services (Consumer)
Injector
Service B Service C Service D
Babel Coder
private serviceA = inject(ServiceA)
Component
Injector
Service B Service C Service D
Service A
resolves

Services
@Injectable({
providedIn: 'root',
})
export class LeaveService {
http = inject(HttpClient);
getLeaveList() {
return this.http.get<LeaveItem[]>(
`${import.meta.env.NG_APP_API_URL}/leaves`
);
}
}
Babel Coder
@Component({
selector: 'absence-management-leave-list',
standalone: true,
imports: [CommonModule, LeaveItemComponent],
templateUrl: './leave-list.component.html',
styleUrls: ['./leave-list.component.scss'],
})
export class LeaveListComponent {
leaveService = inject(LeaveService);
leaveList$ = this.leaveService.getLeaveList();
}
<div class="max-w-3xl mx-auto">
<h2 class="text-center text-green-700 text-3xl my-2">All Leaves</h2>
<section class="grid grid-cols-3 gap-2">
<absence-management-leave-item
*ngFor="let leave of leaveList$ | async"
[leave]="leave"
></absence-management-leave-item>
</section>
</div>
Service
Component Component

Reactive Programming
Babel Coder

let a = 1
let b = 2
let c = a + b // 3
a = 4
c = 3
c = 6
Babel Coder

reactive programming
Reactive programming is a programming paradigm oriented around data flows
and the propagation of change
let a
let b
let c
1
2
3
4
5
3 7 9
Babel Coder

RP Asynchronous Dataflow
= +
let a
let b
let c
1
2
3
4
5
3 7 9
Stream
Babel Coder

1 Define the different streams
2 Define the operations
+
let a
let b
let c
1
2
3
4
5
3 7 9
Babel Coder

It allows you to specify the dynamic behavior of a value completely at the time of
creation.
let a = 1
let b = 2
console.log(a * 2)
console.log(b * 2)
IMP
let values$ = of(1, 2);
let transform$ = values$.pipe(map(a => a * 2));
transform$.subscribe(
value => console.log(value)
);
RP
Babel Coder

Babel Coder

functional reactive programming
FRP RP Functional
= +
let a
let b
1 3 4
2 6 8
map / reduce / filter
Babel Coder

RxJS
ReactiveX
An API for asynchronous programming with observable streams

stream
A sequence of values over time.
[0, 1, 2, 3, 4, 5]
[(100, 120), (200, 199), (33, 71)]
[
"b",
"ba",
"bab",
"babel"
]
Streams Operators
+
Babel Coder

observable
Observables act as a blueprint for how we want to create streams,
subscribe to them, react to new values,
and combine streams together to build new ones.
Observer Observable
Stream
Babel Coder

marble diagrams
let streamA$ = interval(1000);
let streamB$ = streamA$.pipe(map(a => a * 2));
streamB$.subscribe(console.log); 0
2
4
6
…

marble diagrams
let streamA$ = interval(1000);
let streamB$ = streamA$.pipe(map(a => a * 2));
/*
streamA: ---0---1---2---3---4...
map(a => 2 * a)
streamB: ---0---2---4---6---8...
*/
streamB$.subscribe(value => console.log(value)); Babel Coder

Subscribing to Observables
Babel Coder
const subscription = interval(1_000).subscribe({
next: (v) => console.log(v),
error: (err) => console.error(err),
complete: () => console.log('completed!'),
});
setTimeout(() => subscription.unsubscribe,
5_000);
0
1
2
3
4

map
interval(1000)
.pipe(map((v) => v * 2))
.subscribe((value) =>
console.log(value));
0
2
4
...
Babel Coder

filter
interval(1000)
.pipe(filter((v) => v % 2 === 0))
.subscribe((value) =>
console.log(value));
0
2
4
...
Babel Coder

merge
const timer1 = interval(500).pipe(take(3));
merge(timer1, timer2).subscribe((value) => console.log(value));
0
1
0
2
1
2
Babel Coder

concat
concat(timer1, timer2).subscribe((value) => console.log(value));
0
1
2
0
1
2 Babel Coder

mergeAll
of(1, 2, 3)
.pipe(
map((v) => interval(500).pipe(take(v * 2))),
mergeAll()
)
.subscribe(console.log); Babel Coder

mergeMap
of(1, 2, 3)
.pipe(mergeMap((v) => interval(500).pipe(take(v * 2))))
.subscribe(console.log);
Babel Coder

concatAll
fromEvent(document, 'click')
.pipe(
map(() => interval(500).pipe(take(3))),
concatAll()
)
.subscribe((x) => console.log(x));
Babel Coder

switchMap
interval(500)
.pipe(take(3))
.pipe(switchMap((x) => of(x, x ** 2, x ** 3)))
Babel Coder

combineLatest
const firstTimer = timer(0, 1000).pipe(take(3));
const secondTimer = timer(500, 1000).pipe(take(3));
combineLatest([firstTimer, secondTimer]).subscribe((value) =>
console.log(value)
);
Babel Coder

debounceTime
fromEvent(document, 'click')
.pipe(
debounceTime(1000),
map(() => 'x')
)
Babel Coder

retry
interval(100)
.pipe(
mergeMap((val) => (val > 5 ? throwError(() => 'Error!') : of(val))),
retry(2) // retry 2 times on error
)
.subscribe({
next: (value) => console.log(value),
error: (err) => console.log(`${err}: Retried 2 times then quit!`),
}); Babel Coder

distinctUntilChanged
of(1, 1, 1, 2, 2, 2, 1, 1, 3, 3)
.pipe(distinctUntilChanged())
1
2
1
3
of({ x: 1, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 2 }, { x: 3, y: 1 })
.pipe(
distinctUntilChanged((prev, curr) => {
return prev.x === curr.x || prev.y === curr.y;
})
)
{ x: 1, y: 1 }
{ x: 2, y: 2 }
{ x: 3, y: 1 }
Babel Coder

Subject
A Subject is like an Observable, but can multicast to many Observers. Subjects are
like EventEmitters: they maintain a registry of many listeners.
const subject = new Subject<number>();
subject.subscribe({
next: (v) => console.log(`Observer
A: ${v}`),
});
subject.subscribe({
B: ${v}`),
});
subject.next(1);
subject.next(2);
subject.subscribe({
C: ${v}`),
});
subject.next(3);
Observer A: 1
Observer B: 1
Observer A: 2
Observer B: 2
Observer A: 3
Observer B: 3
Observer C: 3
Babel Coder

BehaviorSubject
BehaviorSubjects are useful for representing "values over time".
const subject = new BehaviorSubject<number>(0);
subject.subscribe({
next: (v) => console.log(Òbserver A: ${v}`),
});
subject.subscribe({
next: (v) => console.log(Òbserver B: ${v}`),
});
subject.next(1);
subject.next(2);
subject.subscribe({
next: (v) => console.log(Òbserver C: ${v}`),
});
subject.next(3);
Observer A: 0
Observer B: 0
Observer A: 1
Observer B: 1
Observer A: 2
Observer B: 2
Observer B: 2
Observer A: 3
Observer B: 3
Observer C: 3
Babel Coder

Example I: Type-ahead Suggestions
const searchBox = document.getElementById('search-box') as HTMLInputElement;
fromEvent(searchBox, 'input')
.pipe(
map((e) => (e.target as HTMLInputElement).value),
filter((text) => text.length > 3),
debounceTime(100),
distinctUntilChanged(),
switchMap((searchTerm) => ajax(`/api/endpoint?search=${searchTerm}`))
)
.subscribe((v) => console.log(v));
Babel Coder

Example II: Retry API Request
ajax('/api/endpoint')
.pipe(retry(2))
.subscribe((v) => console.log(v));
Babel Coder

Form Design
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email"
class="form-control"
id="email"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
class="form-control"
id="password"
placeholder="Password">
</div>
<button type="submit"
class="btn btn-primary">
Submit
</button>
</form>
FormGroup
FromControl
FromControl

Routing
URL
Router
Route
Component
Babel Coder

/books
Books
Book1
Book2
Book3
Book4
Book#1
/books/1
/books/new
/books/1/edit
Babel Coder

const appRoutes: Routes = [
{
path: 'books',
component: BooksComponent,
children: [
{
path: '',
component: BookListComponent
},
{
path: 'new',
component: FormComponent
},
{
path: ':id',
component: BookComponent
}
]
}
]
Books
App
Babel Coder

const appRoutes: Routes = [
{
path: 'books',
component: BooksComponent,
children: [
{
path: '',
component: BookListComponent
},
{
path: 'new',
},
{
path: ':id',
component: BookComponent,
children: [
{
path: 'edit',
}
]
}
]
}
]
Books
App
Book
Form
Babel Coder

https://www.babelcoder.com/books/1/edit
path
Books
<router-outlet>
</router-outlet>
Book
<router-outlet>
</router-outlet>
Form

routerLink
<a class="btn btn-secondary btn-sm" routerLink="/books/new">Create</a>
<a class="nav-link"
routerLinkActive="active"
[routerLink]="['/books', book.id, 'details']">Content</a>
<a class="nav-link"
routerLinkActive="active"
routerLinkActiveOptions="{ exact: true }"
[routerLink]="['/']">Content</a>
<a class="page-link"
[routerLink]="['/books']" [queryParams]="{ page: page }">
{{ page }}
</a>
Babel Coder

ActivatedRoute
this.route.snapshot
this.route.paramMap
ActivatedRouteSnapshot
this.route.queryParamMap Observable
…
Babel Coder

ParamMap
Book
/books/1 /books/2
ngOnInit() {
this.route.paramMap.subscribe(
(params: ParamMap) => this.id = params.get(‘id’);
);
}
Babel Coder

CanActivate
Guard
navigate
Babel Coder

CanDeactivate
Guard
navigate
Babel Coder

REST
Stands for “Representational State Transfer”
RESTful Web Services are one way of providing
interoperability between computer systems on the Internet.
Babel Coder

Traditional Web Architectures
Server
Presentation
Application
Persistence
Browser
Babel Coder

Client / Server
Internet
Client Server

Uniform Interface
User
Article
Comment
URL
/users
GET
POST
PUT
PATCH
DELETE
List All Users
Create New User
Babel Coder

Uniform Interface
User
Article
Comment
URL
/users/1
HTML
XML
JSON
text/html
application/xml
application/json
Babel Coder

Stateless
Internet
Client Server
User
Article
Comment
Babel Coder

HTTP Status Codes
CODE STATUS
1xx Informational responses
2xx Success
3xx Redirection
4xx Client Errors
5xx Server Errors

HTTP Status Codes
CODE STATUS
200 OK
201 Created
204 No Content
401 Unauthorized
404 Not Found
405 Method Not Allowed
422 Unprocessable Entity
500 Internal Server Error

Authentication & Authorization
Authentication
Articles
Authorization
Babel Coder

Authentication & authorization
Authentication is the process of ascertaining that
somebody really is who he claims to be.
Authorization refers to rules that determine who is
allowed to do what.
Babel Coder

A
B
C
423432g2f3j23
g23hg42j4h2k3
jh3g56jh5gj333
423432g2f3j23
g23hg42j4h2k3
jh3g56jh5gj333
Babel Coder

A
B
C
423432g2f3j23
g23hg42j4h2k3
jh3g56jh5gj333
423432g2f3j23
Babel Coder

423432g2f3j23
g23hg42j4h2k3
jh3g56jh5gj333
Babel Coder

JSON Web Token
JSON Web Token (JWT) is a JSON-based open standard (RFC 7519) for creating access tokens that
assert some number of claims.
<HEADER>.<PAYLOAD>.<SIGNATURE>
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtZXNzYWdlIjoiSldUIFJ1bGVzISIsImlhdCI6MTQ1OTQ0ODExOSwiZXhwIjoxNDU5NDU0NTE5fQ.-yIVBD5b73C75osbmwwshQ
Babel Coder

angular fundamentals.pdf angular fundamentals.pdf

More Related Content

What's hot (20)

Similar to angular fundamentals.pdf angular fundamentals.pdf (20)

More from NuttavutThongjor1 (20)

Recently uploaded (20)

angular fundamentals.pdf angular fundamentals.pdf