Prerequisites:

• Basic knowledge of Angular.
• Code editor likes VS Code.

First, create a new project in Angular using this command.

npm install ng2-smart-table

Open the app.module.ts and paste the following code into it.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { Ng2SmartTableModule } from 'ng2-smart-table';

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

Open the app.component.ts and paste the following code into it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public settings = {
    columns: {
      id: {
        title: 'Id',
        filter: true,
      },
      firstname: {
        title: 'Firstname',
        filter: true,
      },
      lastname: {
        title: 'Lastname',
        filter: true,
      }
    },
    pager: {
      display: true,
      perPage: 10
    },
    actions: {
      columnTitle: 'Action',
      add: false,
      edit: false,
      delete: false,
      position: 'left'
    },
    attr: {
      class: 'table table-striped table-bordered table-hover'
    },
    defaultStyle: false
  };

  data = [
    {
      id: 1,
      firstname: "Kaushik",
      lastname: "dhameliya"
    },
    {
      id: 2,
      firstname: "Manish",
      lastname: "Vadher"
    },
    {
      id: 3,
      firstname: "Sanket",
      lastname: "Vagadiya"
    },
    {
      id: 4,
      firstname: "Vaibhav",
      lastname: "Bavishi"
    },
    {
      id: 5,
      firstname: "Tushar",
      lastname: "Kyada"
    }];
}

Open the app.component.html and paste the following code into it.

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

Output

Conclusion

In this article, we have learned how to implement ng2-smart-table in Angular 14.

If you have any questions or issues about this article, please let me know.

Also, check How To Detect Adblock In Angular