Angular 4 - update title page by page

Question

In the index.html within the "src" folder, I wrote {{ title }} like as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

In product.components.ts, I defined the title as "Products" as follows, but it wont works.

export class ProductComponent implements OnInit {
  products: Product[] = [];
  dataInvalid = false;
  formErrors = [];
  formSubmitting = false;
  title = 'Products';

How can I change the title if users clicks on different pages?

you can read it here -> https://angular.io/guide/set-document-title — Bunyamin Coskuner, Mar 22 '18 at 12:35
Here is a quick tip. If the domain is `angular.io` it means angular 2+ — Bunyamin Coskuner, Mar 22 '18 at 12:36
index.html is not a template file for ProductComponent. It does not know what it is. — Roland Rácz, Mar 22 '18 at 12:40
I'm voting to close this question as off-topic because the documentation explains how : https://angular.io/guide/set-document-title — , Mar 22 '18 at 12:43
Possible duplicate of [How to change title of a page using angular(angular 2 or 4) route?](https://stackoverflow.com/questions/44000162/how-to-change-title-of-a-page-using-angularangular-2-or-4-route) — Radonirina Maminiaina, Mar 22 '18 at 12:52
@RadonirinaMaminiaina - I'm still strugling in this issue as I have not see the solution and still searching. Don't make it -1. — Niladri Banerjee - Uttarpara, Mar 22 '18 at 12:54

score 2 · Accepted Answer · answered Mar 22 '18 at 12:39

2

You have to inject Title from platform-browser in your component

import {Title} from "@angular/platform-browser";

constructor(private title: Title) {
            this.title.setTitle('Your title');
}

answered Mar 22 '18 at 12:39

HMarteau

654
4
18

1

You can put this in all your child components (your pages if you prefer: here it is product.component.ts) And each will update the title – HMarteau Mar 22 '18 at 12:56
I received the following error message during compilation: ERROR in src/app/product/product.component.ts(27,30): error TS2339: Property 'data' does not exist on type 'Product[]'. src/app/product/product.component.ts(28,34): error TS2339: Property 'page_title' does not exist on type 'Product[]'. – Niladri Banerjee - Uttarpara Mar 27 '18 at 12:27

Shailesh Ladumor · Answer 2 · 2018-03-22T12:59:19.800

1

just add into the routing. so you no need inject title service in every component. for Ex

 path: ':path',
 component: ExampleComponent,
 data: {title:'title'}

edited Mar 22 '18 at 12:59

answered Mar 22 '18 at 12:41

Shailesh Ladumor

7,052
5
42
55

Radonirina Maminiaina · Answer 3 · 2018-03-22T12:47:50.093

Now you can set the title tag and meta tag with anglar. Just use the services provide into @angular/platform-browser Here we go ...

import { Title, Meta }     from '@angular/platform-browser';

@Component({
selector: 'app-root',
template:
  `My component
  `
})
export class YourComponent {
  public constructor(private titleService: Title, private meta: Meta ) {
     this.setTitle('My title');
     this.setDynamicTitle();
     this.setMetaTags()
  }

  public setTitle( newTitle: string) {
    // each component
    this.titleService.setTitle( newTitle ); 
  }
  public setDynamicTitle() {
     // via service
    this.yourService.get('api/url').subscribe((data) => {
       this.titleService.setTitle( data.title );  
    })
  }
  public setMetaTags() {
      this.meta.addTags([{
          name: 'description',
          content: 'Your description'
        }, {
          name: 'author',
          content: 'You'
        }
      ])
  }
}

Here another reference: How to change title of a page using angular(angular 2 or 4) route?

Angular 4 - update title page by page

3 Answers3