> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/gene/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/gene/adding-new-component.md).

# Adding/Deleting Menu & Component

### 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:

**Step 1:** Open the `src->app` folder in the terminal or command prompt & run the following command:

```
ng generate module test --routing
```

It will create a module & its routing file inside the test folder.

**Step 2:** Now run the following command in the same app folder like you did in the above step

```
ng generate component test/test1
```

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:

![](/files/-Lb8dFR20HV6eBKtxbL0)

It contains the module, its routing file & the component folder.

**Step 3:** Now open the `test-routing.module.ts` file to add the route of the newly created component `test1`. You need to import the component and then define the path of the component. Like given in the example below:

{% code title="test-routing.module.ts" %}

```typescript
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 { }
```

{% endcode %}

**Step 4:** Open the `src->app->app-routing.module.ts` file and add the route of the test module in the children array. See the code below for the reference:

{% code title="app-routing.module.ts" %}

```typescript
children: [
         ...
         // Newly added route of the test module
         { path: 'test', loadChildren : './test/test.module#TestModule'} 
]
```

{% endcode %}

**Step 5:** Now add this component in the sidebar menu. Open the `src->app->core->menu->menu-items->menu-items.ts` file and add the component in the `MENUITEMS` array. Like we have added in the below example:

{% code title="menu-items.ts" %}

```typescript
const MENUITEMS = [
  ...
  // Added Component
  {
    state: 'test',
    name: 'TEST',
    type: 'link',
    icon: 'mail'
  }
];
```

{% endcode %}

**Step 6:** Now you need to add the title of the component, for that you need to import the `src->app->core->page-title->page-title.service.ts` file in the `src->app->test->test1->test1.component.ts` file, call them in the constructor and call the `setTitle` method in the `ngOnInit` function and pass the string you want as title of the component.

{% code title="test1.component.ts" %}

```typescript
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");
  }

}
```

{% endcode %}

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:

![](/files/-LbYMXr8DazAJxhnTa0a)

### Deleting a menu & component from the menu list

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:

**Step 1:** Firstly, open the `src->app->test->test.module.ts` file and remove the `test1` component `import statement` & its declaration from the `declarations` array in the file. Like we have removed the commented lines from the given code example.

{% code title="test.module.ts" %}

```typescript
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 { }
```

{% endcode %}

**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.

{% code title="test-routing.module.ts" %}

```typescript
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 { }
```

{% endcode %}

**Step 3:** Now delete the `test1` component folder manually from the `src->app->test` folder.

![](/files/-LbMPy4HFosEb2bSaaON)

**Step 4:** Open the `src->app->core->menu->menu-items->menu-items.ts` file and remove the component from the `MENUITEMS` array. Like we have removed the commented lines from the given code example.

{% code title="menu-items.ts" %}

```typescript
const MENUITEMS = [
  ...
  // Deleted/Removed Component
  //{
  //  state: 'test',
  //  name: 'TEST',
  //  type: 'link',
  //  icon: 'mail'
  //}
];
```

{% endcode %}

That'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.