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: