Building a Full-stack Application Using the MEAN Stack/

...

/

Fetching Courses Created from the Database

Fetching Courses Created from the Database

Learn to fetch data from the database.

We'll cover the following...

In this lesson, we’ll display all the courses created and saved into the database on the client-side of our application. To do that, we need to take the following steps:

Step 1: Consuming the REST API

To consume the REST API to show a list of created courses, we head to the course-list directory and open the course-list.component.ts file. Next, we integrate the code below:

Press + to interact
import { Component, OnInit } from '@angular/core';
import { CourseService } from 'src/app/services/course.service';
@Component({
  selector: 'app-course-list',
  templateUrl: './course-list.component.html',
  styleUrls: ['./course-list.component.css'],
})
export class CourseListComponent implements OnInit {
  courses: any;
  constructor(private courseService: CourseService) {}
  ngOnInit() {
    this.fetchCourses();
  }
  fetchCourses() {
    this.courseService.getCourses().subscribe(
      (data) => {
        this.courses = data;
        console.log(this.courses);
      },
      (error) => {
        console.log(error);
      }
    );
  }
}

Below is a summary of the above ...