Menu Home

Angular CRUD 2: Read

A list of villains

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.

Categories: Angular

oraclefrontovik

Developer

1 reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.