Service and Http Client, Blog Listing and Featured Blog - Angular 6 / Angular 7

Posted at: December 15, 2018 5:05 PM

Create a Blogpost class

Create a Blogpost class in its own file in the src/app/blogpost folder.

Define field in blogpost class

Edit Root AppModule

Before you can use the HttpClient, you need to import the Angular HttpClientModule in the root AppModule.

import Title service in the root AppModule for set document title

Edit file src/app/app.module.ts

Blogpost Service and Http Client

Edit service file src/app/blogpost/blogpost.service.ts

Import Blogpost Class for typed data

Import HttpClient and HttpErrorResponse for get and post response from server and handle http error response

Import throwError from rxjs liabray

Import catchError from rxjs/operators

Define server url and create methods getBlogs and getFeaturedBlogs

Create handleError private method for handle http error response.

Import Service in blogpost-list.component.ts

Edit component file src/app/blogpost/blogpost-list/blogpost-list.component.ts

Import BlogpostService service.

Import Blogpost for typed data.

Import Title service for set document title.

Get blog list by subsribe getBlogs() method.

HTML of Bloglist

Edit file src/app/blogpost/blogpost-list/blogpost-list.component.html for show dynamic data.

And show error if http error response will come.

Dynamic featured blog on home page

Edit component file src/app/blogpost/blogpost-featured/blogpost-featured.component.ts

Import BlogpostService service.

Import Blogpost for typed data.

HTML of Featured Blogs

Edit file src/app/blogpost/blogpost-featured/blogpost-featured.component.html for show dynamic data.

And show error if http error response will come.

Create API in CodeIgniter

Controller file Api.php

Model file Api_model.php

Database - MySQL

This lesson also available on YouTube
Service Http Client Set Document Title Page Title API CodeIgniter MySQL

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications.

truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

10 Comments