How to create and use of a custom component to angular Js 2 ?

If you want to create a custom component on Angular JS 2 then you have to follow below steps.

Using Angular CLI
===================
Just type this code on your cmd.

ng generate  component component_name

Or you can do it manually
create a component file with extension  .component.ts  like testcomponent.component.ts. Put below code onto this file

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
// Here, i have put just this code

lists = [];
  addItem(value:string){
  	if(value)
  	this.lists.push(value);
  }	
}

also a custom component html file with extension .component.html like testcomponent.component.html for rendering view.Put any html you want.

Here, i have put just this code

Add a value to below list

<input #list/> 
<button (click)="addItem(list.value)">Add!</button>
<ul>
 	<li *ngFor="let list of lists">{{list}}</li>
</ul>

 

then you have to register your component to main module file using below code.

import { TestComponent } from './test/test.component';
@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],

Next, you have to put your component selector name to your app.component.html file to render your custom component html.
Like below.

View of a custom component on App Component HTML

 

Now, run server then you see like below image

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *