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

You can watch video on Service and Http Client, Blog Listing and Featured Blog - Angular 6 / Angular 7


Service Http Client Set Document Title Page Title API CodeIgniter MySQL

Please click below YouTube button for subscribe my channel RSGiTECH for latest videos.

Angular Project Login - username: admin and password: admin


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.

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

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


Please leave comments

4 Comments

truecodex launched free android app. You can download and install truecodex app on your mobile and get notification of the latest post.

Video Tutorials on YouTube