Bootstrap our App Component


Bootstrap our App Component

We need to setup the index.html page to host our application and then we need to define our Angular root module to bootstrap our application.

Once you created any Angular component and you want to render that Component template layout at first then just add specified Component selector to index.html page like below.

To Bootstrap any Angular Component we have to follow some steps.

  1. Create any Component.
  2. Update created Component in any of the main module so that Angular can detect your own created Component.

Suppose we have created NameComponent and we want to bootstrap this component.

name.component.ts

import { Component } from '@angular/core';

@Component({
  selector:'name',
  template:'<h1>{{name}}</h1>'
})

export class NameComponent {
    name: string = "Vikas Kumar";
    constructor() { }
}

Once you created above Component then update this Component into app.module.ts file inside declarations section.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NameComponent } from './app.component';

@NgModule({
  declarations: [NameComponent],
  imports: [
     BrowserModule,
  ],
  providers: [],
  bootstrap: [NameComponent]

})

export class AppModule { }

here bootstrap defined the startup component of the application.






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229