Angular Listing Example

June 9, 2019

In this post, we are going to create a basic Angular app that will retrieve records from a remote url, and displays them on a listing:

  • To retrieve the records we create a service that uses a http client to connect to the url.
  • To display the records we create a component which will call the service.

The remote url we are using on this example, returns a list of some well known quotes, in json format.
You can view the json data, by opening the remote url, here.


We start by creating our app, which we are naming angular-quotes, with the following command on a terminal windows.
The command will create the folder "angular-quotes"


ng new angular-quotes


Model Class

We proceed to create a model class which will hold the records data.

Open the folder angular-quotes/src/app, and create a file named quote.ts with the text editor of your preference.


cd angular-quotes/src/app
vim quote.ts

Update the quote.ts file with the following content:

src/app/quote.ts


export class Quote {
    id: number;
    author: string;
    content: string;
}

Angular Service

Now, we are going to create the service with the following command.


ng generate service quote

Then update the generated quote.service.ts file with the content below.
We have imported the Quote class, as well as the Observable, of, HttpClient, HttpHeaders, catchError, map, and tap functionality.

src/app/quote.service.ts


import { Injectable } from '@angular/core';

import { Quote } from './quote';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class QuoteService {

  private quotesUrl = 'https://raw.githubusercontent.com/davescripts/test-data/master/quotes.json';

  constructor(private http: HttpClient) { }

  getQuotes(): Observable<Quote[]> {
    return this.http.get<Quote[]>(this.quotesUrl)
      .pipe(
        catchError(this.handleError<Quote[]>('getQuotes', []))
      );
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    };
  }

}

On the service file we have defined the quotesUrl variable, which contains the url from where we will be retrieving the records for our app.

We also defined the getQuotes method that uses the http functionality to connect to that url.


Angular Component

Create the quotes component with the following command


ng generate component quotes

And update the content of the following two files: quotes/quotes.component.ts, and quotes/quotes.component.html.


src/app/quotes/quotes.component.ts


import { Component, OnInit } from '@angular/core';

import { Quote } from '../quote';
import { QuoteService } from '../quote.service';

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

  quotes: Quote[];

  constructor(private quoteService: QuoteService) { }

  getQuotes(): void {
    this.quoteService.getQuotes()
      .subscribe(quotes => this.quotes = quotes);
  }

  ngOnInit() {
    this.getQuotes();
  }

}

src/app/quotes/quotes.component.html


<h2>Quotes</h2>

<table>
   <tr *ngFor="let quote of quotes">
     <td>
       <div [innerHTML]="quote.content"></div>
       <div><em><strong>{{quote.author}}</strong></em></div>
       <br/>
     </td>
  </tr>
</table>
<br/>
 
<div><em>Quotes retrieved with <a href="https://angular.io" target="_blank">Angular</a></em></div>

Angular Main Module

Update Angular main module file, app.module.ts, to include our Quotes component, and the HttpClient functionality.

src/app/app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';                        

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { QuotesComponent } from './quotes/quotes.component';

@NgModule({
  declarations: [
    AppComponent,
    QuotesComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular Main Component Html

Replace the content of Angular main component html file, app.component.html, with the following text.

src/app/app.component.html


<app-quotes></app-quotes>

Open the App

Now we can open the app with the ng serve command.


ng serve --open

The app will be open on the browser at the http://localhost:4000 location.




Check this app on Github here.

See a live demo here.

See this app on StackBlitz here.