How To make A Reusable Component in Angular | Reusable Component

Hello Viewer, Welcome to M-SoftTech. Today I will teach you how to make a Reusable component in angular. And why we need for reusable component. Suppose we have a project. inside our project many tables and many filters are used. then you are writing same table code again and again. In this case our processing time is increase because of line of code. so, what we can do for reducing our processing time. then in this situation I introduced your reusable component in angular. mainly this situation.

How to create FormArray In Angular | Reactive Form

 so in this article I will teach you how to make a reusable component in angular. that is very important part in angular. when you are starting a project in angular. that time reusable component help you to less code and improve your project processing speed. In this project will create two user component and one is table component and create one service file for using our API service.

Subject and Behavior Subject in Angular 13 | Subject | Angular 13 Tutorial in Hindi

Service File

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataserviceService {
  apiurl="https://jsonplaceholder.typicode.com/users";

  constructor(private _http:HttpClient) { }

  getdata(){
    return this._http.get(this.apiurl);
  }
}

Table.component.html

<table>
    <tr>
        <th *ngFor="let head of Headarray">{{head.Head}}</th>
    </tr>
    <tr *ngFor="let item of Gridarray">
        <td *ngFor="let head of Headarray">
            {{item[head.FieldName]}}
        </td>

    </tr>
</table>

Table.Component.ts

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


@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  data:any;

  @Input() Headarray:any [] =[];
  @Input() Gridarray:any [] =[];

  constructor() { }
 

  ngOnInit(): void {
    
  }



}

User.component.html

<p>user works!</p>
<app-table 
[Headarray]="headarray" 
[Gridarray]="userlist"
>

</app-table>

User.copmonent.ts

import { Component, OnInit } from '@angular/core';
import { DataserviceService } from '../dataservice.service';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private _dataservice:DataserviceService) { }
  userlist:any;

  headarray=[
    {'Head':'ID', 'FieldName':'id'},
    {'Head':'Name', 'FieldName':'name'},
    {'Head':'Email', 'FieldName':'email'},
    {'Head':'Phone', 'FieldName':'phone'},
    {'Head':'Website', 'FieldName':'website'},
  ]

  ngOnInit(): void {
    this._dataservice.getdata().subscribe(res=> {
      this.userlist = res;
      console.log(this.userlist);
    })
    
  }

}

App.component.html

<h2>Reusable Component</h2>
<app-user></app-user>

App.Module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TableComponent } from './table/table.component';
import { HttpClientModule } from '@angular/common/http';
import { UserComponent } from './user/user.component';
import { User1Component } from './user1/user1.component'

@NgModule({
  declarations: [
    AppComponent,
    TableComponent,
    UserComponent,
    User1Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you have any problem to understand this code. so please watch video tutorial also

Leave a Reply

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