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

```bash
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

```bash
ng g c header
```

### Generate a Service

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

```html
<app-root></app-root>
```

---

#### `main.ts`

Bootstraps the application.

```ts
bootstrapApplication(AppComponent);
```

---

#### `app.component.ts` (Standalone Component)

```ts
@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)

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

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

---

### Modern (Angular 17+ Control Flow)

```html
@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.

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

Add to `styles.css`:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

---

## 7\. Data Binding in Angular

### Interpolation

```html
<h1>{{ title }}</h1>
```

---

### Property Binding

```html
<img [src]="imageUrl">
```

---

### Event Binding

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

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

---

### Two-Way Binding

```html
<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

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

#### Old Syntax

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

---

### Conditional Rendering with `@if`

#### Modern Syntax

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

#### Old Syntax

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

---

### Switching with `@switch`

#### Modern Syntax

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

#### Old Syntax

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

---

## 9\. Attribute Directives

Attribute directives remain unchanged.

### `ngClass`

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

---

### `ngStyle`

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

---

## 10\. Custom Directives

```html
<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

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

---

### String Pipes

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

---

### Currency Pipe

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

---

### KeyValue Pipe with `@for`

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

---

### Custom Pipe Example

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

---