CODEWITHSUNDEEP
angulartypescript
MMR
MMR

Reputation: 3009

How to include the ts component in index.html file

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.

Upvotes: 1

Views: 13852

Answers (3)

Cyril Cermak
Cyril Cermak

Reputation: 329

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>
...

Upvotes: 1

Srinivas Damam
Srinivas Damam

Reputation: 3045

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.

Upvotes: 2

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

Reputation: 657088

Just use

bootstrap(MyComponent)

to add a component to index.html. The selector of the component needs to match a tag in index.html

Upvotes: 3

Related Questions