1.
Introduction to Angular
● Angular is a TypeScript-based open-source front-end web application framework
developed by Google.
● It’s used to build single-page applications (SPAs).
● Features include two-way data binding, dependency injection, routing, and
component-based architecture.
2. Setting Up the Environment with Angular CLI
Prerequisites:
● Install Node.js (includes npm): https://nodejs.org/
● Install Angular CLI globally using npm:
npm install -g @angular/cli
3. Project Setup
● Create a new Angular project:
ng new my-app
● Choose routing (optional) and stylesheet format (e.g., CSS, SCSS).
Navigate into the project:
cd my-app
Serve the app locally:
ng serve
Open in browser: http://localhost:4200
4. Bootstrapping the App
● Entry point: main.ts
platformBrowserDynamic().bootstrapModule(AppModule);
● Root module: app.module.ts
○ Declares components and imports modules.
● Root component: app.component.ts
○ Selector: <app-root> (used in index.html)
○ HTML: app.component.html is rendered on the page.
5. Building Components
● Generate a component:
bash
CopyEdit
ng generate component component-name
○ Or shorthand: ng g c component-name
● A component includes:
○ .ts: TypeScript logic
○ .html: template
○ .css/.scss: styles
○ .spec.ts: for unit testing
Example:
@Component({
selector: 'app-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css']
})
export class HelloComponent {
message = 'Hello, Angular!';
}
6. Understanding App Structure
Typical Angular app folder structure:
src/
├── app/
│ ├── app.component.ts/html/css
│ ├── app.module.ts
│ └── [other components, services, modules]
├── assets/
├── environments/
├── index.html
├── main.ts
└── styles.css
● app/: All core logic resides here (components, modules,
services).
● assets/: Static files like images or JSON data.
● environments/: Environment-specific configs (e.g., dev vs prod).
● angular.json: Angular CLI config.
● package.json: Dependencies and scripts.
1. Creating and Nesting Components
✅ Create a Component:
ng generate component child
# OR
ng g c child
✅ Nesting Components:
Use the child component selector in the parent’s template:
<!-- app.component.html -->
<h1>Parent Component</h1>
<app-child></app-child>
2. Setting Up Templates
You can define templates in:
● HTML File (external):
templateUrl: './child.component.html'
Inline (inline template):
template: `<p>This is an inline template</p>`
Templates can use Angular directives like:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
🔹 3. Data Binding Overview
Angular supports 4 types of data binding:
Type Syntax Description
Interpolation {{ data }} Display data in the template
Property [property]="da Bind data from TS to HTML
Binding ta" property
Event Binding (event)="handl Respond to user actions
er"
Two-Way [(ngModel)]="d Sync data both ways (requires
Binding ata" FormsModule)
🔹 4. Two-Way Data Binding
✅ Setup:
1.Import FormsModule in app.module.ts:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule]
})
2. In component template:
<input [(ngModel)]="username" />
<p>Hello, {{ username }}!</p>
5. Managing @Input and @Output (Parent-Child
Communication)
✅ @Input: Pass data from parent → child
Parent: (html)
<app-child [childMessage]="messageFromParent"></app-child>
Child:(ts)
@Input() childMessage: string;
html:
<p>Child says: {{ childMessage }}</p>
@Output: Emit event from child → parent
Child:ts
@Output() messageEvent = new EventEmitter<string>();
sendMessage() {
this.messageEvent.emit('Hello from Child!');
}
Html:
<button (click)="sendMessage()">Send to Parent</button>
Parent:html
<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>Received: {{ message }}</p>
Ts:
receiveMessage(msg: string) {
this.message = msg;
}
✅ Summary
Feature Purpose
@Input() Pass data to child component
@Output() Send data/event to parent
component
[(ngModel Two-way binding between input &
)] variable
[property One-way binding from TS to DOM
]
(event) One-way binding from DOM to TS
1. Built-in Directives in Angular
✅ Structural Directives
Change the structure of the DOM.
● *ngIf – Conditionally includes a template.
<p *ngIf="isVisible">Now you see me</p>
*ngFor – Loops through items.
<li *ngFor="let user of users">{{ user }}</li>
*ngSwitch – Conditional branching.
<div [ngSwitch]="role">
<p *ngSwitchCase="'admin'">Admin</p>
<p *ngSwitchDefault>User</p>
</div>
✅ Attribute Directives
Change the appearance or behavior of an element.
● ngClass, ngStyle, [class.className], [style.property]
<div [ngClass]="{'active': isActive}"></div>
<p [style.color]="isError ? 'red' : 'green'">Styled text</p>
2. Creating Custom Attribute Directives
✅ Step 1: Generate a directive
ng generate directive highlight
✅ Step 2: Use Renderer2 and HostListener
highlight.directive.ts
import { Directive, ElementRef, Renderer2, HostListener } from
'@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef, private renderer: Renderer2) {}
@HostListener('mouseenter') onMouseEnter() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor',
'yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement,
'backgroundColor');
}
}
✅ Step 3: Use in template
<p appHighlight>Hover me!</p>
🔹 3. Applying Styles
✅ Inline styles
<p style="color: blue;">Styled with inline CSS</p>
✅ Component styles (.component.css)
p {
font-weight: bold;
color: green;
}
✅ Dynamic styles
<p [ngStyle]="{ 'color': dynamicColor }">Styled dynamically</p>
🔹 4. View Encapsulation
Angular applies style scoping using View Encapsulation. You can
control it via the encapsulation property.
ts:
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
encapsulation: ViewEncapsulation.None // or Emulated / ShadowDom
})
Mode Description
Emulated Scoped styles with attribute selectors
(default)
None Global styles (no encapsulation)
ShadowDom Uses native shadow DOM (limited
browser support)
🔹 5. Bootstrap Integration
✅ Install Bootstrap
npm install bootstrap
✅ Add to angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
✅ Use Bootstrap classes
<div class="container mt-4">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
✅ Summary
Feature Purpose
*ngIf, *ngFor, Control DOM rendering
ngSwitch
ngClass, ngStyle Dynamic styling
Custom Directives Encapsulate reusable behavior
via attributes
Renderer2, Safely interact with the DOM
HostListener
View Encapsulation Style isolation and scoping
Bootstrap Prebuilt styles and responsive
layout
1. Template-driven vs Reactive Forms
✅ Template-driven Forms (simpler, for small apps)
● Defined in HTML template.
● Requires importing FormsModule.
Example:
// app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({ imports: [FormsModule] })
<form #form="ngForm" (ngSubmit)="submit(form)">
<input name="username" ngModel required />
</form>
✅ Reactive Forms (more scalable and robust)
● Form model is defined in TypeScript.
● Requires ReactiveFormsModule.
Example:
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({ imports: [ReactiveFormsModule] })
form = new FormGroup({
username: new FormControl('', [Validators.required,
Validators.minLength(3)])
});
<form [formGroup]="form" (ngSubmit)="submit()">
<input formControlName="username" />
</form>
🔹 2. Validators (Built-in and Custom)
✅ Built-in Validators:
● Validators.required
● Validators.minLength
● Validators.email
✅ Custom Validator Example:
function forbiddenNameValidator(control: AbstractControl):
ValidationErrors | null {
const forbidden = /admin/.test(control.value);
return forbidden ? { forbiddenName: { value: control.value } } :
null;
}
🔹 3. Creating and Using Services with
Dependency Injection
✅ Create a Service:
ng generate service data
✅ Basic Service Example:
@Injectable({ providedIn: 'root' })
export class DataService {
getData() {
return ['Angular', 'React', 'Vue'];
}
}
✅ Injecting a Service into a Component:
constructor(private dataService: DataService) {}
ngOnInit() {
this.frameworks = this.dataService.getData();
}
4. Dependency Injection (DI)
● Angular uses a hierarchical injector system.
● Decorate classes with @Injectable() to make them injectable.
● Services can be:
○ Provided in root (singleton across app)
○ Scoped to a component or module
🔹 5. Pipes
✅ Built-in Pipes:
● date, uppercase, lowercase, currency, percent, json, etc.
Example:
<p>{{ today | date:'shortDate' }}</p>
<p>{{ price | currency:'USD' }}</p>
✅ Custom Pipe:
generate with CLI:
ng generate pipe capitalize
capitalize.pipe.ts
@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
Usage in template:
<p>{{ 'hello' | capitalize }}</p> <!-- Output: Hello -->
✅ Summary Table
Feature Template-dri Reactive
ven
Form In template In TypeScript
setup
Validato HTML-based Code-based
rs
Flexibil Simple Complex,
ity scalable
🔹 1. Routing and Navigation
✅ Setup
Enable routing when generating your Angular app or manually in
app-routing.module.ts.
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users/:id', component: UserDetailComponent },
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard]
},
{ path: '**', component: NotFoundComponent } // wildcard route
];
Import and configure:
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
✅ Navigation
Use the routerLink directive:
<a routerLink="/users/5">User 5</a>
Or navigate programmatically:
this.router.navigate(['/users', userId]);
✅ Child Routes
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
children: [
{ path: 'stats', component: StatsComponent },
{ path: 'settings', component: SettingsComponent }
]
}
];
Use <router-outlet></router-outlet> inside DashboardComponent.
✅ Route Parameters
In the component:
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.paramMap.subscribe(params => {
const id = params.get('id');
});
}
🔹 2. HTTP Requests with Observables
✅ Setup HttpClient
Import in app.module.ts:
import { HttpClientModule } from '@angular/common/http';
@NgModule({ imports: [HttpClientModule] })
✅ Example Service
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
return this.http.get<User[]>('/api/users');
}
getUser(id: number): Observable<User> {
return this.http.get<User>(`/api/users/${id}`);
}
}
✅ In Component
ngOnInit() {
this.userService.getUsers().subscribe(users => this.users = users);
}
3. JWT Authentication & Route Guards
✅ Login Flow Example
● On successful login, backend returns a JWT.
● Store the token (e.g., in localStorage).
● Add the token to HTTP requests using an interceptor.
✅ Auth Interceptor
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const token = localStorage.getItem('token');
if (token) {
const cloned = req.clone({
headers: req.headers.set('Authorization', `Bearer ${token}`)
});
return next.handle(cloned);
}
return next.handle(req);
}
}
Provide in module:
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true
}
]
✅ Auth Guard to Protect Routes
ts
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router:
Router) {}
canActivate(): boolean {
if (this.authService.isAuthenticated()) {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
✅ Route Guard in Routing
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
✅ Summary Table
Feature Purpose
routerLink, Navigate between components/pages
navigate()
Route parameters Pass dynamic data via URLs
HttpClientModule Make GET/POST/PUT/DELETE calls to backend
Observable Handle async data streams from HTTP calls
JWT Secure APIs, store token, use with
Authentication Authorization header
Interceptor Automatically attach token to HTTP
requests
Route Guard Restrict access to routes based on auth
1. Lazy Loading Modules
Lazy loading loads feature modules only when needed, reducing initial
load time.
✅ Step 1: Create a Feature Module with Routing
ng generate module features/admin --route admin --module app.module
This automatically sets up lazy loading in your app-routing.module.ts:
const routes: Routes = [
{ path: 'admin', loadChildren: () =>
import('./features/admin/admin.module').then(m => m.AdminModule) }
];
const routes: Routes = [
{ path: 'admin', loadChildren: () =>
import('./features/admin/admin.module').then(m => m.AdminModule) }
];
📌 Angular uses dynamic import() for lazy-loaded modules.
🔹 2. Preloading Strategies
Preloading loads modules after the initial app load to make them ready
in the background.
✅ Use Built-in Strategies
In app-routing.module.ts:
import { PreloadAllModules } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy:
PreloadAllModules })]
})
✅ Custom Preloading Strategy
Create a service:
@Injectable({ providedIn: 'root' })
export class CustomPreloadingStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any>
{
return route.data && route.data['preload'] ? load() : of(null);
}
}
Use in routes:
{ path: 'admin', loadChildren: () =>
import('./admin/admin.module').then(m => m.AdminModule), data: {
preload: true } }
In app-routing.module.ts:
RouterModule.forRoot(routes, { preloadingStrategy:
CustomPreloadingStrategy })
🔹 3. Advanced Route Guards
Angular supports four types of route guards:
Guard Type Purpose
CanActivate Controls access before route
activates
CanDeactivate Checks before navigating away from
component
CanActivateCh Controls access to child routes
ild
Resolve Preloads data before route loads
✅ CanDeactivate Example
Create a component interface:
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> |
boolean;
}
Guard:
@Injectable({ providedIn: 'root' })
export class ConfirmDeactivateGuard implements
CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
Component:
canDeactivate(): boolean {
return confirm('Unsaved changes. Leave page?');
}
Route:
{ path: 'edit', component: EditComponent, canDeactivate:
[ConfirmDeactivateGuard] }
✅ Resolve Guard Example
To load data before activating a route:
Guard:
@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
constructor(private userService: UserService) {}
resolve(route: ActivatedRouteSnapshot): Observable<User> {
return this.userService.getUser(route.paramMap.get('id'));
}
}
Route:
{ path: 'user/:id', component: UserComponent, resolve: { user:
UserResolver } }
Component:
ngOnInit() {
this.route.data.subscribe(data => this.user = data['user']);
}
✅ Summary
Feature Description
Lazy Loading Loads modules only when needed, improves
initial load time
Preloading Loads lazy modules in background for faster
access
CanActivate Prevents access to route unless condition is
met
CanDeactivate Warns users before leaving (e.g., unsaved
form)
Resolve Loads data before route activation
CanActivateChi Protects child routes under a parent route
ld
