src->app<\/code> folder in the terminal or command prompt & run the following command:<\/p>\n\n\n\nng generate module test --routing<\/pre>\n\n\n\nIt will create a module & its routing file inside the test folder.<\/p>\n\n\n\n
Step 2: <\/strong>Now run the following command in the same app folder like you did in the above step<\/p>\n\n\n\nng generate component test\/test1<\/pre>\n\n\n\nIt will create the test1 component in the test folder. After completing these two steps, when you will open the test folder, It will looks like:<\/p>\n\n\n\n
![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/test-folder.png\")
<\/a><\/figure><\/div>\n\n\n\nIt contains the module, its routing file & the component folder.<\/p>\n\n\n\n
Step 3:<\/strong> Now open the test-routing.module.ts<\/code> file to add the route of the newly created component test1<\/code>. You need to import the component and then define the path of the component. Like given in the example below:<\/p>\n\n\n\nimport { NgModule } from '@angular\/core';
import { Routes, RouterModule } from '@angular\/router';
import { Test1Component } from '.\/test1\/test1.component'; \/\/ Import the component
const routes: Routes = [
\/\/ Define the path of the component test1
{
path : '',
component : Test1Component
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TestRoutingModule { }<\/pre>\n\n\n\nStep 4: <\/strong>Open the src->app->app-routing.ts<\/code> file and add the route of the test module in the children array. See the code below for the reference:<\/p>\n\n\n\nchildren: [
...
\/\/ Newly added route of the test module
{
path: 'test',
loadChildren : '.\/test\/test.module#TestModule'
}
]<\/pre>\n\n\n\nStep 5: <\/strong>Now add this component in the sidebar menu. Open the src->app->Core->MenuItems->MenuItems.ts<\/code> file and add the component in the MENUITEMS<\/code>array. Like we have added in the below example:<\/p>\n\n\n\nconst MENUITEMS = [
...
\/\/ Added Component
{
name : 'Test',
type : 'sub',
class: 'group-title',
icon : '',
isOpen:true,
children : [
{
state: 'test',
name: 'Test 1',
type: 'link',
class: 'nav-item',
icon: 'description'
}
]
}
];<\/pre>\n\n\n\nNow you have completed all the steps of adding the component in the template & the sidebar menu. Save the file and open the browser, you will see your newly added component in the sidebar. Have a look at the screenshot below to check how your component is added in the template:<\/p>\n\n\n\n
![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/testpage-1024x523.png\")
<\/a><\/figure><\/div>\n\n\n\nDeleting a menu & component from the menu list<\/a><\/h5>\n\n\n\nWe will help you in deleting a menu & its component from the menu list by listing down the steps needed to delete. Please follow the steps described below, We will take an example by deleting the test1 component & TEST menu from the menu list which we have created in the above part:<\/p>\n\n\n\n
Step 1:<\/strong> Firstly, open the src->app->test->test.module.ts<\/code> file and remove the test1<\/code> component import statement<\/code> & its declaration from the declarations<\/code> array in the file. Like we have removed the commented lines from the given code example.<\/p>\n\n\n\nimport { NgModule } from '@angular\/core';
import { CommonModule } from '@angular\/common';
import { TestRoutingModule } from '.\/test-routing.module';
\/\/import { Test1Component } from '.\/test1\/test1.component'; \/\/ Delete this import statement
@NgModule({
declarations: [
\/\/Test1Component \/\/ Delete this declaration
],
imports: [
CommonModule,
TestRoutingModule
]
})
export class TestModule { }<\/pre>\n\n\n\nStep 2: <\/strong>Now open the src->app->test->test-routing.module.ts<\/code> file and remove the import statement<\/code> of test1<\/code> component & its route from the routes<\/code> array. Like we have removed the commented lines from the given code example.<\/p>\n\n\n\nimport { NgModule } from '@angular\/core';
import { Routes, RouterModule } from '@angular\/router';
\/\/import { Test1Component } from '.\/test1\/test1.component'; \/\/ Delete this import statement
const routes: Routes = [
\/\/ Delete this route
\/\/ {
\/\/ path : '',
\/\/ component : Test1Component
\/\/ }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TestRoutingModule { }<\/pre>\n\n\n\nStep 3: <\/strong>Now delete the test1<\/code> component folder manually from the src->app->test<\/code> folder.<\/p>\n\n\n\n![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/del-test.png\")
<\/a><\/figure><\/div>\n\n\n\nStep 4: <\/strong>Open the src->app->Core->MenuItems->MenuItems.ts<\/code> file and remove the component from the MENUITEMS<\/code> array. Like we have removed the commented lines from the given code example.MenuItems.ts<\/p>\n\n\n\nconst MENUITEMS = [
...
\/\/ Deleted\/Removed Component
\/\/ {
\/\/ name : 'Test',
\/\/ type : 'sub',
\/\/ class: 'group-title',
\/\/ icon : '',
\/\/ isOpen:true,
\/\/ children : [
\/\/ {
\/\/ state: 'test',
\/\/ name: 'Test 1',
\/\/ type: 'link',
\/\/ class: 'nav-item',
\/\/ icon: 'description'
\/\/ }
\/\/ ]
\/\/ }
];<\/pre>\n\n\n\nThat’s it, now you have completed all the steps to delete a menu from the menu list and its component from the app. Save the file and open the browser, now you will see that your template does not contains your deleted component anymore.<\/p>\n