Home Angular 8 Angular 8 bootstrap popover working example

Angular 8 bootstrap popover working example

by therichpost
Published: Last Updated on 6 comments
How to make business template with Bootstrap 4 and Angular 9?

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 bootstrap popover working example.

Guy’s here is the updated version of this post for Angular 12 Bootstrap 5 Popover Working.

Angular 8 bootstrap popover working example
Angular 8 bootstrap popover working example

Angular and bootstrap combination is amazing.

Guys if you are new in angular 12 then please check this: Angular 12 Tutorials

Here are the complete working steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set bootstrap environment into your angular 8 application:

npm install --save bootstrap

npm install jquery --save

npm install --save @types/jquery

npm install popper.js --save

3. Now you need to add below code into your angular.json file:

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

4. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
declare var $:any;
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  ngOnInit() {

5. Now you need to add below code into src/app/app.component.html file:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

In the end, don’t forgot to run ng serve command.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.


Thank you.

You may also like


naria August 27, 2020 - 2:47 pm

Thank you so much for this!

Ajay Malhotra August 27, 2020 - 3:05 pm

You are welcome 🙂

alexandre delesse January 10, 2021 - 6:32 pm

that sadly don’t worked for me :'(

Ajay Malhotra January 11, 2021 - 4:20 am

Can you please tell me the error?

jin May 27, 2021 - 6:30 pm

That doesn’t worked for me. nothing popup, no error.


Leave a Comment

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