Adding Widgets in Component

Gene provides you the ability to add widgets in the template. Please check the detailed documentation to learn, how to add the widgets in the template.

Adding an existing widget

Gene already contains some widgets that you can directly add to the components. You can find all the widgets in the src->app->widget-component folder. Please follow the given steps to add an existing widget in the template. We are taking an example of adding a "column-chart" on the "TEST" component but you can add any widget on any of the component in the template:

Step 1: Import the path of the widget-component.module.ts file that already exists in your template, to the component in which you want to add the widgets and add them in the imports array. Like we will import the path in the test.module.ts file:

test.module.ts

import { NgModule } from '@angular/core';
...
// Newly Imported Widget Module
import { WidgetComponentModule } from '../widget-component/widget-component.module';

@NgModule({
  declarations: [
  Test1Component],
  imports: [
    ...
    // Add the import here
    WidgetComponentModule
  ]
}) 
export class TestModule { }

You can find the widget-component.module.ts file in the src->app->widget-component folder & test.module.ts file in the src->app->test folder.

Step 2: Now open the .ts file of the widget that you are going to add and copy the selector name of the widget. Now open the .html file of the component in which you want to add the widget and recall the widget from that .html file with the help of html tags, the selector name is the tag name.

Like in our example we have firstly opened the following file & copied the selector's namesrc->app->widget-component->chart->column-chart-with-images->column-chart-with-images.component.ts

column-chart-with-images.component.ts

@Component({
	selector: 'ms-column-chart-with-images', // Copy the selector name from here
	templateUrl: './column-chart-with-images.component.html',
	styleUrls: ['./column-chart-with-images.component.scss']
})

Now call this widget from the src->app->test->test1->test1.component.html file.

test1.component.html

<ms-column-chart-with-images></ms-column-chart-with-images>

Now you have completed all the steps to add an existing widget on the component. Save the files and open the browser, you can see your newly added widget on the component. Take a look on the screenshot below to check the newly added "column-chart" on the "TEST" component.