How to install Bootstrap 5 in Angular 17... Standalone components Including css,js & icons.

#webdev #beginners #angular #frontend

Sometimes as a beginner in angular you wonder why so many tutorials in youtube and paid courses skip to include the bootstrap js and bootstrap-icons,while in realities you need all this goodness of bootstrap to build a powerful user interface for production purposes.

That has created a learning gap in the community of angular developers for easy on boarding for a beginner to the UI tools like bootstrap.

Tooling make our life a bit easier rather than spending time writing basic functionality like toggles and reactivities that does n't need business logic.

One will be thinking how can i use bootstrap via installation process so my app will not wait for network CDN LINKS to load the things that my application needs ?.

If that is your case in your angular journey we will show you a beginner friendly way to do it step by step.

We assume you are familiar with your basics like HTML,CSS,JAVASCRIPT,TYPSCRIPT & ANUGULAR BASICS.
That out of the way let's jump into it.
please note you must have node installed alrady for you to run the Angular cli.
for node download here is the link:

Step 1 : To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Step 2 : Run the CLI command ng new to create your workspace project name eg name my-app, as shown here:

ng new my-app

Step 3 : Navigate to the workspace folder, such as my-app,Run the following command:

cd my-app

ng serve --open

Step 4 : The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

Congrats: my-app is runing in localhost.

On your keyboard Ctrl + c to stop the server.

Step 5 : To install bootstrap run this command in your terminal.

ng add @ng-bootstrap/ng-bootstrap

Just say yes by hiting your enter key on your keyboard then angular will configure everything for you.

Step 6 : To install bootstrap-icons run this command in your terminal.

npm i bootstrap-icons

Step 7 : Include the bootstrap-icons in your global styles.css to use it like this

file name : styles.css

@import "bootstrap-icons";

on top of your styles.css.

Step 8 : Include the NgbModule in your app or standalone components like this.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

In my case file name : app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet,NgbModule,RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})


export class AppComponent {
  title = 'my-app';
}

Congratulations your are done enjoy!!! .

We can now build an example test project to see if everything is working well.

Let's build a responsive navbar featuring those toggles,icons in angular way.

go to your src/app/app.component.html
add the following code.


<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
    <div class="container-fluid">
        <a class="navbar-brand" [routerLink]="'.'" (click)="isMenuCollapsed = true">Logo</a>

        <!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
    <div class="p-2">
        <button class="navbar-toggler  " type="button" (click)="isMenuCollapsed = !isMenuCollapsed">&#9776;</button>
    </div>
        <!-- Step 2: Add the ngbCollapse directive to the element below. -->
        <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse ">
            <ul class="navbar-nav ">
                <li class="nav-item active">
                    <!-- Step 4: Close the menu when a link is clicked. -->
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Testimonial</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" [routerLink]="'.'" (click)="isMenuCollapsed = true">Contact-us</a>
                </li>



            </ul>
    <div class=" col-md-7  text-end p-2">
        <button type="button" class="btn btn-outline-light me-2 ">
            <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">
                <i class="bi bi-person"></i> Login</a>
        </button>
        <button type="button" class="btn btn-warning ">
            <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">
                <i class="bi bi-person-add"></i> Sign-Up</a>
        </button>
        </div>
        </div>
    </div>
</nav>


    <h1 class="test mt-5 p-5 text-center">
        icons work {{title}}<i class="bi bi-stopwatch p-2"></i></h1>


<div class="row">
    <div class="col text-center">
        <div ngbDropdown class="d-inline-block">
            <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
                Toggle dropdown
            </button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem>Action - 1</button>
                <button ngbDropdownItem>Another Action</button>
                <button ngbDropdownItem>Something else is here</button>
            </div>
        </div>
    </div>



<router-outlet></router-outlet>

At this stage your will be geting some typscript warning so to make it go away go to your app.component.ts
to add the following.

isMenuCollapsed: any;

app.component.ts will look like this:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, 
            RouterOutlet,
            NgbModule,
            RouterLink
            ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})


export class AppComponent {
  title = 'my-app';
  isMenuCollapsed: any;


}

Congratulations the output should look like this both desktop and mobile version: