Loading
 
What's Next: View All Tutorial →

Angular Js 2 - Create new component and append to existing component

A sample program to create a new component and bind to existing component. Step 1: Create a new component  Create a new component in a new file app.newComponent.ts import { Component } from '@angular/core'; @Component({ &nbs...

Published Date: 06/12/2016  Last Modified Date: 06/12/2016    New Post



A sample program to create a new component and bind to existing component.


Step 1: Create a new component 


Create a new component in a new file app.newComponent.ts
import { Component } from '@angular/core';

@Component({
  selector: 'new-comp',
  template: `
  <div>New Component</div>
  `,
  styles: [
      `div{
          border :1px solid black;
      }`
      ]
})
export class NewComponent {
  
}

A component must have a class with a decorator @Component

The @Component must have the selector & template attribute.

Here the component name is  NewComponent and this will be rendered wherever the selector is implemented
 

Step 2: Bind the new app component in the NgModule declaration



In order to use the new component, we must add it in the NgModule declaration class
 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NewComponent }  from './app.newcomponent';           //file path imported


@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent   ,NewComponent ],              //NewComponent class refrence added it
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


Things to Know:

The import { NewComponent } from './app.newcomponent';  statement added for new file name

NewComponent class is added in the declarations section


 

Step 3: Bind the new component to the appcomponent

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

@Component({
  selector: 'my-app',
  template: `
  Main Content<br><br>
  <new-comp></new-comp>
  `
})
export class AppComponent {
  
  
}


Things to know:

<new-comp></new-comp> - Here the angular js will render the newComponent content html


Program Execution


Live Example code
 

Program Output:


Main Content
 
New Component
Awaiting for Administrator approval




← Back to list


Related Post




×