kaveer's blog

If you generated your project with: ng new my-app --routing then Angular Router is already set up. If not, you just need to manually configure it — no extra installation required! 🏗 2. Create Components You need components to route to. Example: ng generate component home ng generate component about This creates HomeComponent and AboutComponent . 📜 3. Define Routes Edit your app-routing.module.ts (or create it if missing): import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 🛠 4. Import Router Module in AppModule Ensu...

Reactive Forms in Angular Reactive Forms in Angular are model-driven , giving you programmatic control over form logic, structure, and validation entirely from the component class. They're great for complex, dynamic forms and large applications. 🔧 Setup Import ReactiveFormsModule in AppModule : import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ReactiveFormsModule] }) export class AppModule { } 🧠 Example: Reactive Form with Validation 📄 Component Class ( app.component.ts ) import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { userForm: FormGroup; constructor(private fb: FormBuilder) { this.userForm = this.fb.group({ name: ['', [Validators.required]], email: ['', [Validators.required, Validators....

Template-Driven Forms in Angular Template-Driven Forms in Angular provide a simple, declarative way to build forms using Angular directives in the HTML template. They're perfect for basic forms , quick prototypes, or when you want to avoid a lot of TypeScript code. ✅ Key Characteristics Defined in HTML using directives like ngModel , ngForm , ngSubmit Minimal TypeScript logic Powered by FormsModule 📦 Prerequisite Import FormsModule in your AppModule . import { FormsModule } from '@angular/forms'; @NgModule({ imports: [FormsModule] }) export class AppModule { } 🧱 Basic Example 📄 Template ( app.component.html ) <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)"> <label>Name: <input type="text" name="name" ngModel required /> </label> <br /> <label>Email: <input type="email" name="email" ngModel required /> </l...

Two-Way Data Binding in Angular Two-way data binding in Angular is a key concept that allows your UI (view) and your component (model) to stay in sync . It means when the user updates the input, the model gets updated automatically, and vice versa. 🔁 What is Two-Way Data Binding? Two-way data binding connects a form input element to a component variable both ways : Component → Template (displaying the value) Template → Component (updating the value) ✅ Syntax <input [(ngModel)]="username" /> The [(ngModel)] is shorthand for combining: <input [ngModel]="username" (ngModelChange)="username = $event" /> 📦 Prerequisite You must import FormsModule in your module to use ngModel . import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] }) export class AppModule { } ✏️ Example Component (app.component.ts) export class AppComponent { username: string = 'AngularD...

Custom Pipes in Angular Let's look at how to create custom pipes in Angular — a powerful way to transform data your way when built-in pipes don't cut it. 🔧 When to Create a Custom Pipe? Use a custom pipe when: You want reusable transformations. Built-in pipes don't cover your use case. You want clean templates (instead of complex method calls). ✅ Steps to Create a Custom Pipe 1. Generate a Pipe Use Angular CLI: ng generate pipe myCustom This creates two files: my-custom.pipe.ts my-custom.pipe.spec.ts (for testing) 2. Basic Pipe Example: Reverse a String import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } } 3. Use in Template <p>{{ 'angular' | reverse }}</p> <!-- ralu gna --> 4. Using Pipe wi...

Built-in Pipes in Angular Let's dive into Built-in Pipes in Angular — a super handy way to format data directly in your templates. Pipes transform your data's display without changing the actual value. 🛠 What is a Pipe? A Pipe takes in data as input and transforms it to a desired format. You use pipes with the | (pipe) character in templates. ✅ Common Built-in Pipes Pipe Description Example uppercase Transforms text to all uppercase 'hello' | uppercase → HELLO lowercase Transforms text to all lowercase 'HELLO' | lowercase → hello titlecase Capitalizes first letter of each word 'angular pipe' | titlecase → Angular Pipe date Formats a date today | date:'fullDate' currency Formats number as currency 123.45 | currency:'EUR' → €123...

Custom Directives in Angular Let's explore Custom Directives in Angular — one of the most powerful features when you want to encapsulate and reuse behavior across components! 🧱 What is a Custom Directive? A custom directive is a class with the @Directive() decorator that allows you to attach custom behavior to elements in the DOM. ✨ Types of Custom Directives Attribute Directive – changes appearance/behavior of elements ( highlight , auto-focus , etc.) Structural Directive – changes the DOM layout ( *ngIf , *ngFor , etc.) 🛠️ Create a Custom Attribute Directive Example Let's create a directive that highlights text when hovered. Step 1: Generate Directive ng generate directive highlight Step 2: Modify the Directive Code // highlight.directive.ts import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private ...