Search⌘ K
AI Features
Home
Courses
Building a Full-stack Application Using the MEAN Stack

Fetching Courses Created from the Database

Explore how to fetch courses stored in a database and display them in your Angular app by consuming REST APIs. Understand how to use Angular's *ngFor directive to loop through data and apply conditional styling based on course status.

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:

TypeScript 3.3.4
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 code: We start by importing CourseService in line 2.

  1. Next, we create a variable called courses in line 10.
  2. In line 12, we inject the course service inside the constructor.
  3. In line 18 we create a function called fetchCourses(). Inside the fetchCourses() function in line 19 we instantiate courseService and call the getCourses() method that holds the logic for getting courses from our database. We proceed to subscribe to the data returned from the getCourses() method.
  4. Next, in line 21, we reference the courses variable we created earlier in line 10 and append the data from our REST API to the courses variable.
  5. In the event of an error, we make provision for that in line 24 by creating an error handler.

Step 2: Displaying fetched data in the template

Here, we display the data fetched from the database in the template. We need to loop through the data using the *ngFor directive. We can see how this is implemented in the code below:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
  "recommendations": ["angular.ng-template"]
}
Displaying data in the template

Below is a summary of the code in the widget above:

  1. To display the data from the database in the table, we use the *ngFor directive inside the tr tag in line 20. The *ngFor directive allows us to repeat a section of the HTML template from a collection by looping through the data. Within the *ngFor directive, we create a variable called course that holds the data from the courses variable we created in the course-list.component.ts file.
  2. Next in line 21, we display the name field in our database through interpolation.
  3. In line 23, we use conditional styling using the [ngStyle] attribute to state that if the course status from the database is set to complete, the test color should be green. On the other hand, if the course status is set to pending, the text color should be red.
  4. Next, in line 24, line 27, and line 30, we display the data retrieved from the database through interpolation.

We can test the steps we’ve implemented so far by compiling the code widget, creating a new course on the dashboard, and seeing if it displays on the Course List page.