CREATING ANGULAR APPLICATION AND ADDING

BOOTSTRAP
***Note : Good Internet connection is required****

Open VS Code

Open terminal (Keyboard shortcut : ctrl + shift + ` )

- set the terminal path to desired location

Enter the below command to generate Angular project

ng new app

Add Angular routing by typing “y” and press enter

Select SCSS stylesheet by using Arrow keys and press enter

- Angular application with the name “app” will be created.

Navigate to the workspace folder, such as app, using following command

cd app

Run the following command to check if the application is created successfully or not

ng serve --open

After running the above command if the following page is opened in your chrome
browser then the app is successfully created
TO ADD BOOTSTRAP
USE THE FOLLOWING COMMAND AND PRESS ENTER

ng add @ng-bootstrap/ng-bootstrap

Enter “Y” and press enter

Bootstrap is now added

Now generate Required Components for the application By using

Syntax:
ng generate component component_name

For this application we need

ng generate component home

Similarly when the below commands are executed

ng generate component header

ng generate component footer

ng generate component add-player

ng generate component update-player

ng generate component delete-player

ng generate component view-players

ng generate component view-player

In src/app all the components will be created

In src/app
Open app-routing.module.ts
-Import all the components,except header and footer
 -set route path for each component
--code--
app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddPlayerComponent } from './add-player/add-
player.component';
import { DeletePlayerComponent } from './delete-player/delete-
player.component';
import { HomeComponent } from './home/home.component';
import { UpdatePlayerComponent } from './update-player/update-
player.component';
import { ViewPlayerComponent } from './view-player/view-
player.component';
import { ViewPlayersComponent } from './view-players/view-
players.component';

const routes: Routes = [{
  path: '',
  component: HomeComponent
},
{
  path: 'add',
  component: AddPlayerComponent
},
{
  path: 'view',
  component: ViewPlayersComponent
},
{
  path: 'view/:id',
  component: ViewPlayerComponent
},
{
  path: 'delete',
  component: DeletePlayerComponent
},
{
  path: 'update',
  component: UpdatePlayerComponent
}];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
In src/app
Open app.component.html
-Clear all the existing code
-copy and paste the following code

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

In src/app/header
Open header.component.html
-Clear all the existing code
-copy and paste the following code

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">MY App</a>
    <button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" i
d="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" routerLink="../">Home <span clas
s="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/add">Add</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/update">Update</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/delete">Delete</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/view">View</a>
        </li>
      </ul>
    </div>
  </nav>

In terminal Run the following command

the following page will be opened in your chrome browser