Integrating sg-json-table component with Angular Application

Examples :

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:

CODE Kopieren

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>

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, for more articles.