Angular DFD: Data Flow Diagram from Level 0 to Infinity

Lesson Goal

This lesson teaches DFD for Angular. Here DFD means both:

1. Level 0 Meaning

A DFD shows where data comes from, where it goes, where it is processed, and where it is stored.

Example

Suppose a student clicks a button called Load Courses. What happens?

1. User clicks the button.
2. Angular component receives the click event.
3. Component calls a service.
4. Service calls an API.
5. API sends course data.
6. Component receives data.
7. HTML template displays courses.

CopyUser Click
  ↓
Component Method
  ↓
Service Method
  ↓
API Call
  ↓
Response Data
  ↓
Component Property
  ↓
HTML Template

2. Why DFD Is Important in Angular

Angular apps can become confusing when components, services, forms, routes, API calls, and state management are mixed without planning.

3. DFD Symbols for Angular

Traditional DFD has external entities, processes, data stores, and data flows. For Angular, we can map them to real Angular parts.

4. Context Diagram: Angular App as One System

A context diagram is the highest-level DFD. It shows the Angular app as one box.

5. Level 1 DFD: Break Angular App into Parts

Level 1 DFD opens the Angular app box and shows its main internal parts.

6. Angular Internal Data Flow

This is the basic Angular internal flow.

CopyHTML Template
  ↓ user event
Component Class
  ↓ calls
Service
  ↓ calls
API
  ↓ returns
Service
  ↓ returns
Component Class
  ↓ binding
HTML Template

Example: Button Click to Data Display

Component HTML

Copy<button (click)="loadCourses()">Load Courses</button>

<ul>
  @for (course of courses; track course.id) {
    <li>{{ course.title }}</li>
  }
</ul>

Component TypeScript

Copyimport { Component } from '@angular/core';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.html',
  styleUrl: './courses.css'
})
export class Courses {
  courses = [
    { id: 1, title: 'Angular Level 0' },
    { id: 2, title: 'Angular Components' },
    { id: 3, title: 'Angular Services' }
  ];

  loadCourses() {
    console.log('Courses loaded');
  }
}

7. Component Data Flow

In Angular, a component has two main sides:

Four Important Binding Types

8. Parent to Child and Child to Parent Data Flow

Angular components often communicate with each other.

Parent HTML

Copy<app-student-card
  [student]="selectedStudent"
  (removeStudent)="onRemoveStudent($event)">
</app-student-card>

Child TypeScript

Copyimport { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-student-card',
  templateUrl: './student-card.html',
  styleUrl: './student-card.css'
})
export class StudentCard {
  @Input() student: any;

  @Output() removeStudent = new EventEmitter();

  remove() {
    this.removeStudent.emit(this.student.id);
  }
}

9. Form Data Flow

Form data flow is very important in Angular because users enter data through forms.

CopyUser types in form
  ↓
Form control receives value
  ↓
Component validates data
  ↓
Component calls service
  ↓
Service sends data to API
  ↓
API stores data
  ↓
Success message appears

Reactive Form Example

Copyimport { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-student-form',
  imports: [ReactiveFormsModule],
  templateUrl: './student-form.html'
})
export class StudentForm {
  studentForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

  submitForm() {
    console.log(this.studentForm.value);
  }
}

Form HTML

Copy<form [formGroup]="studentForm" (ngSubmit)="submitForm()">
  <input formControlName="name" placeholder="Student name" />
  <input formControlName="email" placeholder="Email" />

  <button type="submit">Save Student</button>
</form>

10. Routing Data Flow

Routing data flow means how the URL decides which Angular page should be shown.

CopyBrowser URL
  ↓
Angular Router
  ↓
Route Match
  ↓
Page Component
  ↓
Template Display

Route Example

Copyimport { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./pages/home/home').then(m => m.Home)
  },
  {
    path: 'courses',
    loadComponent: () =>
      import('./pages/courses/courses').then(m => m.Courses)
  }
];

Router Outlet

Copy<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

11. API Data Flow

Most real Angular apps get data from APIs. The service should handle API calls.

Service Example

Copyimport { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CourseService {
  private apiUrl = 'https://example.com/api/courses';

  constructor(private http: HttpClient) {}

  getCourses() {
    return this.http.get(this.apiUrl);
  }
}

Component Example

Copyimport { Component } from '@angular/core';
import { CourseService } from './course.service';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.html'
})
export class Courses {
  courses: any[] = [];

  constructor(private courseService: CourseService) {}

  loadCourses() {
    this.courseService.getCourses().subscribe((data: any) => {
      this.courses = data;
    });
  }
}

12. Service Layer Data Flow

Services are used to keep components clean. A component should focus on UI. A service should focus on data and business logic.

Clean Service Pattern

CopyComponent asks:
  "Please give me courses."

Service decides:
  "I know where courses come from."

API responds:
  "Here is the course data."

Component says:
  "I will display it."

13. State Management Data Flow

State means data that the app remembers while running.

Simple State Example

Copyexport class Counter {
  count = 0;

  increase() {
    this.count++;
  }
}

Shared State with Service

Copyimport { Injectable, signal } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppStateService {
  userName = signal('Guest');

  setUserName(name: string) {
    this.userName.set(name);
  }
}

14. Authentication DFD

Authentication data flow is used when a user logs in.

CopyLogin Form
  ↓ email and password
Auth Component
  ↓
Auth Service
  ↓
Login API
  ↓ token
Auth Service
  ↓ save token
Local Storage / State
  ↓
Router redirects to Dashboard

Auth Service Sketch

Copyimport { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  login(email: string, password: string) {
    // call API here
  }

  saveToken(token: string) {
    localStorage.setItem('token', token);
  }

  getToken() {
    return localStorage.getItem('token');
  }

  logout() {
    localStorage.removeItem('token');
  }
}

15. CRUD DFD

CRUD means Create, Read, Update, Delete. Most admin dashboards use CRUD.

CRUD Service Skeleton

Copyexport class StudentService {
  getStudents() {
    // GET /students
  }

  getStudentById(id: number) {
    // GET /students/:id
  }

  createStudent(student: any) {
    // POST /students
  }

  updateStudent(id: number, student: any) {
    // PUT /students/:id
  }

  deleteStudent(id: number) {
    // DELETE /students/:id
  }
}

16. DFD to Angular Folder Map

A good DFD helps decide folder structure.

Copysrc/app/
├── core/
│   ├── auth/
│   ├── interceptors/
│   └── services/
│
├── shared/
│   ├── components/
│   ├── pipes/
│   └── directives/
│
├── features/
│   ├── students/
│   │   ├── pages/
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   └── students.routes.ts
│   │
│   └── courses/
│       ├── pages/
│       ├── components/
│       ├── services/
│       ├── models/
│       └── courses.routes.ts
│
├── app.config.ts
├── app.routes.ts
└── app.ts

17. Expert-Level Angular DFD

Expert Angular DFD includes feature modules, lazy routes, guards, interceptors, state management, API boundaries, caching, error handling, and deployment.

Expert Checklist

18. Common DFD Mistakes

19. Student Assignment

Design a DFD for a Student Dashboard Angular app.

App Features

Required DFDs

Expected Folder Structure

Copysrc/app/
├── core/
│   ├── auth/
│   │   ├── auth.service.ts
│   │   └── auth.guard.ts
│   └── interceptors/
│
├── shared/
│   └── components/
│       ├── header/
│       └── footer/
│
├── features/
│   ├── dashboard/
│   └── students/
│       ├── pages/
│       ├── components/
│       ├── services/
│       └── models/
│
├── app.routes.ts
├── app.config.ts
└── app.ts

Final Summary