CODEWITHSUNDEEP
typescriptangular
Ferdi Emmen
Ferdi Emmen

Reputation: 385

Bootstrap Angular 2 on DOM element like in Angular 1

Is it possible to bootstrap Angular 2 on a DOM element like Angular 1? In Angular 1 this made it for example possible to change the title tag in the <head>. In Angular 2 it seems you need to add my-app to the <html> tag. I've created a plunker where you have both Angular 1 and Angular 2 bootstrapped.

Angular 1

index.html

<body>
  <div ng-controller="MainCtrl">
    <h2>Hello {{name}}</h2>
  </div>
</body>

app.js

angular.element(document).ready(function() {
  angular.bootstrap(document.documentElement, ['plunker']);
});

Angular 2

index.html

<body>
  <my-app>Loading...</my-app>
</body>

main.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

Upvotes: 3

Views: 782

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657731

For changing the title there is the Title service. You can inject it and use it to manipulate the title.

Direct support to modify more than just the title is planned.

Adding my-app to <html> won't work well in Angular because it wipes the HTML that's within the tag that matches the selector of your root component.

Upvotes: 2

Related Questions