How to include the ts component in index.html file.I have been searching for it since a long time but no use can any one suggest help.
-
1Have you tried anything?henrybbosa– henrybbosa2016-08-06 11:25:31 +00:00Commented Aug 6, 2016 at 11:25
Add a comment
|
3 Answers
Just use
bootstrap(MyComponent)
to add a component to index.html. The selector of the component needs to match a tag in index.html
answered Aug 6, 2016 at 11:25
Günter Zöchbauer
662k235 gold badges2.1k silver badges1.6k bronze badges
5 Comments
MMR
Gunter,here my problem is i have some html tags in index.html and i want to use binding to it from an external ts file.
Günter Zöchbauer
Binding on root components is not supported.
MMR
How can we use shared services in index.html
Jorawar Singh
Günter Zöchbauer
Assuming that you are building angular 2 application and want to add component to index.html file.
Create a class using component decorator and make sure you add selector property and template in decorator and bootstrap the app using angular's core bootstrap method with Component name.
main-component.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component } from "@angular/core"
@Component({
selector: 'root',
template: <div>It works!</div>
})
export class RootComponent{
constructor(){}
}
bootstrap(RootComponent)
index.html
<body>
<root></root>
</body>
bootstrap tells angular how to load your component since angular can be used to develop native mobile applications and web application you have use bootstrap method to initialize the application for a specific platform.
1 Comment
dtrunk
Module '"../node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic"' has no exported member 'bootstrap'.None of those answers worked for me. However, the solution is very simple.
First create the component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navigation-bar',
templateUrl: './app-navigation-bar.component.html',
styleUrls: ['./app-navigation-bar.component.css']
})
export class AppNavigationBarComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
}
Second, add the component to the app bootstrap:
// File: app.module.ts
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
...
],
providers: [],
bootstrap: [AppComponent, AppNavigationBarComponent]
})
export class AppModule { }
Third, use the component within the index.html:
...
<body>
<app-navigation-bar></app-navigation-bar>
<app-root></app-root>
</body>
...
