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:
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
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;
}
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.
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>
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 { }
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>
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.