Angular – Quick Recap

Angular Quick Recap provides a concise, developer-friendly overview of Angular’s core concepts, designed for rapid revision or a quick refresher before coding, interviews, or project work. This guide covers:

• Core Architecture: Modules, Components, Services, and Dependency Injection
• Templates & Data Binding: Interpolation, property/event binding, two-way binding
• Directives & Pipes: Built-in and custom examples
• Component Communication: Parent → Child, Child → Parent, Sibling, and Nested interactions
• Routing & Navigation: Setting up routes and using <router-outlet>
• HTTP & Observables: Fetching and subscribing to data
• Lifecycle Hooks: From initialization to cleanup
• Modules & Structure: App, feature, and shared modules

This one-page cheat sheet is perfect for developers, students, and professionals who want a rapid, practical refresher of Angular without diving into full documentation.

1. Angular Core Concepts

• Framework: TypeScript-based, component-driven, SPA architecture.
• Building Blocks:
  • Modules (@NgModule) – Organize app into functional units.
  • Components (@Component) – Define UI + logic.
  • Templates – Contain HTML & Angular directives.
  • Services (@Injectable) – Handle data/business logic.
  • DI (Dependency Injection) – Provides service instances automatically.

2. Component Structure

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  title = 'Angular Recap';
  greet() { return `Hi, ${this.title}`; }
}

Template:

<h1>{{ title }}</h1>
<p>{{ greet() }}</p>

3. Data Binding Types

4. Directives

• Structural: *ngIf, *ngFor, *ngSwitch
• Attribute: [ngClass], [ngStyle]
• Custom Example: @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }

5. Component Communication

Parent → Child (Data Down)

Use @Input() in the child:

// child.component.ts
@Input() message!: string;

Use property binding in parent template:

<app-child [message]="parentMessage"></app-child>

Child → Parent (Event Up)

Use @Output() + EventEmitter in child:

@Output() notify = new EventEmitter<string>();
sendData() { this.notify.emit('Hello Parent!'); }

Listen in parent template:

<app-child (notify)="receiveMessage($event)"></app-child>

Sibling ↔ Sibling (Adjacent Components)

Use a shared service with RxJS Subject or BehaviorSubject:

@Injectable({ providedIn: 'root' })
export class MessageService {
  private messageSource = new Subject<string>();
  message$ = this.messageSource.asObservable();

  sendMessage(msg: string) {
    this.messageSource.next(msg);
  }
}

Sibling A:

constructor(private msgService: MessageService) {}
send() { this.msgService.sendMessage('Hi from A'); }

Sibling B:

constructor(private msgService: MessageService) {}
ngOnInit() {
  this.msgService.message$.subscribe(msg => this.received = msg);
}

Nested (Child → Grandparent)

You can bubble up events:

• Child emits to Parent
• Parent catches and re-emits upward

Or use a shared service if deeply nested.

6. Routing

app-routing.module.ts

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: 'home' }
];

Use:

<a routerLink="/home">Home</a>
<router-outlet></router-outlet>

7. HTTP & Observables

Service:

constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
  return this.http.get<User[]>('https://api.example.com/users');
}

Component:

this.service.getUsers().subscribe(data => this.users = data);

8. Pipes

Built-in: date, uppercase, currency, async
Custom:

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string) { return value.split('').reverse().join(''); }
}

9. Lifecycle Hooks

10. Modules

• AppModule → Root module.
• Feature Modules → For domain grouping.
• Shared Modules → For reusable components, directives, and pipes.