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?

Here is a quick tip. If the domain is angular.io it means angular 2+ — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Mar 22, 2018 at 12:36
index.html is not a template file for ProductComponent. It does not know what it is. — Roland Rácz
– Roland Rácz, Commented Mar 22, 2018 at 12:40
I'm voting to close this question as off-topic because the documentation explains how : angular.io/guide/set-document-title — user4676340
– user4676340, Commented Mar 22, 2018 at 12:43

HMarteau · Accepted Answer · 2018-03-22 12:39:09Z

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, 2018 at 12:39

HMarteau

6545 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HMarteau Over a year ago

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

Niladri Banerjee - Uttarpara Over a year ago

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[]'.

Shailesh Ladumor · Accepted Answer · 2018-03-22 12:59:19Z

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, 2018 at 12:59

answered Mar 22, 2018 at 12:41

Shailesh Ladumor

7,2515 gold badges44 silver badges60 bronze badges

Comments

Radonirina Maminiaina · Accepted Answer · 2018-03-22 12:47:50Z

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?

Collectives™ on Stack Overflow

Angular 4 - update title page by page

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related