So, let’s start.<\/p>\n
<\/a>Create a Navigation Menu<\/h2>\nSo, let’s start by creating a new Menu component:<\/p>\n
ng g component menu --skip-tests<\/code><\/p>\nWe are going to use Bootstrap classes to implement the navigation menu within the menu.component.html<\/code> file:<\/p>\n<div class=\"row\">\r\n <div class=\"col\">\r\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\r\n <div class=\"container-fluid\">\r\n <a class=\"navbar-brand\" href=\"#\">Account-Owner Home<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseNav\"\r\n aria-controls=\"collapseNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"collapse navbar-collapse\" id=\"collapseNav\">\r\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Owner Actions <\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Account Actions <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <\/div>\r\n<\/div><\/pre>\nCurrently, we are not going to modify the menu.component.ts<\/code> file.<\/p>\nBut, we are going to change our app.component.html<\/code> file:<\/p>\n<div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <app-menu><\/app-menu>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <app-home><\/app-home>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nNow, we can start our angular project by typing with ng serve -o<\/code>.<\/p>\nAs soon as the project runs, we are going to see our menu on the screen:<\/p>\n
![\"Angular](\"https:\/\/code-maze.com\/wp-content\/uploads\/2022\/04\/02-Navigation-menu.png\")
<\/a><\/p>\nThere it is.\u00a0<\/p>\n
Add Collapse Functionality to the NavBar<\/h2>\n
Right now, if we shrink our screen, we will be able to see the hamburger button, which once we click on it, should show our menu items. But it doesn’t because we didn’t install all the JavaScript parts for Bootstrap. And we don’t want to.<\/p>\n
What we want is to use ngx-bootstrap as much as we can with all the components it provides for us.\u00a0<\/p>\n
That said, we are going to use the Collapse component from ngx-bootstrap to enable our collapsable menu.<\/p>\n
So, let’s first import the component into the app.module<\/code> file:<\/p>\nimport { CollapseModule } from 'ngx-bootstrap\/collapse';\r\n\r\n...\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n HomeComponent,\r\n MenuComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n BrowserAnimationsModule,\r\n CollapseModule.forRoot()\r\n ],<\/pre>\nIn this file, we can also notice a MenuComponent<\/code> inside the declarations<\/code> array. It was imported earlier during the creation of the navigation component.<\/p>\nThen, we are going to add one property inside the menu.component.ts<\/code> file:<\/p>\nexport class MenuComponent implements OnInit {\r\n isCollapsed: boolean = false;\r\n \r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}<\/pre>\nAnd finally, we are going to modify our NavBar HTML code:<\/p>\n
<div class=\"row\">\r\n <div class=\"col\">\r\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\r\n <div class=\"container-fluid\">\r\n <a class=\"navbar-brand\" href=\"#\">Account-Owner Home<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" (click)=\"isCollapsed = !isCollapsed\"\r\n [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"collapseNav\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"collapse navbar-collapse\" id=\"collapseNav\" [collapse]=\"!isCollapsed\" [isAnimated]=\"true\">\r\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Owner Actions <\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Account Actions <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <\/div>\r\n<\/div><\/pre>\nHere we add the (click)<\/code> event, which will change the isCollapsed<\/code> property state each time we click the hamburger button. Also, pay attention that the aria-controls<\/code> attribute must have the same id value as our div below it. Additionally, in the mentioned div, we set the value for the [collapse]<\/code> selector to indicate the visibility of our content and set the animation to true by using the [isAnimated] input.<\/p>\nThat is all. Now we can shrink the screen and once the hamburger button appears, we can click on it and see our menu items.<\/p>\n
<\/a>Configure Angular Routing<\/h2>\nTo enable navigation between all the pages inside this project, we need to configure the Angular routing. The routing module is already created for us since we asked for it during the project creation.<\/p>\n
We can see that in the app.module.ts<\/code> file:<\/p>\nimport { AppRoutingModule } from '.\/app-routing.module';\r\n\r\n...\r\n\r\nimports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n BrowserAnimationsModule,\r\n CollapseModule.forRoot()\r\n ],<\/pre>\nThe AppRoutingModlue<\/code> is the module responsible for the Angular routing.<\/p>\nNow, all we have to do is to modify the app-routing.module.ts<\/code> file:<\/p>\nimport { HomeComponent } from '.\/home\/home.component';\r\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { RouterModule, Routes } from '@angular\/router';\r\n\r\nconst routes: Routes = [\r\n { path: 'home', component: HomeComponent }, \r\n { path: '', redirectTo: '\/home', pathMatch: 'full' }\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }<\/pre>\nSo, we add two routes inside the routes<\/code> array. This routes<\/code> array is already provided inside the RouterModule.forRoot<\/code> function to define routes for our application.<\/p>\nWhen we create more than one module inside the application, we can use the forRoot()<\/code> function provided by the RouterModule<\/code>, only in the main(root) module.\u00a0In all other modules, we must use the forChild()<\/code> function.\u00a0<\/span>The forRoot()<\/code> function accepts an array of objects as a parameter. Every element of that array consists of the path and the target component for that path. So, the path: home<\/code> means that on the http:\/\/localhost:4200\/home<\/code> address, we are going to serve the HomeComponent<\/code>. The other line inside the routes<\/code> array is the default redirection to the home page.<\/p>\nNow, to enable content from the routes, we have to modify the app.component.html<\/code>:<\/p>\n<div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <app-menu><\/app-menu>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <router-outlet><\/router-outlet>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nThe router-outlet<\/strong> is a container for the routing content. So basically, all the content that exists on the address we are routing to is going to be presented inside that container.<\/p>\nNow if we navigate to the localhost:4200<\/code> we should be able to see the same result as before, but this time, we are providing our home component through the <router-outlet><\/code> and not <app-home><\/code> selector.\u00a0<\/p>\nAdditionally, if we click on any other menu item, we will be automatically redirected to the home page.<\/p>\n
<\/a>Styling Links<\/h2>\nIf we want to style your active link in the menu, we have to change our <a> tag:<\/p>\n
<a class=\"navbar-brand\" [routerLink]=\"['\/home']\" routerLinkActive=\"active\" \r\n [routerLinkActiveOptions]=\"{exact: true}\">Account-Owner Home<\/a><\/pre>\nWith the routerLinkActive<\/code>,<\/strong> we are setting up the CSS class name we want to use to style the active link. Furthermore, the routerLinkActiveOptions<\/code> is going to allow us to add a class only if there is an exact match of the link and the URL. Lastly, we are not using the href<\/code> attribute anymore for navigation. Instead, we are using the [routerLink]<\/code> directive to navigate to our routing path.<\/p>\nNow in the menu.component.css<\/code> file, we are going to add the .active<\/code> class:<\/p>\n.active{ \r\n font-weight: bold; \r\n font-style: italic; \r\n color: #fff; \r\n}<\/pre>\nExcellent. If we inspect our application, we are going to see that the Account-Owner Home<\/code> link is now white and bold.<\/p>\n<\/a>Create the Not-Found Component<\/h2>\nWe have working navigation.<\/p>\n
To complete the Angular routing part of this post, we are going to create a component with the name not-found<\/code>. The application is going to redirect a user to this component when they type a none existing route in the URL.<\/p>\nTo do that, let’s execute the familiar command:<\/p>\n
ng g component error-pages\/not-found --skip-tests<\/code><\/p>\nThis is the folder structure:<\/p>\n
![\"not-found](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/05\/03-not-found-folder-structure.png\")
<\/a><\/p>\nLet’s modify the not-found.component.ts<\/code> file:<\/p>\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-not-found',\r\n templateUrl: '.\/not-found.component.html',\r\n styleUrls: ['.\/not-found.component.css']\r\n})\r\nexport class NotFoundComponent implements OnInit {\r\n notFoundText: string = `404 SORRY COULDN'T FIND IT!!!`;\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}<\/pre>\nWe have to pay attention to the string value of the notFoundText<\/code> property. We are not using apostrophes but backticks (`). All the content inside the backticks will be considered as a string, even the apostrophe sign in the string.<\/p>\nTo continue, let’s modify the not-found.component.html<\/code> file:<\/p>\n<p>\r\n {{notFoundText}}\r\n<\/p><\/pre>\nAlso, we need to modify not-found.component.css<\/code> file:<\/p>\np {\r\n font-weight: bold;\r\n font-size: 50px;\r\n text-align: center;\r\n color: #f10b0b;\r\n}<\/pre>\nFinally, we are going to change the content inside the routes<\/code> array:<\/p>\nconst routes: Routes = [\r\n { path: 'home', component: HomeComponent },\r\n { path: '404', component: NotFoundComponent }, \r\n { path: '', redirectTo: '\/home', pathMatch: 'full' },\r\n { path: '**', redirectTo: '\/404', pathMatch: 'full' }\r\n];<\/pre>\nThere are two changes here. With the first change, we declare the 404<\/code> path and assign the NotFoundComponent<\/code>component to that path. Now our component is going to be visible on the localhost:4200\/404<\/code>. The second change means that whenever we search for any route that doesn\u2019t match any of our defined routes, the application redirects us to the 404 page.<\/p>\nTyping\u00a0localhost:4200\/whatever<\/code>\u00a0<\/span>should return the not found page. Also, we may try to navigate to localhost:4200\/404, and the app will navigate us to the same page.<\/p>\n<\/a>Conclusion<\/h2>\nAs you might have noticed, creating the menu and using the routing in the angular project is pretty straightforward. Although we are not creating a large project, it is quite big enough to demonstrate\u00a0the usage, configuration, and routing of all the pages we currently have. Of course, we are going to create routes for all new pages that we introduce to our project.<\/p>\n
ng g component menu --skip-tests<\/code><\/p>\nWe are going to use Bootstrap classes to implement the navigation menu within the menu.component.html<\/code> file:<\/p>\n<div class=\"row\">\r\n <div class=\"col\">\r\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\r\n <div class=\"container-fluid\">\r\n <a class=\"navbar-brand\" href=\"#\">Account-Owner Home<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseNav\"\r\n aria-controls=\"collapseNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"collapse navbar-collapse\" id=\"collapseNav\">\r\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Owner Actions <\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Account Actions <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <\/div>\r\n<\/div><\/pre>\nCurrently, we are not going to modify the menu.component.ts<\/code> file.<\/p>\nBut, we are going to change our app.component.html<\/code> file:<\/p>\n<div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <app-menu><\/app-menu>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <app-home><\/app-home>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nNow, we can start our angular project by typing with ng serve -o<\/code>.<\/p>\nAs soon as the project runs, we are going to see our menu on the screen:<\/p>\n
<\/a><\/p>\nThere it is.\u00a0<\/p>\n
Add Collapse Functionality to the NavBar<\/h2>\n
Right now, if we shrink our screen, we will be able to see the hamburger button, which once we click on it, should show our menu items. But it doesn’t because we didn’t install all the JavaScript parts for Bootstrap. And we don’t want to.<\/p>\n
What we want is to use ngx-bootstrap as much as we can with all the components it provides for us.\u00a0<\/p>\n
That said, we are going to use the Collapse component from ngx-bootstrap to enable our collapsable menu.<\/p>\n
So, let’s first import the component into the app.module<\/code> file:<\/p>\nimport { CollapseModule } from 'ngx-bootstrap\/collapse';\r\n\r\n...\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n HomeComponent,\r\n MenuComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n BrowserAnimationsModule,\r\n CollapseModule.forRoot()\r\n ],<\/pre>\nIn this file, we can also notice a MenuComponent<\/code> inside the declarations<\/code> array. It was imported earlier during the creation of the navigation component.<\/p>\nThen, we are going to add one property inside the menu.component.ts<\/code> file:<\/p>\nexport class MenuComponent implements OnInit {\r\n isCollapsed: boolean = false;\r\n \r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}<\/pre>\nAnd finally, we are going to modify our NavBar HTML code:<\/p>\n
<div class=\"row\">\r\n <div class=\"col\">\r\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\r\n <div class=\"container-fluid\">\r\n <a class=\"navbar-brand\" href=\"#\">Account-Owner Home<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" (click)=\"isCollapsed = !isCollapsed\"\r\n [attr.aria-expanded]=\"!isCollapsed\" aria-controls=\"collapseNav\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"collapse navbar-collapse\" id=\"collapseNav\" [collapse]=\"!isCollapsed\" [isAnimated]=\"true\">\r\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Owner Actions <\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Account Actions <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <\/div>\r\n<\/div><\/pre>\nHere we add the (click)<\/code> event, which will change the isCollapsed<\/code> property state each time we click the hamburger button. Also, pay attention that the aria-controls<\/code> attribute must have the same id value as our div below it. Additionally, in the mentioned div, we set the value for the [collapse]<\/code> selector to indicate the visibility of our content and set the animation to true by using the [isAnimated] input.<\/p>\nThat is all. Now we can shrink the screen and once the hamburger button appears, we can click on it and see our menu items.<\/p>\n
<\/a>Configure Angular Routing<\/h2>\nTo enable navigation between all the pages inside this project, we need to configure the Angular routing. The routing module is already created for us since we asked for it during the project creation.<\/p>\n
We can see that in the app.module.ts<\/code> file:<\/p>\nimport { AppRoutingModule } from '.\/app-routing.module';\r\n\r\n...\r\n\r\nimports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n BrowserAnimationsModule,\r\n CollapseModule.forRoot()\r\n ],<\/pre>\nThe AppRoutingModlue<\/code> is the module responsible for the Angular routing.<\/p>\nNow, all we have to do is to modify the app-routing.module.ts<\/code> file:<\/p>\nimport { HomeComponent } from '.\/home\/home.component';\r\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { RouterModule, Routes } from '@angular\/router';\r\n\r\nconst routes: Routes = [\r\n { path: 'home', component: HomeComponent }, \r\n { path: '', redirectTo: '\/home', pathMatch: 'full' }\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }<\/pre>\nSo, we add two routes inside the routes<\/code> array. This routes<\/code> array is already provided inside the RouterModule.forRoot<\/code> function to define routes for our application.<\/p>\nWhen we create more than one module inside the application, we can use the forRoot()<\/code> function provided by the RouterModule<\/code>, only in the main(root) module.\u00a0In all other modules, we must use the forChild()<\/code> function.\u00a0<\/span>The forRoot()<\/code> function accepts an array of objects as a parameter. Every element of that array consists of the path and the target component for that path. So, the path: home<\/code> means that on the http:\/\/localhost:4200\/home<\/code> address, we are going to serve the HomeComponent<\/code>. The other line inside the routes<\/code> array is the default redirection to the home page.<\/p>\nNow, to enable content from the routes, we have to modify the app.component.html<\/code>:<\/p>\n<div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <app-menu><\/app-menu>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <router-outlet><\/router-outlet>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nThe router-outlet<\/strong> is a container for the routing content. So basically, all the content that exists on the address we are routing to is going to be presented inside that container.<\/p>\nNow if we navigate to the localhost:4200<\/code> we should be able to see the same result as before, but this time, we are providing our home component through the <router-outlet><\/code> and not <app-home><\/code> selector.\u00a0<\/p>\nAdditionally, if we click on any other menu item, we will be automatically redirected to the home page.<\/p>\n
<\/a>Styling Links<\/h2>\nIf we want to style your active link in the menu, we have to change our <a> tag:<\/p>\n
<a class=\"navbar-brand\" [routerLink]=\"['\/home']\" routerLinkActive=\"active\" \r\n [routerLinkActiveOptions]=\"{exact: true}\">Account-Owner Home<\/a><\/pre>\nWith the routerLinkActive<\/code>,<\/strong> we are setting up the CSS class name we want to use to style the active link. Furthermore, the routerLinkActiveOptions<\/code> is going to allow us to add a class only if there is an exact match of the link and the URL. Lastly, we are not using the href<\/code> attribute anymore for navigation. Instead, we are using the [routerLink]<\/code> directive to navigate to our routing path.<\/p>\nNow in the menu.component.css<\/code> file, we are going to add the .active<\/code> class:<\/p>\n.active{ \r\n font-weight: bold; \r\n font-style: italic; \r\n color: #fff; \r\n}<\/pre>\nExcellent. If we inspect our application, we are going to see that the Account-Owner Home<\/code> link is now white and bold.<\/p>\n<\/a>Create the Not-Found Component<\/h2>\nWe have working navigation.<\/p>\n
To complete the Angular routing part of this post, we are going to create a component with the name not-found<\/code>. The application is going to redirect a user to this component when they type a none existing route in the URL.<\/p>\nTo do that, let’s execute the familiar command:<\/p>\n
ng g component error-pages\/not-found --skip-tests<\/code><\/p>\nThis is the folder structure:<\/p>\n
<\/a><\/p>\nLet’s modify the not-found.component.ts<\/code> file:<\/p>\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-not-found',\r\n templateUrl: '.\/not-found.component.html',\r\n styleUrls: ['.\/not-found.component.css']\r\n})\r\nexport class NotFoundComponent implements OnInit {\r\n notFoundText: string = `404 SORRY COULDN'T FIND IT!!!`;\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}<\/pre>\nWe have to pay attention to the string value of the notFoundText<\/code> property. We are not using apostrophes but backticks (`). All the content inside the backticks will be considered as a string, even the apostrophe sign in the string.<\/p>\nTo continue, let’s modify the not-found.component.html<\/code> file:<\/p>\n<p>\r\n {{notFoundText}}\r\n<\/p><\/pre>\nAlso, we need to modify not-found.component.css<\/code> file:<\/p>\np {\r\n font-weight: bold;\r\n font-size: 50px;\r\n text-align: center;\r\n color: #f10b0b;\r\n}<\/pre>\nFinally, we are going to change the content inside the routes<\/code> array:<\/p>\nconst routes: Routes = [\r\n { path: 'home', component: HomeComponent },\r\n { path: '404', component: NotFoundComponent }, \r\n { path: '', redirectTo: '\/home', pathMatch: 'full' },\r\n { path: '**', redirectTo: '\/404', pathMatch: 'full' }\r\n];<\/pre>\nThere are two changes here. With the first change, we declare the 404<\/code> path and assign the NotFoundComponent<\/code>component to that path. Now our component is going to be visible on the localhost:4200\/404<\/code>. The second change means that whenever we search for any route that doesn\u2019t match any of our defined routes, the application redirects us to the 404 page.<\/p>\nTyping\u00a0localhost:4200\/whatever<\/code>\u00a0<\/span>should return the not found page. Also, we may try to navigate to localhost:4200\/404, and the app will navigate us to the same page.<\/p>\n<\/a>Conclusion<\/h2>\nAs you might have noticed, creating the menu and using the routing in the angular project is pretty straightforward. Although we are not creating a large project, it is quite big enough to demonstrate\u00a0the usage, configuration, and routing of all the pages we currently have. Of course, we are going to create routes for all new pages that we introduce to our project.<\/p>\n