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';

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

lists = [];

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>
 	<li *ngFor="let list of lists">{{list}}</li>


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

import { TestComponent } from './test/test.component';
  declarations: [

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 *