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';
  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';
  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';
  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';
  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. padding: 20px;
  3. width: 98%;
  4. background-color: #dae246;
  5. height: 120px;
  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. }
  9. .dropdown {
  10. position: relative;
  11. display: inline-block;
  12. }
  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.