Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes

Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes

In this tutorial we'll learn, by example, how to use Bootstrap 4 and jQuery with Angular 10 to build professional UIs.

Angular 10 is the latest version of Angular, when writing this tutorial, and Bootstrap 4 is the latest version of Bootstrap — the most popular CSS framework. You can use Bootstrap and jQuery to create professional looking interfaces without being a CSS designer.

Note: Bootstrap 4 makes use of jQuery for implemeting many components that need DOM access. Bootstrap 5 will replace jQuery with plain JavaScript

In this tutorial, we'll particularly look at how to add Bootstrap 4 to Angular projects generated using Angular CLI 10.

In this part, we're going to style an example UI interface with Bootstrap 4, after installing and setting up the framework in the Angular 10 front-end.

In the previous tutorial we’ve:

  • Installed Angular CLI 10.
  • Generated a new front-end application using Angular CLI 10.
  • Created some UI components.

Different Ways to Integrate Bootstrap 4 with Angular 10

There are many ways to add Bootstrap 4 to Angular projects:

  • Installing bootstrap and jquery via npm and add adding scripts and styles to angular.json.
  • Importing bootstrap style and script files in src/index.html. You can use a bootstrap 4 CDN.
  • Installing bootstrap via npm and importing @import "~bootstrap/dist/css/bootstrap.css"; in src/styles.css.
  • Installing and using ng-bootstrap npm install --save @ng-bootstrap/ng-bootstrap: It's a library that contains native Angular components for Bootstrap’s markup and CSS styles. It's not dependent on jQuery or Bootstrap’s JavaScript.

How to Work with This Tutorial?

To complete this tutorial, you'll need to, either:

  • Start with the previous tutorial, which takes you from installing the Angular CLI 10 to calling the RESTful API
  • Clone the font-end project from GitHub and follow the steps in the previous tutorial for setting up the project.
  • Directly follow the steps to integrate Bootstrap 4 in your own Angular 10 project.

How to add Bootstrap 4 to your Angular 10 Front-End?

After seeing different ways to add Bootstrap 4 to Angular 10, let's now style our Angular 10 front-end UI, built in the previous tutorial, with Bootstrap. We'll use the first approach i.e we'll install bootstrap from npm and then we'll include bootstrap.css CSS file, jQuery and Popover.js

Installing Bootstrap 4 and jQuery

Head over to your project, you created in the previous tutorial, navigate inside your Angular 10 front-end application:

$ cd frontend

Next, install bootstrap and jquery from npm using:

$ npm install --save bootstrap jquery

Adding Bootstrap 4 to Angular CLI 10

Next, open angular.json. You should similar content to the following:

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
    "crmapp": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
        "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
        "outputPath": "dist/crmapp",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
            "src/favicon.ico",
            "src/assets"
        ],
        "styles": [
            "src/styles.css"
        ],
        "scripts": []
        },

...
},
"defaultProject": "crmapp"
}

Under projects -> architect -> build -> scripts add node_modules/jquery/dist/jquery.min.js and node_modules/bootstrap/dist/js/bootstrap.min.js:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Under projects -> architect -> build -> styles add node_modules/bootstrap/dist/css/bootstrap.min.css:

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

That's it. You can now use Bootstrap 4 in your Angular 10 front-end application just like you would normally do.

Styling Angular 10 Components with Bootstrap 4

Let's take an example. Go ahead and open src/app/app.component.html and update it to add a Bootstrap navigation bar:

<nav  class="navbar navbar-expand-lg navbar-light bg-light">
    <a  class="navbar-brand"  href="#">Angular CRM</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"  id="navbarSupportedContent">
    <ul  class="navbar-nav mr-auto">
        <li  class="nav-item active">
        <a  class="nav-link"  href="#">Home <span  class="sr-only">(current)</span></a>
        </li>
        <li  class="nav-item dropdown">
        <a  class="nav-link dropdown-toggle"  href="#"  id="navbarDropdown"  role="button"  data-toggle="dropdown"  aria-haspopup="true"  aria-expanded="false">
        Actions
        </a>
        <div  class="dropdown-menu"  aria-labelledby="navbarDropdown">
        <a  class="dropdown-item" [routerLink]="'/accounts'"> Accounts </a>
        <a  class="dropdown-item" [routerLink]="'/create-account'"> Create Account </a>
        <div  class="dropdown-divider"></div>
        <a  class="dropdown-item" [routerLink]="'/contacts'"> Contacts </a>
        <a  class="dropdown-item" [routerLink]="'/create-contact'"> Create Contact </a>
        <div  class="dropdown-divider"></div>
        <a  class="dropdown-item" [routerLink]="'/leads'"> Leads </a>
        <a  class="dropdown-item" [routerLink]="'/create-lead'"> Create Lead </a>
        <div  class="dropdown-divider"></div>
        <a  class="dropdown-item" [routerLink]="'/opportunities'"> Opportunities </a>
        <a  class="dropdown-item" [routerLink]="'/create-opportunity'"> Create Opportunity </a>
        </div>
        </li>
</ul>
</div>
</nav>
<div  class="container-fluid">
    <router-outlet></router-outlet>
</div>

Now, let's style contact list component. Open src/app/contact-list.component.html and add:

<h1>
My Contacts
</h1>
<div>
<table  class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tr *ngFor="let contact of contacts">
    <td> {{ contact.first_name }} </td>
    <td> {{ contact.last_name }} </td>
    <td> {{ contact.phone }} </td>
    <td> {{ contact.email }} </td>
    <td> {{ contact.address }} </td>
</tr>
</table>
</div>

This is a screen-shot of the result after adding Bootstrap 4 classes:

Angular 10 and Bootstrap 4 tutorial

Conclusion

In this tutorial, we've seen different ways you can use if you want to add Bootstrap 4/jQuery to your project and then we have seen by example how to add Bootstrap 4 to our Angular 10 front-end application generated with Angular CLI.


  • Author: Techiediaries Team


Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 9 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9
Build an Angular 9/8 CRUD Example & Tutorial
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS
Angular 8/7 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor)