Integrating sg-json-table component with Angular Application

What is sg-json-table Component ?

This component is used to load the data from the API returning JSON Array. 

You just need to provide the data-url which returns JSON Array, It will load and display table with pagination, search, print options. You can also customize the options and themes based on your needs.

I created an sg-json-table component, devloper just need to use the tag and configure it based on their needs.

In this article we will go over how to integrating sg-json-table component with Angular Application in detail.

Getting Started

Use the below command to add your package in your application

npm i sg-json-table

you can consume it in your application as shown below:

<sg-table data-url='YOUR_API_URL' ></sg-table>

Please note your can provide your API URL as the data-url value which returns as JSON Array. Your JSON array looks like this

[
  {
    "name": "Adeel Solangi",
     "id": "V59OF92YF627HFY0",
  },
  {
    "name": "Afzal Ghaffar",
     "id": "ENTOCR13RSCLZ6KU",
  }]

Options :

You can find the complete options avaliable for the user to configure it based on their needs.

Examples :

Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.

npm i sg-json-table

Your package.json will be updated with the component as shown below.

Step 2: Adding the Custom Elements in main

Add an import to main.ts

import { defineCustomElements} from '../node_modules/sg-json-table/loader';

And somewhere near the bottom we'll call this function.

defineCustomElements();

Please Note: If you are using multiple component then you can define the defineCustomElements as shown below:

import { defineCustomElements as defineCustomElements1} from '../node_modules/sg-copyright/loader';
import { defineCustomElements as defineCustomElements2} from '../node_modules/sg-avatar/loader';
import { defineCustomElements as defineCustomElements3} from '../node_modules/sg-table/loader';
.
.
.
defineCustomElements1();
defineCustomElements2();
defineCustomElements3();

Step 3: Adding the Custom Elements Schema in your module

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})export class AppModule { }

Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

Step 4: Consume it in your Html file.
Now, in app.component.html add the sg-avatar component.

<sg-table data-url='https://microsoftedge.github.io/Demos/json-dummy-data/128KB.json'info='true' paging="true">
</sg-table>

Click Here for live example

Conclusion:
This sg-json-table component have different options, you can configure it based on your project needs.

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.