Angular · Theory

First App

Theory

5/43

First App

First app: a marks page. One component lists two students. Click Fail filter. The list shrinks. That proves binding + *ngFor + *ngIf. You don’t need a backend yet. Hard-code an array.

Then add a route /marks. Then a service that holds the array. That is a first app a viva panel believes. A blank CLI hello-world with the default Angular logo is not a first app.

Trap — wiring HttpClient before the array version works. If local data fails, the API will fail louder.

Exam tip

Two students + filter. Then route. Then service.

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;
  }
}

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

Short notes

DefTiny marks list — array, *ngFor, click filter.
RuleHard-code data before HTTP.
TrapAPI first, UI later.

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; } }

First App

Example

Short notes

Questions

First App

Example

Short notes

Questions