{"id":195,"date":"2019-10-09T09:25:23","date_gmt":"2019-10-09T09:25:23","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/chankya\/?page_id=195"},"modified":"2019-10-10T06:39:30","modified_gmt":"2019-10-10T06:39:30","slug":"adding-deleting-menu-component","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/chankya\/adding-deleting-menu-component\/","title":{"rendered":"Adding\/Deleting Menu & Component"},"content":{"rendered":"\n
Adding a new menu & component<\/h5>\n\n\n\n

We will help you in creating a new component. Follow the steps below to add a new component. We will add a test component in the template:\u200c<\/p>\n\n\n\n

Step 1:<\/strong>\u00a0Open the\u00a0src->app<\/code>\u00a0folder in the terminal or command prompt & run the following command:<\/p>\n\n\n\n

\u200cng generate module test --routing
<\/pre>\n\n\n\n
It will create a module & its routing file inside the test folder.\u200c<\/p>\n\n\n\n
Step 2:\u00a0<\/strong>Now run the following command in the same app folder like you did in the above step<\/p>\n\n\n\n
ng generate component test\/test1
<\/pre>\n\n\n\n
It 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
\"\"<\/figure>\n\n\n\n
It contains the module, its routing file & the component folder.\u200c<\/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\n
import { 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\n
Step 4:\u00a0<\/strong>Open the\u00a0src->app->app-routing.module.ts<\/code>\u00a0file and add the route of the test module in the children array. See the code below for the reference:<\/p>\n\n\n\n
children: [
   \u2026
   \/\/ Newly added route of the test module
   { path: 'test', loadChildren : () => import('.\/test\/test.module').then(m=> m.TestModule)}
]<\/pre>\n\n\n\n
Step 5:\u00a0<\/strong>Now add this component in the sidebar menu. Open the\u00a0src->app->core->menu->menu-items->menu-items.ts<\/code>\u00a0file and add the component in the\u00a0MENUITEMS<\/code>array. Like we have added in the below example.
<\/p>\n\n\n\n
const MENUITEMS = [
   \u2026
    \/\/ Added Component
    {
       state: 'test',
       name: 'Test',
       type: 'link',
       icon: 'icon-notebook icons',
       label: 'New'
    }
 ];<\/pre>\n\n\n\n
Step 6:\u00a0<\/strong>Now you need to add the title of the component, for that you need to import the\u00a0src->app->core->page-title->page-title.service.ts<\/code>\u00a0file in the\u00a0src->app->test->test1->test1.component.ts<\/code>\u00a0file, call them in the constructor and call the\u00a0setTitle<\/code>method in the\u00a0ngOnInit<\/code>\u00a0function and pass the string you want as title of the component.<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';

\/\/ Add the import structure
import { PageTitleService } from '..\/..\/core\/page-title\/page-title.service';
 .....
export class Test1Component implements OnInit {
    \/\/ Call them in constructor
    constructor(private pageTitle : PageTitleService) { }
    ngOnInit() {
       \/\/ Call the method and pass the string you want as title of the component
       this.pageTitle.setTitle(\"Test 1\");
    }
}<\/pre>\n\n\n\n
Now 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
\"\"<\/figure>\n\n\n\n
Deleting a menu & component from the menu list<\/h5>\n\n\n\n
We 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:\u200c<\/p>\n\n\n\n
Step 1:<\/strong>\u00a0Firstly, open the\u00a0src->app->test->test.module.ts<\/code>\u00a0file and remove the\u00a0test1<\/code>\u00a0component\u00a0import statement<\/code>\u00a0& its declaration from the\u00a0declarations<\/code>\u00a0array in the file. Like we have removed the commented lines from the given code example.<\/p>\n\n\n\n
import { 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\n
Step 2: Now open the src->app->test->test-routing.module.ts file and remove the import statement of test1 component & its route from the routes array. Like we have removed the commented lines from the given code example.<\/p>\n\n\n\n
import { 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\n
Step 3:\u00a0<\/strong>Now delete the\u00a0test1<\/code>\u00a0component folder manually from the\u00a0src->app->test<\/code>\u00a0folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 4:\u00a0<\/strong>Open the\u00a0src->app->core->menu->menu-items->menu-items.ts<\/code>\u00a0file and remove the component from the\u00a0MENUITEMS<\/code>\u00a0array. Like we have removed the commented lines from the given code example.
<\/p>\n\n\n\n
const MENUITEMS = [
   \u2026
   \/\/ deleted\/removed Component
   \/\/{
     \/\/  state: 'test',
     \/\/  name: 'Test',
     \/\/  type: 'link',
     \/\/  icon: 'icon-notebook icons',
     \/\/  label: 'New'
   \/\/ }
];
<\/pre>\n\n\n\n
That\u2019s 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
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Adding a new menu & component We will help you in creating a new component. Follow the steps below to add a new component. We will add a test component in the template:\u200c Step 1:\u00a0Open the\u00a0src->app\u00a0folder in the terminal or command prompt & run the following command: \u200cng generate module test –routing It will create […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/195"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":6,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/195\/revisions"}],"predecessor-version":[{"id":209,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/195\/revisions\/209"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/media?parent=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}