Service and Http Client for Blog Detail, Recent Blog and Categories - Angular 6 / Angular 7

Posted at: December 15, 2018 5:18 PM

Create a Category Class

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

Define field in category class

Edit Blogpost Service and Http Client

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

Import Category Class for typed data

Create method getBlog, getRecentBlogs and getCategories for showing blog detail, recent blogs and categories on blog detail page.

Change Link in Bloglist and Featured Blog

Edit file src/app/blogpost/blogpost-list/blogpost-list.component.html for button Read more..

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

Import Service in blogpost-detail.component.ts

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

Import Router, ActivatedRoute, ParamMap from router

Import BlogpostService service.

Import Blogpost for typed data.

Import Title service for set document title.

Import Observable from rxjs

Import switchMap from rxjs/operators

Get blog by subsribe getBlog() method.

HTML of Blog Detail

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

Import Service in blogpost-recent.component.ts

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

Import BlogpostService service.

Import Blogpost for typed data.

HTML of Recent Blog

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

Import Service in categories.component.ts

Edit component file src/app/blogpost/categories/categories.component.ts

Import BlogpostService service.

Import Category for typed data.

HTML of Categories

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

You can watch video on Service and Http Client for Blog Detail, Recent Blog and Categories - Angular 6 / Angular 7

Service Http Client Set Document Title Page Title API CodeIgniter MySQL

Please click below YouTube button for subscribe my channel truecodex 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. provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7. will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Please leave comments

Speed Up Your Magento Store by 300%

Angular Templates

React Templates

Magento 2 Templates

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