{"id":235,"date":"2020-09-03T14:36:08","date_gmt":"2020-09-03T12:36:08","guid":{"rendered":"https:\/\/fileidea.com\/?p=235"},"modified":"2022-08-20T11:29:49","modified_gmt":"2022-08-20T09:29:49","slug":"create-a-page-menu-in-angular-10-with-active-routing-with-a-bootstrap-layout","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2020\/09\/03\/create-a-page-menu-in-angular-10-with-active-routing-with-a-bootstrap-layout\/","title":{"rendered":"Create a page menu in Angular 10 with active routing with a Bootstrap Layout"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Showing the finished tutorial result of when visiting http:\/\/localhost:4200\/awesome-stuff, their menu links highlighted depending on what page-url you are in.<\/em><\/p>\n\n\n\n

Something that wasn’t clear from me from the start when starting with Angular was how to indicate that the page is active whenever you are on it. If you are at the homepage, the home menu item should be active with bold styling or highlighted in any way, and if I go to another page, it should change and be the other page instead and so forth. Pretty straight forward. How does it work in Angular? Well it turns out it is very simple! To make things more fun we will use Bootstrap and have a simple Bootstrap layout so that we have a menu to the left and the content to the right so the menu is visible at all times. <\/p>\n\n\n\n

Let us create a new project with ng new assuming you have installed Angular already. I am using Angular 10 right now. Mine is called MyMenuApp<\/strong>. <\/p>\n\n\n

\nng new MyMenuApp\n<\/pre><\/div>\n\n\n
I am going to go with routing <\/strong>and CSS <\/strong>as styling syntax.<\/p>\n\n\n\n
Go into your directory and do the serve to see it is up and running. First we will use cd <\/strong>to go into the root app directory then type the ng serve<\/strong> command.<\/p>\n\n\n
\ncd .\\MyMenuApp\\\nng serve\n<\/pre><\/div>\n\n\n
You should have an app up and running with sample code.<\/p>\n\n\n\n
Add bootstrap<\/h3>\n\n\n\n
Now we will prepare some layout and styling for our application. To keep things pretty and structured we will import the bootstrap framework. By using bootstrap we can easily have the menu in a column to the left and our main content to the right. There are different ways to import the framework, but we will go with the npm install way which I believe is the easiest. Type the npm install\/i<\/strong> command as below.<\/p>\n\n\n
\nnpm i bootstrap\n<\/pre><\/div>\n\n\n
Okay good we have bootstrap in our modules folder. Now we just need to refer to it.<\/p>\n\n\n\n
Open your angular.json<\/strong> file and look for the “styles” property and add bootstrap.min.css. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Now my angular.json <\/strong>file looks like this.<\/p>\n\n\n
\n{\n  "$schema": ".\/node_modules\/@angular\/cli\/lib\/config\/schema.json",\n  "version": 1,\n  "newProjectRoot": "projects",\n  "projects": {\n    "MyMenuApp": {\n      "projectType": "application",\n      "schematics": {},\n      "root": "",\n      "sourceRoot": "src",\n      "prefix": "app",\n      "architect": {\n        "build": {\n          "builder": "@angular-devkit\/build-angular:browser",\n          "options": {\n            "outputPath": "dist\/MyMenuApp",\n            "index": "src\/index.html",\n            "main": "src\/main.ts",\n            "polyfills": "src\/polyfills.ts",\n            "tsConfig": "tsconfig.app.json",\n            "aot": true,\n            "assets": [\n              "src\/favicon.ico",\n              "src\/assets"\n            ],\n            "styles": [\n              "src\/styles.css",\n              ".\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css"\n            ],\n            "scripts": []\n          },\n          "configurations": {\n            "production": {\n              "fileReplacements": [\n                {\n                  "replace": "src\/environments\/environment.ts",\n                  "with": "src\/environments\/environment.prod.ts"\n                }\n              ],\n              "optimization": true,\n              "outputHashing": "all",\n              "sourceMap": false,\n              "extractCss": true,\n              "namedChunks": false,\n              "extractLicenses": true,\n              "vendorChunk": false,\n              "buildOptimizer": true,\n              "budgets": [\n                {\n                  "type": "initial",\n                  "maximumWarning": "2mb",\n                  "maximumError": "5mb"\n                },\n                {\n                  "type": "anyComponentStyle",\n                  "maximumWarning": "6kb",\n                  "maximumError": "10kb"\n                }\n              ]\n            }\n          }\n        },\n        "serve": {\n          "builder": "@angular-devkit\/build-angular:dev-server",\n          "options": {\n            "browserTarget": "MyMenuApp:build"\n          },\n          "configurations": {\n            "production": {\n              "browserTarget": "MyMenuApp:build:production"\n            }\n          }\n        },\n        "extract-i18n": {\n          "builder": "@angular-devkit\/build-angular:extract-i18n",\n          "options": {\n            "browserTarget": "MyMenuApp:build"\n          }\n        },\n        "test": {\n          "builder": "@angular-devkit\/build-angular:karma",\n          "options": {\n            "main": "src\/test.ts",\n            "polyfills": "src\/polyfills.ts",\n            "tsConfig": "tsconfig.spec.json",\n            "karmaConfig": "karma.conf.js",\n            "assets": [\n              "src\/favicon.ico",\n              "src\/assets"\n            ],\n            "styles": [\n              "src\/styles.css"\n            ],\n            "scripts": []\n          }\n        },\n        "lint": {\n          "builder": "@angular-devkit\/build-angular:tslint",\n          "options": {\n            "tsConfig": [\n              "tsconfig.app.json",\n              "tsconfig.spec.json",\n              "e2e\/tsconfig.json"\n            ],\n            "exclude": [\n              "**\/node_modules\/**"\n            ]\n          }\n        },\n        "e2e": {\n          "builder": "@angular-devkit\/build-angular:protractor",\n          "options": {\n            "protractorConfig": "e2e\/protractor.conf.js",\n            "devServerTarget": "MyMenuApp:serve"\n          },\n          "configurations": {\n            "production": {\n              "devServerTarget": "MyMenuApp:serve:production"\n            }\n          }\n        }\n      }\n    }},\n  "defaultProject": "MyMenuApp"\n}\n\n<\/pre><\/div>\n\n\n
As you can see in the above, that is where it should be placed. Now you got bootstrap in your application everywhere! Great. <\/p>\n\n\n\n
Then in my styles.css<\/strong> I am going to add some CSS for layout purposes.<\/p>\n\n\n
\n.content {\n    padding: 20px;\n}\n\nbody p{\n  white-space: pre-wrap;\n  font-size: 1.25em\n}\n<\/pre><\/div>\n\n\n
The index.html <\/strong>in the src<\/strong> folder are we going to keep it as it is. So don’t touch it, it should look something like this.<\/p>\n\n\n
\n<!doctype html>\n<html lang="en">\n\n<head>\n  <meta charset="utf-8">\n  <title>MyMenuApp<\/title>\n  <base href="\/">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <link rel="icon" type="image\/x-icon" href="favicon.ico">\n<\/head>\n\n<body>\n  <app-root><\/app-root>\n<\/body>\n\n<\/html>\n<\/pre><\/div>\n\n\n
Let’s now modify the app.component.html<\/strong> little bit, to make sure we have a place for the menu and the content. We are going to have the menu in a col-md-2<\/strong> column which should be a proper width for a menu, and then the content will be a col-md-10<\/strong> to take up the remaining space. Remove everything in the app.component.html<\/strong> file and then write.<\/p>\n\n\n
\n<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">\n  <a class="navbar-brand" href="http:\/\/fileidea.com">FileIdea.com<\/a>\n  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"\n    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">\n    <span class="navbar-toggler-icon"><\/span>\n  <\/button>\n<\/nav>\n<div class="container">\n  <div class="row">\n    <div class="col-md-2">\n      <p>My menu will go here!<\/p>\n    <\/div>\n    <div class="col-md-10">\n      <div class="content" role="main">\n        <!-- Main Content -->\n        <p>My content shall be here<\/p>\n        <router-outlet><\/router-outlet>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
Now we have a nice little page that should look something like this.<\/p>\n\n\n\n
\"\"
Basic structure<\/figcaption><\/figure>\n\n\n\n
We don’t have menu or content yet, only our text placeholders. So why don’t we create a menu component with the ng command. Go to your root project folder and type<\/p>\n\n\n
\nng generate component listMenu\n<\/pre><\/div>\n\n\n
We should now have a new folder containing the component. Open the list-menu.component.html<\/strong> and add some links! Here is where we can declare links to be active with the routing of our Angular application which is the whole purpose of this tutorial post. Replace all the sample code or text from the list-menu.component.html and replace it with the following<\/p>\n\n\n
\n<div class="menu-area">\n    <h3>Sections<\/h3>\n    <div class="list-group">\n        <a [routerLinkActiveOptions]="{exact: true}" routerLinkActive="active" [routerLink]="['']"\n            class="list-group-item list-group-item-action">Home<\/a>\n    <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
Here is where the magic happens. Whenever the person is in the routing path that is matching with the routerLink<\/strong> path this will get an active class because of the routerLinkActive<\/strong> equals to active<\/strong>. So [routerLink]=”[”]<\/strong> means that if we are browsing at the home page we will get the active class for this element, this link. The routerLinkActiveOptions exact true <\/strong>tells us the path must match exactly.<\/p>\n\n\n\n
Now we have some styling on top of this too. The active class doesn’t do anything without some declared CSS so let’s get that done as well!<\/p>\n\n\n\n
Open the CSS file for the component, list-menu.component.css<\/strong> and add<\/p>\n\n\n
\n.dropdown\n{\n    font-size: 20px;\n}\n.active\n{\n    z-index: 2;\n    color: #fff;\n    background-color: #007bff;\n    border-color: #007bff;\n}\n.menu-area\n{\n    padding:20px;\n}\n<\/pre><\/div>\n\n\n
Great we got this menu component ready to go! We can’t see it anywhere, so let’s add it to our main app component so we will always see it. Open app.component.html<\/strong> and add it.<\/p>\n\n\n
\n<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">\n  <a class="navbar-brand" href="http:\/\/fileidea.com">FileIdea.com<\/a>\n  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"\n    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">\n    <span class="navbar-toggler-icon"><\/span>\n  <\/button>\n<\/nav>\n<div class="container">\n  <div class="row">\n    <div class="col-md-2">\n      <app-list-menu><\/app-list-menu>\n    <\/div>\n    <div class="col-md-10">\n      <div class="content" role="main">\n        <!-- Main Content -->\n        <p>My content shall be here<\/p>\n        <router-outlet><\/router-outlet>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
\"\"
Result after adding the component into the app component<\/figcaption><\/figure>\n\n\n\n
Okay we added it and should now be able to see it in our home page. See that the link is highlighted? This is because we are http:\/\/localhost:4200\/ which has the path “”. Let’s add another component which will work as another page on another routing.<\/p>\n\n\n
\nng generate component awesomeStuff\n<\/pre><\/div>\n\n\n
Another component as been generated! Now you can add whatever you want into the awesomeStuff component, that is not important for now. I will just add this.<\/p>\n\n\n
\n<h3>Awesome stuff<\/h3>\n<p>This is something really.<\/p>\n<\/pre><\/div>\n\n\n
Now instead of adding it into the app component directly, we will open up our routing file app-routing.module.ts<\/strong>. There we will add this component to a new path. Below you can see the highlighted new path I added to the routes array.<\/p>\n\n\n
\nimport { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\nimport { AwesomeStuffComponent } from '.\/awesome-stuff\/awesome-stuff.component';\n\nconst routes: Routes = [\n  { path: 'awesome-stuff', component: AwesomeStuffComponent },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n\n<\/pre><\/div>\n\n\n
Great we got a new component for our routes! Now open up your menu component list-menu.component.html<\/strong> and add a new link just the same way you did last time but with the path we just added. Now my list-menu.component.html looks like this. See the highlight of what I added here.<\/p>\n\n\n
\n<div class="menu-area">\n    <h3>Sections<\/h3>\n    <div class="list-group">\n        <a [routerLinkActiveOptions]="{exact: true}" routerLinkActive="active" [routerLink]="['']"\n            class="list-group-item list-group-item-action">Home<\/a>\n            <a [routerLinkActiveOptions]="{exact: true}" routerLinkActive="active" [routerLink]="['awesome-stuff']"\n            class="list-group-item list-group-item-action">Awesome Stuff<\/a>\n    <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
 Awesome stuff has been linked. Now you should have a nice little app where you can visiting different links and they will get highlighted if you are at that location. <\/p>\n\n\n\n
Now can also remove the html placeholder <p>My content shall be here<\/p> from the app.component.html<\/strong> page since it doesn’t serve a purpose anymore. <\/p>\n\n\n\n
Now to avoid the complete whiteness when visiting http:\/\/localhost:4200\/ we can add a component which will serve as the home component into our routing. Let’s add a new component that will be the welcoming content. <\/p>\n\n\n
\nng generate component home\n<\/pre><\/div>\n\n\n
Let’s add some html like we did before. <\/p>\n\n\n
\n<h3>Home<\/h3>\n<p>Welcome to FileIdea!<\/p>\n<\/pre><\/div>\n\n\n
Then go to routing again, and add this to the “” path.<\/p>\n\n\n
\nimport { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\nimport { AwesomeStuffComponent } from '.\/awesome-stuff\/awesome-stuff.component';\nimport { HomeComponent } from '.\/home\/home.component';\n\nconst routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'awesome-stuff', component: AwesomeStuffComponent },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n\n<\/pre><\/div>\n\n\n
I noticed that when I tested that col-md-2 might be a but small for the menu so increasing it to col-md-4 and setting the content to col-md-10 did the trick! This is just a small detail.<\/p>\n\n\n\n
And we are now done!  <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Showing the finished tutorial result of when visiting http:\/\/localhost:4200\/awesome-stuff, their menu links highlighted depending on what page-url you are in. Something that wasn’t clear from me from the start when starting with Angular was how to indicate that the page is active whenever you are on it. If you are at the homepage, the home … <\/p>\n
Continue reading “Create a page menu in Angular 10 with active routing with a Bootstrap Layout”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/235"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":2,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":1222,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/235\/revisions\/1222"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}