Home Angular 8 Angular 9 – Angular Smart Table

Angular 9 – Angular Smart Table

by therichpost
Published: Last Updated on 10 comments
Angular Smart Table

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular Smart Table.

Angular Smart Table
Angular Smart Table

Post Working:

In this post, I am implementing smart table into my angular 9 application. With this table, you will get default, searching, filtering, add, update and delete features.

Here are the commands and code snippet and please follow carefully:

1. After setting the Angular 9 project, you need to run below commands for add smart table feature into your angular 9 application:

npm install --save ng2-smart-table

npm i @akveo/ng2-completer --save

2. Here is the code, you need to add into your app.module.ts file:

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

// ...

  imports: [
    // ...
    // ...
  declarations: [ ... ]
// ...

3. Here is the code, you need to add your app.component.ts file:

settings = {
  columns: {
    id: {
      title: 'ID'
    name: {
      title: 'Full Name'
    username: {
      title: 'User Name'
    email: {
      title: 'Email'

data = [
    id: 1,
    name: "test Graham",
    username: "Bret",
    email: "test@april.com"
    id: 2,
    name: "test Howell",
    username: "test",
    email: "test@gmail.tv"
    id: 11,
    name: "testDuBuque",
    username: "test.Stanton",
    email: "test@test.biz"

3. Here is code, you need to add into your app.component.html file:

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

This is it and if you have any kind of query then please do comment below.


Thank you

You may also like


Arnold August 24, 2020 - 10:05 am

Thank you for this great tutorial.

I would like to use this for dynamic tables where the data is read in from a database.

Is there any way you can show how once update or delete is carried out, this updates the values in a database?

Ajay Malhotra August 24, 2020 - 10:09 am

Yes sure and I will share the post link soon and if you have subscribed then you will be notified.

Arnold August 24, 2020 - 6:07 pm

Hi. I am subscribed but I cannot see the notification? Did you post it yet?

Karen Small August 25, 2020 - 9:57 pm

Pls sir pls dynamic code share pls sir

Ajay Malhotra August 26, 2020 - 4:37 am

Will update you soon. Thanks

Daisy January 6, 2021 - 2:34 pm

Hi sir, how did you add ‘Edit’ button?

chaima May 7, 2021 - 1:37 pm

Thank you for this great tutorial,
how to add a “select option” instead of “input” with ng smart table ??? i need your help please !!

Ajay Malhotra May 7, 2021 - 3:44 pm

Okay, I will update you. Thanks.

Skander October 12, 2022 - 3:47 pm

How can I load a tones of data from server to ng2-smart ? I’m working with graphql not REST api

therichpost October 13, 2022 - 6:42 am

yes you can do with pagination with lazy loading method.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.