Learn Angular Crash Course 2021
Fetch data
terminal:
ng generate service service/task
app.module.ts
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...
imports: [BrowserModule, FontAwesomeModule, HttpClientModule],
....
})
task.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Task } from '../Task';
@Injectable({
providedIn: 'root',
})
export class TaskService {
private apiUrl = 'http://localhost:5000/tasks';
constructor(private http: HttpClient) {}
getTasks(): Observable<Task[]> {
return this.http.get<Task[]>(this.apiUrl);
}
task.component.ts:
import { Component, OnInit } from '@angular/core';
import { Task } from '../../Task';
import { TaskService } from '../../services/task.service';
...
export class TasksComponent implements OnInit {
tasks: Task[] = [];
constructor(private taskService: TaskService) {}
ngOnInit(): void {
this.taskService.getTasks().subscribe((tasks) => (this.tasks = tasks));
}
}