Components, Router Outlet, Menus And Button Click Event In Angular 6 - Part Two

Introduction
 
In this second part of my Angular 6 article series, we are going to learn how to create components, display a component using router outlet, show a menu list on mouseover, and load a component on a button click event.
 
Before moving to the environment set up, please read my previous article:
PART 1 - How to create components and display a component using router outlet.
 
Step 1
 
Now, right-click on the components folder, click on "Open in terminal". Now, your terminal opens in Visual Studio Code. I am going to create three different components for three different menus, i.e., C#, ASP.NET MVC, Contact Us like csharp, mvc, contactus.
 
To create a component, use the below syntax.
  1. ng g c Your-Component-Name  
From the above syntax, I am creating components.
 
Components, Router Outlet, Menus & Button click event in Angular 6 
 
After successful creation, each entry gets added into an app.module.ts file. For more information, see the below file.
 
app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3.     
  4. import { AppComponent } from './app.component';    
  5. import { HeaderComponent } from './Component/header/header.component';    
  6. import { FooterComponent } from './Component/footer/footer.component';    
  7. import { CsharpComponent } from './Component/csharp/csharp.component';    
  8. import { MvcComponent } from './Component/mvc/mvc.component';    
  9. import { ContactusComponent } from './Component/contactus/contactus.component';    
  10.     
  11. @NgModule({    
  12.   declarations: [    
  13.     AppComponent,    
  14.     HeaderComponent,    
  15.     FooterComponent,    
  16.     CsharpComponent,    
  17.     MvcComponent,    
  18.     ContactusComponent    
  19.   ],    
  20.   imports: [    
  21.     BrowserModule    
  22.   ],    
  23.   providers: [],    
  24.   bootstrap: [AppComponent]    
  25. })    
  26. export class AppModule { }    
Step 2
 
Now, add the below line in app.module.ts.
  1. import { RouterModule } from '@angular/router';  
Router imports
 
The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular Core. It is in its own library package, @angular/router. Import what you need from it as you would from any other Angular package.
 
Also, import the path and component names as below.
 
complete app.module.ts file 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5. import { RouterModule } from '@angular/router';  
  6. import { HeaderComponent } from './Component/header/header.component';  
  7. import { FooterComponent } from './Component/footer/footer.component';  
  8. import { CsharpComponent } from './Component/csharp/csharp.component';  
  9. import { MvcComponent } from './Component/mvc/mvc.component';  
  10. import { ContactusComponent } from './Component/contactus/contactus.component';  
  11.   
  12. @NgModule({  
  13.   declarations: [  
  14.     AppComponent,  
  15.     HeaderComponent,  
  16.     FooterComponent,  
  17.     CsharpComponent,  
  18.     MvcComponent,  
  19.     ContactusComponent  
  20.   ],  
  21.   imports: [  
  22.     BrowserModule,  
  23.     RouterModule.forRoot([  
  24.       { path: 'csharp', component: CsharpComponent },  
  25.       {path: 'mvc', component: MvcComponent},  
  26.       {path: "contactus" , component:ContactusComponent}  
  27.      ]),  
  28.   ],  
  29.   providers: [],  
  30.   bootstrap: [AppComponent]  
  31. })  
  32. export class AppModule { }  
Step 3
 
Now, to redirect the appropriate component, use the below syntax and add this to the app.component.html page.
  1. <router-outlet></router-outlet>  
Router outlet
 
The RouterOutlet is a directive from the router library that is used as a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.
 
complete app.component.html file 
  1. <app-header></app-header>  
  2.    <router-outlet></router-outlet>  
  3. <app-footer></app-footer>  
Step 4
 
In each component, I am writing some dummy data:
 
csharp.component.html
  1. <p>  
  2.    csharp works!  
  3. </p>  
mvc.component.html
  1. <p>  
  2.    mvc works!  
  3. </p>  
contactus.component.html
  1. <p>  
  2.    contact us works!  
  3. </p>  
For a better look & feel, I am going to add some CSS in each component for the paragraph tag.
 
csharp.component.css
  1. p {  
  2.     padding20px;  
  3.     width98%;  
  4.     background-color#dae246;  
  5.     height120px;  
  6. }   
To see the folder structure of our project, refer to the below image.
 
 Components, Router Outlet, Menus & Button click event in Angular 6
Now, run the application.
  1. ng serve -o  
Your output will look like this.
 
 Components, Router Outlet, Menus & Button click event in Angular 6
Now, click on the C# menu and you will get the output as below.
 
Components, Router Outlet, Menus & Button click event in Angular 6  
 Now, click on the ASP.NET MVC menu and you will get the  output as:
 
Components, Router Outlet, Menus & Button click event in Angular 6
PART 2  - Show a menu list on mouse over and redirect to components on menu click
 
Step 1
 
As we have header.component.html, I am going to create a dropdown list which contains menus. The user would like to open the drop-down menu list on mouseover of the button.
 
Below is the code to create a drop-down list in the header.component.html file.
 
Note
I have commented the old code for the time being.
 
Here is the code of the complete header.component.html file:
  1. <div style="text-align:Left">  
  2.     <img width="200" alt="CodderFunda Logo" src="http://coderfunda.com/wp-content/uploads/2018/02/logo2.png">  
  3. </div>  
  4. <!-- <ul>    
  5. <li><a routerLink="/csharp">C#</a></li>    
  6. <li><a routerLink="/mvc">ASP.NET MVC</a></li>    
  7. <li><a routerLink="/contactus">Contact</a></li>    
  8. </ul> -->  
  9. <h2>Hoverable Dropdown</h2>  
  10. <p>Move the mouse over the button to open the dropdown menu list.</p>  
  11. <div class="dropdown">  
  12.     <button class="dropbtn">Menu List</button>  
  13.     <div class="dropdown-content">  
  14.         <a routerLink="/csharp">C#</a>  
  15.         <a routerLink="/mvc">ASP.NET MVC</a>  
  16.         <a routerLink="/contactus">Contact</a>  
  17.     </div>  
  18. </div>  
  19. <p style="margin-top:15%"></p> 
Step 2
 
In header.component.css, by using a class, we are applying CSS and the mouseover effect.
  1. .dropbtn {  
  2.     background - color: #4CAF50;    
  3. color: white;    
  4. padding: 16px;    
  5. font-size: 16px;    
  6. border: none;    
  7. }    
  8.     
  9. .dropdown {    
  10. position: relative;    
  11. display: inline-block;    
  12. }    
  13.     
  14. .dropdown-content {    
  15. display: none;    
  16. position: absolute;    
  17. background-color: # f1f1f1;  
  18.     min - width: 160 px;  
  19.     box - shadow: 0 px 8 px 16 px 0 px rgba(0, 0, 0, 0.2);  
  20.     z - index: 1;  
  21. }.dropdown - content a {  
  22.         color: black;  
  23.         padding: 12 px 16 px;  
  24.         text - decoration: none;  
  25.         display: block;  
  26.     }.dropdown - content a: hover {  
  27.         background - color: #ddd;  
  28.     }.dropdown: hover.dropdown - content {  
  29.         display: block;  
  30.     }.dropdown: hover.dropbtn {  
  31.         background - color: #3e8e41;} 
Step 3
 
Now, run the application.
 
Components, Router Outlet, Menus & Button click event in Angular 6 
Now, take the mouse over to the menu. You will get the result as:
 
Components, Router Outlet, Menus & Button click event in Angular 6 
Now, click on the C# menu and you will get an output as -
 
Components, Router Outlet, Menus & Button click event in Angular 6 
PART 3 - Load specific component on button click event.
 
Step 1
 
Now, I am creating one component, i.e., Home. Use the following syntax.
  1. ng g c Home  
In home.component.html, create one input button with an onclick event as below.
 
home.component.html 
  1. <p> home works! </p>  
  2.    <input type="button" value="Go To MVC" (click)="onSubmit()" />  
  3.    <br>  
  4.    <p>  
  5. </p>  
Step 2
 
In the home.component.ts file, write the function for onclick event which will navigate to another component using a router:
  1. import {Router} from '@angular/router';  
After that, create an object of the router into a constructor.
 
Here is the complete code for the home.component.ts file.
  1. import {  
  2.     Component,  
  3.     OnInit  
  4. } from '@angular/core';  
  5. import {  
  6.     Router  
  7. } from '@angular/router';  
  8. @Component({  
  9.     selector: 'app-home',  
  10.     templateUrl: './home.component.html',  
  11.     styleUrls: ['./home.component.css']  
  12. })  
  13. export class HomeComponent implements OnInit {  
  14.     constructor(private router: Router, ) {}  
  15.     onSubmit() {  
  16.         this.router.navigate(['/mvc'])  
  17.     }  
  18.     ngOnInit() {}  
  19. }  
Step 3
 
Now, run the application and call the home component.
 
Components, Router Outlet, Menus & Button click event in Angular 6 
 
Click on "Go To MVC"  button and it will redirect you to the MVC component.
 
Components, Router Outlet, Menus & Button click event in Angular 6 
Summary
 
In this article, you learned how to create components, display a component using router outlet, show a menu list on mouseover, and load component on button click event.