Seed Project

Gene comes with a seed project. You can start your app from the scratch with this seed project. It’s very easy to build a new template structure which can be further extended and enhanced with new features and pages as per requirement.‌

It includes all the core files required to run the template app with flexibility and ease of use to include new components and modules to integrate new features and functionality.

Adding new menu & component

For adding a new menu & component in seed project, please visit the section Adding/Deleting Menu & Component . There you can get a complete step by step procedure to add a new menu & component in the template.‌

Adding a new component in widgets

For adding a new component in widgets, you need to follow the steps given below. We will show you an example by creating a demo-widget:‌

Step 1: Open the src->app->widget-component folder in the terminal or command prompt and run the following command to create a new component in the widgets.

ng generate component demoWidget

Step 2: Open the src->app->widget-component->widget-component.module.ts file and you will see your newly created component is already imported in the file and have declaration in the declarations array. You only need to export it in the exports array.

// Already Imported Component
import { DemoWidgetComponent } from './demo-widget/demo-widget.component';

@NgModule({
declarations: [
...
// Declared in the array
DemoWidgetComponent
],
...
exports: [
...
// Export the component here
DemoWidgetComponent
]
})

Step 3: 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 dashboard.module.ts file.

import { NgModule } from '@angular/core';

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

@NgModule({
declarations: [
DashboardComponent
],
imports: [

// Add the import here
WidgetComponentModule,
]
})
export class DashboardModule { }

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

Step 4: 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 name src->app->widget-component->demo-widget->demo-widget.component.ts

@Component({
selector: 'ms-demo-widget',
templateUrl: './demo-widget.component.html',
styleUrls: ['./demo-widget.component.scss']
})

‌Now call this widget from the src->app->dashboard->dashboard-v1->dashboard-component.html file.

<ms-demo-widget></ms-demo-widget>

Now you have completed all the steps to add a new component in the widgets. Save the files and open the browser, you can see your newly added widget component in the dashboard. Take a look on the screenshot below:

Last Updated 4 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages