Angular for Beginners – Full Tutorial

Introduction

Angular is a powerful TypeScript-based framework for building dynamic single-page applications (SPAs). This tutorial covers Angular fundamentals, components, modules, and a mini project example.

---

Step 1: Setting Up Angular

Install Angular CLI and create a new project:

```bash npm install -g @angular/cli ng new my-angular-app cd my-angular-app ng serve ```

---

Step 2: Understanding Angular Components

Angular apps are structured with components.

Example: Basic Component ```ts import { Component } from '@angular/core';

@Component({ selector: 'app-root', template: '<h1>Hello, {{ name }}!</h1>' }) export class AppComponent { name = 'Angular Learner'; } ```

---

Step 3: Data Binding

Angular supports interpolation, property binding, and two-way binding:

```html <input [(ngModel)]="message" placeholder="Type something"/>

<p>You typed: {{ message }}</p> \`\`\`

```ts import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { message: string = ''; } ```

---

Step 4: Handling Events

Bind events using `(event)` syntax:

```html <button (click)="greet()">Click Me</button> ```

```ts greet() { alert('Hello Angular!'); } ```

---

Step 5: Structural Directives

Angular provides directives for conditional rendering and loops:

```html

<ul> <li *ngFor="let item of items">{{ item }}</li> </ul> <p *ngIf="items.length === 0">No items available.</p> \`\`\`

```ts items = ['Apple', 'Banana', 'Cherry']; ```

---

Step 6: Mini Project Example – To-Do List

Create a simple task list:

```html <input [(ngModel)]="task" placeholder="Add a task" /> <button (click)="addTask()">Add</button>

<ul> <li *ngFor="let t of tasks">{{ t }}</li> </ul> \`\`\`

```ts task: string = ''; tasks: string[] = [];

addTask() { if(this.task) this.tasks.push(this.task); this.task = ''; } ```

---

Step 7: Next Steps

• Learn Angular Router for navigation
• Explore Services and Dependency Injection
• Learn Reactive Forms and State Management

---

Conclusion

By following this tutorial, you'll gain a solid foundation in Angular, enabling you to build dynamic SPAs and scale your applications.

---

SEO Suggestions:

• Main keywords: Angular tutorial, Angular for beginners, Angular components guide, learn Angular step-by-step, Angular mini project
• Meta description: Beginner-friendly Angular tutorial covering components, data binding, event handling, and a mini project. Step-by-step guide for 2025.
• Catchy title suggestions: "Angular for Beginners – Full Tutorial 2025", "Learn Angular Step by Step: Beginner-Friendly Guide"