How to fix a problem that bootstrap does not work even though everything is installed?

  angular, angular-ui-bootstrap, angular8, css, typescript

I’m trying to create a popover using bootstrap
The library is installed for me below are the versions
And why does he not show me the design?
Anyone know what could be the problem?
package.json*
"private": true,
"dependencies": {
"@angular/animations": "~11.0.1",
"@angular/cdk": "^11.0.2",
"@angular/common": "~11.0.1",
"@angular/compiler": "~11.0.1",
"@angular/core": "~11.0.1",
"@angular/fire": "^6.1.4",
"@angular/forms": "~11.0.1",
"@angular/platform-browser": "~11.0.1",
"@angular/platform-browser-dynamic": "~11.0.1",
"@angular/router": "~11.0.1",
"@ng-bootstrap/ng-bootstrap": "^8.0.2",
"@types/jquery": "^3.5.5",
"bootstrap": "^4.5.3",
"bootstrap-icons": "^1.1.0",
"firebase": "^8.1.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},

**ANGULAR.JSON FILE:**
    "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
my code:
**APP.COMPONENT.TS FILE:**
import { Component } from '@angular/core';
declare var $:any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
      $('[data-toggle="popover"]').popover();
  }
}
**APP.COMPONENT.HTML FILE:**
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

It looks like this Should look like this

Source: Angular Questions

Leave a Reply

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