Angular Basics for Beginners

1. What Is Angular?

Angular is a front-end web application framework developed and maintained by Google. It is used to build Single Page Applications (SPAs)—applications that load once and dynamically update the UI without refreshing the page.

Angular is built on TypeScript and provides a powerful, opinionated structure for building scalable, maintainable web applications.

---

2. Essential Angular Commands

Angular applications are created and managed using the Angular CLI.

ng new project-name
ng serve
ng build
ng version
node -v
npm -v

Angular CLI helps you:

• Generate project structure

• Create components, services, and pipes

• Run, test, and build applications

---

3. Creating Components and Services

Generate a Component

ng g c header

Generate a Service

ng g s user

In modern Angular, generating modules is rarely required due to standalone components.

---

4. Angular Application Workflow

Core Files

index.html

Hosts the root Angular component.

<app-root></app-root>

---

main.ts

Bootstraps the application.

bootstrapApplication(AppComponent);

---

app.component.ts (Standalone Component)

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Angular Modern App';
}

---

5. Old vs Modern Angular Architecture

Old (Module-Based)

<li *ngFor="let item of items">{{ item }}</li>

<p *ngIf="isLoggedIn">Welcome</p>

---

Modern (Angular 17+ Control Flow)

@for (item of items; track item) {
  <li>{{ item }}</li>
}

@if (isLoggedIn) {
  <p>Welcome</p>
}

Advantages:

• Faster compilation

• Better type safety

• Cleaner templates

• Improved performance

---

6. Tailwind CSS with Angular (v17+)

Tailwind CSS v3 is fully supported.

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Add to styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

7. Data Binding in Angular

Interpolation

<h1>{{ title }}</h1>

---

Property Binding

<img [src]="imageUrl">

---

Event Binding

<button (click)="submit()">Submit</button>

submit() {
  console.log('Submitted');
}

---

Two-Way Binding

<input [(ngModel)]="name">
<p>Hello {{ name }}</p>

---

8. Modern Structural Directives (Control Flow)

Angular 17+ replaces structural directives with built-in control flow blocks.

---

Looping with @for

Modern Syntax

@for (movie of movies; track movie) {
  <li>{{ movie }}</li>
}

Old Syntax

<li *ngFor="let movie of movies">
  {{ movie }}
</li>

---

Conditional Rendering with @if

Modern Syntax

@if (isLoggedIn) {
  <p>Welcome User</p>
} @else {
  <p>Please Login</p>
}

Old Syntax

<p *ngIf="isLoggedIn">Welcome User</p>

---

Switching with @switch

Modern Syntax

@switch (role) {
  @case ('admin') {
    <p>Admin</p>
  }
  @case ('user') {
    <p>User</p>
  }
  @default {
    <p>Guest</p>
  }
}

Old Syntax

<div [ngSwitch]="role">
  <p *ngSwitchCase="'admin'">Admin</p>
</div>

---

9. Attribute Directives

Attribute directives remain unchanged.

ngClass

<p [ngClass]="{ active: isActive }">Active Text</p>

---

ngStyle

<p [ngStyle]="{ color: 'red', 'font-size': '40px' }">
  Angular
</p>

---

10. Custom Directives

<p [appHighlight]="'red'">
  Highlighted Text
</p>

Custom directives encapsulate reusable DOM behavior.

---

11. Pipes in Angular

Pipes work the same in modern Angular.

---

Date Pipe

<p>{{ today | date }}</p>
<p>{{ today | date:'medium' }}</p>

---

String Pipes

<p>{{ topic | uppercase }}</p>
<p>{{ topic | lowercase }}</p>
<p>{{ topic | slice:0:7 }}</p>

---

Currency Pipe

<p>{{ price | currency }}</p>
<p>{{ price | currency:'INR' }}</p>

---

KeyValue Pipe with @for

@for (item of person | keyvalue; track item.key) {
  <p>{{ item.key }} : {{ item.value }}</p>
}

---

Custom Pipe Example

<p>{{ 'Angular' | reverse }}</p>

---

12. Why Modern Angular Matters

Modern Angular (v17–v20) introduces:

• Standalone components by default

• Built-in control flow (@if, @for, @switch)

• Better performance and smaller bundles

• Cleaner templates with less boilerplate

These changes make Angular easier for beginners and more powerful for large applications.

---

Final Learning Path for Beginners

1. Components & Templates

2. Modern Control Flow (@if, @for)

3. Data Binding

4. Directives & Pipes

5. Services & Dependency Injection

6. Routing & Lazy Loading

Avoid legacy patterns unless maintaining older projects.

---