Angular · Theory

HTTP Client

Theory

18/43

HTTP Client

HttpClient does AJAX. this.http.get<Student[]>('/api/marks').subscribe(rows => this.students = rows). provideHttpClient() in app config (or HttpClientModule on older apps).

Always handle error: catchError → user message. Don’t leave subscribe(err) empty. Unsubscribe or use async pipe / takeUntilDestroyed so you don’t setState after destroy.

Trap: putting the URL string in ten components. Keep it in the service. Another trap: JSON.parse on an already-parsed body.

Exam tip

get in a service + error + no leak after destroy.

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

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

Short notes

DefHttpClient get/post. Live in a service.
RulecatchError + unsubscribe / async pipe.
TrapURL copy-paste + empty error handler.

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

HTTP Client

Example

Short notes

Questions

HTTP Client

Example

Short notes

Questions