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.
This lesson also available on YouTube
More Posts - Angular Project Training
- Project Overview and Setup
- Bootstrap Integration
- Project Structure and Create Modules and Components
- Theme Integration and Create Home Page
- Create Routing, Navigation and Inner Page
- Service and Http Client, Blog Listing and Featured Blog
- Service and Http Client for Blog Detail, Recent Blog and Categories
- Service and Http Client for Create Static Pages
- Create Contact Form and Send Data on Email
- Login and Logout using Web API with Token Based Authentication
- CRUD #1 Admin can View Blog List
- CRUD #2 Create, Edit, and Delete Blog with File Upload
- Set HTTP Base URLs of Production and Development Environment
- Angular Project Deployment on Live Server
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.
Please leave comments
8 Comments
