Angular 2.x change in head (outside my app)

Question

I think it should be easy but I cannot find how.

I have something like

<html>
<head>
  <title>{{'a' + 'b'}}</title>
</head>
<body>
  <my-app>Loading...</my-app>
</body>
</html>

It seems like I cannot access anything outside my-app.

In angular 1.x it was easy, I was able to add ng-app on any element (<html ng-app="myApp">).

Now I think I'm able only bootstrap in body.

I know I can manually bootstrap somehow (didn't try yet), but dynamically change title in single page applications should be super-easy, shouldn't it?

s.alem · Accepted Answer

Angular2 can't be bootstrapped to entire html. But you can use Title Service.

A service that can be used to get and set the title of a current HTML document.

It has 2 methods:

getTitle()

setTitle()

Don't forget to check the dependency injection section out to see how you can use the services.

EDIT:

As of the release (2.0.0), this is how you can do it:

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

export class SomeComponent {
  constructor(title: Title) {
    // title.getTitle();
    // title.setTitle('new title');
  }
}

And the docs for the Title service are now here: https://angular.io/docs/ts/latest/api/platform-browser/index/Title-class.html

Angular 2.x change <title> in head (outside my app)

Tags:

javascript

angularjs

Arūnas Smaliukas

1 Answers

s.alem

Recent Activity

Donate For Us