angular fundamentals.pdf

1. Angular Fundamentals
Babel Coder

2. 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

3. 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

4. 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

5. 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

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

7. 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

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

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

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

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

12. structural directives
NgFor
NgIf
NgSwitch
Babel Coder

13. ngFor
import { Component } from '@angular/core';
@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

14. ngFor
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
@for (course of courses; track course.title) {
<div>
{{ 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

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

16. ngIf
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
@for (course of courses; track course.title) {
@if (course.price <= 3000) {
<div>{{ 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 },
{ title: 'Instant Angular2', price: 2950 },
]
} Instant Angular2 - 2950 Baht

17. ngSwitch
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
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> `
})
export class AppComponent {
currentView = 'SHOW';
}
Babel Coder

18. ngSwitch
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
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>
`
})
export class AppComponent {
currentView = 'SHOW';
} Show View

19. ngSwitch
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
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>
`
})
export class AppComponent {
currentView = 'SHOW';
}
Show View

20. Attribute Directives
NgStyle
NgClass
Babel Coder

21. 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({
selector: 'app-root',
template: `
<bold-button bgColor="green">
Delete
</bold-button>
`
})
export class AppComponent { }
Delete

22. Style
@Component({
selector: 'app-root',
template: `
<button [style.backgroundColor]="'green'">OK!</button>
`
})
export class AppComponent { }
Babel Coder

23. ngClass
@Component({
selector: 'app-root',
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;
}
`]
})
export class AppComponent { }
Babel Coder

24. 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

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

26. 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

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

28. 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;
}
}

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

30. Services
logging service
data service
message bus
tax calculator
application configuration

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

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

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

34. 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

35. 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

36. Reactive Programming
Babel Coder

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

38. 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

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

40. reactive programming
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

41. reactive programming
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

42. reactive programming
Babel Coder

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

44. RxJS
ReactiveX
An API for asynchronous programming with observable streams

45. 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

46. 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

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

48. marble diagrams

49. marble diagrams
Babel Coder

50. 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

51. reactive programming
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

52. 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

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

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

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

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

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

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

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

60. switchMap
interval(500)
.pipe(take(3))
.pipe(switchMap((x) => of(x, x ** 2, x ** 3)))
.subscribe((x) => console.log(x));
Babel Coder

61. 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

62. debounceTime
fromEvent(document, 'click')
.pipe(
debounceTime(1000),
map(() => 'x')
)
.subscribe((x) => console.log(x));
Babel Coder

63. 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

64. distinctUntilChanged
of(1, 1, 1, 2, 2, 2, 1, 1, 3, 3)
.pipe(distinctUntilChanged())
.subscribe(console.log);
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;
})
)
.subscribe(console.log);
{ x: 1, y: 1 }
{ x: 2, y: 2 }
{ x: 3, y: 1 }
Babel Coder

65. 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({
next: (v) => console.log(`Observer
B: ${v}`),
});
subject.next(1);
subject.next(2);
subject.subscribe({
next: (v) => console.log(`Observer
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

66. BehaviorSubject
BehaviorSubjects are useful for representing "values over time".
const subject = new BehaviorSubject<number>(0);
subject.subscribe({
next: (v) => console.log(`Observer A: ${v}`),
});
subject.subscribe({
next: (v) => console.log(`Observer B: ${v}`),
});
subject.next(1);
subject.next(2);
subject.subscribe({
next: (v) => console.log(`Observer 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

67. 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

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

69. 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

70. Routing
URL
Router
Route
Component
Babel Coder

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

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

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

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

75. 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

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

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

78. CanActivate
Guard
navigate
Babel Coder

79. CanDeactivate
Guard
navigate
Babel Coder

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

81. Traditional Web Architectures
Server
Presentation
Application
Persistence
Browser
Babel Coder

82. Client / Server
Internet
Client Server

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

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

85. Stateless
Internet
Client Server
User
Article
Comment
Babel Coder

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

87. 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

88. Authentication & Authorization
Authentication
Articles
Authorization
Babel Coder

89. 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

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

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

92. 423432g2f3j23
g23hg42j4h2k3
jh3g56jh5gj333
Babel Coder

93. 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