Service and Http Client for Create Static Pages - Angular 6 / Angular 7

Posted at: December 15, 2018 5:25 PM

Create a Page Class

Create a Page class in its own file in the src/app/cmspage folder.

Define field in page class

Cmspage Service and Http Client

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

Import Page Class for typed data

Create method getPage for showing page.

Import Service in page.component.ts

Edit component file src/app/cmspage/page/page.component.ts

Import ActivatedRoute, ParamMap from router

Import CmspageService service.

Import Page for typed data.

Import switchMap from rxjs/operators

Get blog by subsribe getBlog() method.

HTML of Page

Edit file src/app/cmspage/page/page.component.html for show dynamic data.

Edit header.component.ts

Edit file src/app/header/header.component.ts for set page title on click on menu item.

Create method of setPageTitle for set title.

Import Title from platform-browser.

Edit header.component.html

Edit file src/app/header/header.component.html and call setPageTitle method on click event binding of menu items.

This lesson also available on YouTube
Http Client Get Request Post Request Web API CodeIgniter Activated Route Switch Map

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

2 Comments