Make It Easy: Angular: Create reusable component and pass data to component

Angular 2(+)Angular 4/5Reusable component

Here we will be discussing about how to reuse a component and also about how to pass data to a component. Sharing the data between components is possible by using a service file as well which I have explained already in another article. Both options are valid and are depends on the project requirement. In this article we will be creating a component which can reuse anywhere and it also allows you to share the data between them.

1. Create a reusable component
2. Pass data to a component
3. Pass array/object to a component

Create a reusable component

Let us create a main component first.

Main Component


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String;
  constructor(){
    this.title = "Angular 2 reusable component ";
    
   }
}

Html


<div>
  <h3> {{title}}</h3>
</div>

I will be sharing module page code as well for better understanding.

Module


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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Our first simple Angular application is ready and it looks like something below

Now we need to create a simple list which displays name and age fields and that needs to reusable across the application. Let us create a new component and name it as listComponent.ts

Component


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

@Component({
  selector: 'app-list',
  template: '<ul class="list">'
       +'<li><strong>Name</strong>: {{name}}</li>'
       +'<li><strong>Age</strong>: {{age}}</li>'
     +'</ul>',
  styleUrls: ['./app.component.css']
})
export class Applist {
  @Input() name: string;
  @Input() age: string;
}

Our reusable component is ready. Now we need to import this into our module.

Updated module code


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

@NgModule({
  declarations: [
    AppComponent,Applist
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here we have imported newly created component and also injected the dependency. Now go to your main component or any other component and include our newly created component like below example.


<p>Example for binding string</p>
<app-list name="Angular 2" age="6"></app-list>

Refresh the page and you can see the output like below.

You can share data between parent and child component, for more info: - Share data between parent and child components.

Pass data to a component

In the above example we have passed string directly into our component. Now let us check how we can pass variables. To achieve that, update html like below


<p>Example for binding a variable in the parent scope</p>
<app-list [name]="name" [age]="age"></app-list>

And also add these variable in your component, here it is in appcomponent

Updated main component


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String;
  name:String;
  age :Number;
  constructor(){
    this.title = "Angular 2 reusable component ";
    this.name = 'Angular 4';
    this.age = 4;
   }
}

Pass array/object to a component

Let us check how we can pass an array/object to component. There is no major change. Just add your array in your main component and pass the same. Check below example

Updated main component


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String;
  list:any;
  name:String;
  age :Number;
  constructor(){
    this.title = "Angular 2 reusable component ";
    this.name = 'Angular 4';
    this.age = 4;
    this.list = [
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'}
    ]
   }
}

Updated html


<p>Example for binding a variable in the parent scope</p>
<app-list [name]="name" [age]="age" [list]="list"></app-list>

Updated reusable component


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

@Component({
  selector: 'app-list',
  template: '<ul class="list">'
  +'<li><strong>Name</strong>: {{name}}</li>'
  +'<li><strong>Age</strong>: {{age}}</li>'
  +'<li *ngFor="let l of list">{{l.name}}</li>'
 +'</ul>',
  styleUrls: ['./app.component.css']
})
export class Applist {
  @Input() name: string;
  @Input() age: string;
  @Input() list : any[];
}

And we are done

So we have successfully created our reusable component and also explained about passing data to a component. There are many other ways also there to share data between components, read here for more info: - 7 method to share data between angular components.

Related Info

In Angular js 1 we have used directive to handle above scenarios. But in Angular it is little different. Basically you can create component when you want to create a reusable set of DOM elements with custom behavior. If that is the case what is purpose of directive? Angular directive is mostly used to add behavior separately to DOM elements.

1. Share data between components using a service file.

2. Simple search using pipe in angular 2

3. Date filtering and formatting using pipe in Angular 2

4. Communicate with parent and child component in Angular.