Learn Angular

How to create your first website in Angular 10 -Part 3?

Angular 9, Angular 10

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to create your first website in Angular 10 -Part 3?

Here are the other parts of this post:

How to create your first website in Angular 10 -Part 1?

How to create your first website in Angular 10 -Part 2?

Angular 10 came. If you are new in angular 10 then please check below links:

Learn Angular

Angular Basic Tutorials

In Part 1 , you have seen Angular install and run on your machine. In this Part 2, I told you, how to add bootstrap and create your first html page. Now In this Part 3, I will tell you, how to create new components(like pages) and linking them with angular routing.

Angular create components and Angular routing
Angular create components and Angular routing

Here is the code snippet and please follow carefully:

1. After understanding the part 1 and part 2, you need to run below commands to create new components into your Angular 10 application:

ng g c dashboard

ng g c aboutus

2. After run the above command, you will below like folders into your angular 10 application:

you will see aboutus and dashboard into your angular 10 src/app folder

Angular create components
Angular create components

3. Now add below code into your app.module.ts file:

In this, we are adding routing related modules and create routes

...
import { Routes, RouterModule } from '@angular/router';
...

const appRoutes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'aboutus', component: AboutusComponent }
];
...

 imports: [
           ...
           RouterModule.forRoot(
             appRoutes,
            { enableTracing: true } // <-- debugging purposes only
           ) 
]

4. Now add below code into your app.component.html file:

Here is the simple html page with router links and when you will click on About Us and Dashboard links then you will see those pages data

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page In Angular 10</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/dashboard']">Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/aboutus']">About Us</a>
    </li>
  </ul>

</nav>
<div class="container mt-5 mb-5">
<router-outlet></router-outlet>
</div>

This is it and if you have any query then please do comment below. In part 4, I will add good looking template and make it work.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.