Angular · Theory

Overview

Theory

2/43

Overview

Overview in one picture: modules or standalone components, templates, data binding, services, router. You don’t need all of them on day one. Start: one component, one template, one click.

Compiler turns templates into JS the browser can run. Change detection walks the tree after events and updates the DOM. That is why (click) feels instant.

Meera’s campus app: login route, marks route, MarksService shared. Overview viva = name those four pieces, not a feature list from the marketing site.

Trap: reciting Ivy, signals, hydration in the first minute. Say the skeleton first. Advanced words come after a working StudentCard.

Diagram

  AppComponent
     │
     ├── StudentCard
     └── MarksTable
  data change → template updates

Exam tip

Four pieces: component, template, service, router.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Overview: toggle open. Say whether the panel is on screen after one click.

Short notes

DefComponent tree + templates + services + router.
RuleLearn binding before NgRx.
RememberChange detection updates the DOM after events.
TrapFeature-dump with no StudentCard.

Angular · Theory

Overview

← All stacks

Theory

2/43

Overview

Overview in one picture: modules or standalone components, templates, data binding, services, router. You don’t need all of them on day one. Start: one component, one template, one click.

Compiler turns templates into JS the browser can run. Change detection walks the tree after events and updates the DOM. That is why (click) feels instant.

Meera’s campus app: login route, marks route, MarksService shared. Overview viva = name those four pieces, not a feature list from the marketing site.

Trap: reciting Ivy, signals, hydration in the first minute. Say the skeleton first. Advanced words come after a working StudentCard.

Diagram

  AppComponent
     │
     ├── StudentCard
     └── MarksTable
  data change → template updates

Exam tip

Four pieces: component, template, service, router.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Overview: toggle open. Say whether the panel is on screen after one click.

Short notes

DefComponent tree + templates + services + router.
RuleLearn binding before NgRx.
RememberChange detection updates the DOM after events.
TrapFeature-dump with no StudentCard.

Overview

Example

Short notes

Questions

Overview

Example

Short notes

Questions