This post continues on from Angular CRUD 1: in-memory-web-api installation and configuration with the focus on the R in CRUD operations: Read.

Displaying the Villains

To display the contents of the in-memory-database a new component will be created. This will use the getVillains method from the HttpClientVillainService to return a array of villains that can be displayed by the components template.

Styling

I have used Bootstrap 4 for styling. You don’t have to and the examples will work fine without it but if you would like to use it and are unsure how to add Bootstrap to your Angular project have a look at my earlier post.

Create a new component:

ng g c components/list-villains

Change list-villains.components.ts to

import { Component, OnInit } from '@angular/core';
import { HttpClientVillainService } from 'src/app/services/http-client-villain.service';
import { Villain } from 'src/app/classes/villain';

@Component({
  selector: 'app-list-villains',
  templateUrl: './list-villains.component.html',
  styleUrls: ['./list-villains.component.css']
})
export class ListVillainsComponent implements OnInit {

  villains: Villain[] = [];

  constructor(private villainService: HttpClientVillainService) { }

  ngOnInit() {
    this.getVillains();
  }

  getVillains() {
    this.villainService.getVillains().subscribe(data => { 
      this.villains = data;
    });    
  }
}

The HttpClientVillainService is injected into the component via the constructor.A getVillains method is then created which subscribes to the villainService method of the same name. The local getVillains method is called from ngOnInit() because we want the list of villains to be displayed when this component is invoked.

The results are assigned to an array of Villain objects which can then be accessed by the template.

Change list-villains.component.html to

<div class="container">
    <table class="table table-dark">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Episode</th>
            </tr>
        </thead>
        <tbody *ngFor="let villain of villains">
            <tr>
                <th scope="row">{{ villain.id }}</th>
                <td>{{ villain.name }}</td>
                <td>{{ villain.episode }}</td>
            </tr>
        </tbody>
    </table>
</div>

The array of villains is presented to the user using a ngFor to iterate through the array of villains and placing the output in rows within a table. The table has been styled using Bootstrap.

Register the HttpClientVillainService with app.module.ts

...
providers: [HttpClientVillainService],
...

The final change is to register the HttpClientVillainService with app.module.ts by making the change shown above.

If you run the application now you should see the list of villains displayed.

Show me the codez

Certainly. It is up on GitHub.

What’s next?

The C in CRUD, Create, will be the subject of the next post.