ng2-smart-table custom component example
Introduction to angular:
hello dear learner and visitor thanks for choosing us .Angular is the JavaScript open source SPA(Single Page Application) framework .we can create our application using its MVVC architecture with advanced feature ,easy way of implementation and configuration. In angular to make any web application oor hybrid is very easy because the structure of of project is so easy to understand for any web developer.we can also make hybrid and native application with the help of other framework with angular.We have started a series of Angular you can search you requires topic of angular or you can go through all the course free of cost.Our goal is to help you and give best content that can be understandable by beginners and others.
So in this article i am going to cover about ng2-smart-table we will cover below things
ng2-smart-table Custom Render Component
ng2-smart-table filter event
ng2-smart-table column settings
ng2 smart table custom action
ng2 smart table custom css
These are some questions that we found after keyword search and i decided to make a article on this topic .so as we all know angular is very good and strong framework and we can achieve everything with the help of libraries available in npm (Node package manager). So from huge libraries we also have one which is known as ng2-smart-table whixh is nothing but a inbuilt table structure we can simply use this table simply installing this library in our application by running this command
npm i ng2-smart-table
this command will add the ng2-smart-table to the package JSON dependency section
Ok moving forward with one example to render one custom component to the ng2-smart-table
First of all we need to understand all setting of ng2-smart-table we can say the skeleton .
settings = {
selectMode: "multi",
actions: {
columnTitle: "column title",
position: "right",
edit: false,
add: false,
delete: false,
new: false,
custom: [
{
name: "routeToUpdateFeedbackForm",
type: "html",
title: '<i class="fa fa-edit custom-font"></i>',
},
// {
// name: "onUserDelete",
// type: "html",
// title: '<i class="fa fa-trash custom-font" ></i>',
// },
],
},
columns: {
coulumn1: {
title: "column title",
},
colmn2: {
title: "column title",
},
coulmn3: {
title: "column title",
},
coulmn4: {
title: "column title",
type: "html",
valuePrepareFunction: (cell, row) => {
if (row.kerja_selesail == true) {
return "<div class='customformat'><i class='fa fa-check text-success
' aria-hidden='true'></i></div>";
} else {
return "<div class='customformat'><i class='fa fa-times
text-danger' aria-hidden='true'></i></div>";
}
},
},
},
};
onUserRowSelect(event) {
var i = 0;
var j = 0;
this.IdsArray = [];
this.selectedRows = event.selected;
for (i; i < this.selectedRows.length; i++)
this.IdsArray.push(this.selectedRows[i].feedback_id);
this.selectedRows = "";
this.listOfIds = JSON.stringify(this.IdsArray);
}
Here as you can see we have added a setting that will handle which column to add in the table and each column should be of what type .We also have added a custom evet in the code bellow the setting configuration of ng2-smart table and .Here we are adding some coulmns the table as per our requirement and then we are rendering custom events to some columns .
Let's discuss one by one
columnTitle: "Tindakan", -ere we are setting action section column title .action section means where we do modification of data.
position: "right",- here we are telling table to make the columns alignment right
edit: false,-Here we are disabling the edit button for each rows
add: false,-This will hide the add button from each row
delete: false,This will disable delete button from the all rows
new: false,this will hide new button from ng2-smart-table.
Good now we know what are the basic settings for ng2-smart-table now let's discuss lil bit about columns.
So on next section of column array we are arranging our columns as per our requirement and giving each column a title and these titles should match the response keys or we can say the modal properties in which we are storing our api response .
On the next section we are adding some custom buttons with custom design means we are adding respective font awesome icons for buttons and also adding required cusom events like delete and edit i will cover this topic in another article so i am moving forward for custom component rendering .
How to render component
So let's assume this is our setting for ng2-smart-table where we want to render one custom column that will render data from another component .
Let's prepare another component that we are going to use as a custom column with dynamic data rendering .
look after updating the column array from setting our setting will look like this
settings = {
selectMode: "multi",
actions: {
columnTitle: "Tindakan",
position: "right",
edit: false,
add: false,
delete: false,
new: false,
custom: [
{
name: "routeToUpdateFeedbackForm",
type: "html",
title: '<i class="fa fa-edit custom-font"></i>',
},
// {
// name: "onUserDelete",
// type: "html",
// title: '<i class="fa fa-trash custom-font" ></i>',
// },
],
},
columns: {
feedback_id: {
title: "Id Maklum Balas",
},
nama_pegawai_merinyu: {
title: "Nama Pemeriksa",
},
organisasi: {
title: "Organisasi",
},
button: {
title: 'Button',
type: 'custom',
renderComponent: ButtonComponent
},
kerja_selesail: {
title: "Status Kerja",
type: "html",
valuePrepareFunction: (cell, row) => {
if (row.kerja_selesail == true) {
return "<div class='customformat'><i class='fa fa-check text-success ' aria-hidden='true'></i></div>";
} else {
return "<div class='customformat'><i class='fa fa-times text-danger' aria-hidden='true'></i></div>";
}
},
},
},
};
button: {
title: 'Button',
type: 'custom',
renderComponent: ButtonComponent
},
We have added this column on the setting now we are ready let's create one component with name ButtonComponent.
ng g c ButtonComponent
After running this command you can add the code you want to show on the custom column
import { Component} from '@angular/core';
@Component({
selector: 'app-button-view',
templateUrl: './button-view.component.html'
})
export class ButtonComponent{
onClick(){
//Add your logic here
}
}
After this just add HTML content to this component html file
like this
<button (click)="onClick()" Click me >/button>
Now after adding this much you can see the screen something like this
This is the way how we do dynamic row rendering in ng2-smart--table This only a dummy example you can modify the setting as per your requirement . I will add another article for how to add a custom action section in ng2-smart-table.
Thanks for visiting our site any query or question plz comment bellow or contact us .
Tags:
Angular