Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (angular 8 project user component routing) Part 11

Angular 8 project user component routing

In this tutorial we will cover angular 8 project user component routing .In the previous tutorial, we created related components from the user section and global navigation.

you can use following step for angular project routeing

  1. Create important  component for required your angular 8 project
  2. open app-routing.module.ts file
  3. import all components on app-routing.module.ts file

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example/example.component';

/*Project Related Component */
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { AuthenticationComponent } from './authentication/authentication.component';
import { RoomBookingRequestComponent } from './room-booking-request/room-booking-request.component';
import { FeedbackComp2onent } from './feedback/feedback.component';

const routes: Routes = [
  {'path':'example','component':ExampleComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

4. create routeing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example/example.component';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { AuthenticationComponent } from './authentication/authentication.component';
import { RoomBookingRequestComponent } from './room-booking-request/room-booking-request.component';
import { FeedbackComponent } from './feedback/feedback.component';

const routes: Routes = [
  {'path':'example','component':ExampleComponent},
  
  /* Project Routeing */  
  {'path':'','component':HomeComponent},
  {'path':'about','component':AboutComponent},
  {'path':'contact','component':ContactComponent},
  {'path':'auth','component':AuthenticationComponent},
  {'path':'room-booking-request','component':RoomBookingRequestComponent},
  {'path':'feedback','component':FeedbackComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

5. Link routeing on global navigation
6. open app.component.html

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">

        <div class="container">

            <a class="navbar-brand" routerLink="/">HMS</a>

            <ul class="navbar-nav">

                <li class="nav-item">

                    <a class="nav-link" routerLink="/">Home</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/contact">Contact</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/about">About</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/room-booking-request">Room Booking</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/feedback">Feedback</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/auth">Login</a>

                </li>

            </ul>

            </div>

    </nav>

 

Complete Code 

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example/example.component';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { AuthenticationComponent } from './authentication/authentication.component';
import { RoomBookingRequestComponent } from './room-booking-request/room-booking-request.component';
import { FeedbackComponent } from './feedback/feedback.component';

const routes: Routes = [
  {'path':'example','component':ExampleComponent},

  {'path':'','component':HomeComponent},
  {'path':'about','component':AboutComponent},
  {'path':'contact','component':ContactComponent},
  {'path':'auth','component':AuthenticationComponent},
  {'path':'room-booking-request','component':RoomBookingRequestComponent},
  {'path':'feedback','component':FeedbackComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

app.component.html

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">

        <div class="container">

            <a class="navbar-brand" routerLink="/">HMS</a>

            <ul class="navbar-nav">

                <li class="nav-item">

                    <a class="nav-link" routerLink="/">Home</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/contact">Contact</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/about">About</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/room-booking-request">Room Booking</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/feedback">Feedback</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" routerLink="/auth">Login</a>

                </li>

            </ul>

            </div>

    </nav>

    <div class="page_container">

    <router-outlet></router-outlet>

    </div>

    <div class="footer">

        <div class="row">

            <div class="col-sm-4 subscribe_box">

                <p class="footer_text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

                <h4 class="footer_text">For Letest Update Subscribe Now</h4>

                <input type="email" name="email" class="form-control" placeholder="E-Mail" />

            </div>

            <div class="col-sm-4">

                <h4 class="text-center mt-4 mb-4 footer_text">Contact Information</h4>

                <table>

                    <tr>

                        <td class="contect_tab footer_text">E-Mail</td>

                        <td class="contect_tab footer_text">example@gmail.com</td>

                    </tr>

                    <tr>

                        <td class="contect_tab footer_text">Mobile No</td>

                        <td class="contect_tab footer_text">999999999</td>

                    </tr>

                    <tr>

                        <td class="contect_tab footer_text">Address</td>

                        <td class="contect_tab footer_text">Your Address</td>

                    </tr>

                </table>

            </div>

            <div class="col-sm-4">C</div>

        </div>

    </div>

 

 

 

Tutorial Topics