How to create menu in Angular App using Asp.Net Core 2.0

In this article we are going to make menu for angular application in asp.net core 2.0 .

This is my second blog on angular using asp.net Core 2.0. If you have not read my first blog on this go to Link

Now lets Start ,

Create Menu in Angular using Asp.Net Core 2.0

We will go step by step on this Project.

  1. Go to Solution explorer then  ClientApp=>app=>components. And new folder detail .
  2. And in that detail folder we will add two files detail.component.html & detail.component.ts .
  3.  Go to ClientApp=>app=>components=>navmenu and open navmenu.component.html. And add below given code. And browser will show this menu on page.
    <li [routerLinkActive]="['link-active']">
    <a [routerLink]="['/detail']">
    <span class='glyphicon glyphicon-home'></span> Detail
    </a>
    </li>

  4.  If you click on detail menu button , still it will not navigate to detail form. For navigation link component goto ClientApp=>app & open app.shared.module.ts file . we will link that component in this page.  For that First import the component.
     import { detailComponent } from './components/detail/detail.component';

    and add that component(detailComponent ) in @NgModule declaration. And provide full path of that component in RouterModule.forRoot with below code.

     { path: 'detail', component: detailComponent}

  5. Now we will run our project and you can see our detail page is opened .

I have also made this whole steps into single video. See this video .

 

 

About the Author

Prashant Goswami

I am the blog writer who will teach how to love programming. My experience in programming is about 6 years. And i am the lover of programming , so i will make you people.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: