3

I am creating my website in angular 5

I have homepage, stores and categories as pages in my site

Initially I decided to keep header and footer as global across the website.

I mean to create a header and footer components and use them as directives

<app-header></app-header>
<app-homepage></app-homepage>
<app-header></app-header>

<app-header></app-header>
<app-stores></app-stores>
<app-header></app-header>

<app-header></app-header>
<app-categories></app-categories>
<app-header></app-header>

I am trying to use the meta information of the page, like page title, meta-keywords from my database.

For the homepage it is possible.

For stores and categories I am little confused how can I use the page title, meta-keywords.

For example:

`<html>
<title>{{ homepage.title }}</title>
<meta keywords = {{ homepage.meta_keywords }}>
</html>`

The above is possible for homepage.

But for Stores and Categories it will change according to page.

Need a solution on how I can change the title and meta keywords according to page

Like for stores :

`<html>
<title>{{ storepage.title }}</title>
<meta keywords = {{ storepage.meta_keywords }}>
</html>`
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Kamlesh Katpara
  • 373
  • 2
  • 8
  • 31
  • Use `EvenetEmitter` from your page component ... or use a shared service to emit a Subject/BehaviorSubject ... – FAISAL Feb 10 '18 at 18:00
  • @Faisal, can you please share a demo or a plunkr for better understanding. Its not events, just want to make the page title dynamic based of page keeping header globar across the site. – Kamlesh Katpara Feb 10 '18 at 18:26
  • In Angular 5 you have something like Meta and Title services. You can use them to set meta and title on page. Why you look for something tricky? – kris_IV Feb 10 '18 at 18:41
  • Have a look here how its done using a shared service: https://stackoverflow.com/a/46049546/1791913 – FAISAL Feb 10 '18 at 18:53

2 Answers2

1

You should use Angular 5 Title & Meta services. It's out of the box in Angular 5 so you can:

constructor(private meta: Meta,
            private title: Title) {
}

ngOnInit() {
     this.title.setTitle(pageTitle);
     this.meta.updateTag({property: 'og:description', content: pageDescription});
     this.meta.updateTag({property: 'twitter:card', content: 'summary'});
      ......
}
kris_IV
  • 2,396
  • 21
  • 42
  • I tried implementing your solution, I am able to see the title change on browser and even when I try to inspect the page its visible. But when I try to view source the title is empty – Kamlesh Katpara Feb 10 '18 at 20:47
  • 1
    Of course. Angular 5 is front end technology so it need browser to render all things. Angular has also option to server side rendering but you should implement this. Look for Angular Universal. This work with NodeJs on server side. If you use Title and Meta services it work OK with Universal. – kris_IV Feb 10 '18 at 20:52
  • If you start with Angular 5 and it is you first attempt to Universal look hire to: https://coursetro.com/posts/code/68/Make-your-Angular-App-SEO-Friendly-(Angular-4-+-Universal) If you has any question for that - feel free to ask – kris_IV Feb 11 '18 at 16:16
0

This is what I found working :

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Kamlesh Katpara
  • 373
  • 2
  • 8
  • 31