ngb-rating is not working without bootstrap cdn links

Question

user.module.ts

this is my user module user.module.ts code

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideNavbarComponent } from './components/side-navbar/side-navbar.component';
import { UserProfileComponent } from './components/user-profile/user-profile.component';
import { AddressComponent } from './components/address/address.component';
import { OrdersComponent } from './components/orders/orders.component';
import { TrackingComponent } from './components/tracking/tracking.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AngmaterialModule } from '../angmaterial/angmaterial.module';
import { FilterPipe } from './pipes/filter.pipe';
import { CartButtonComponent } from './cart-button/cart-button.component';
import { ItemDisplayComponent } from './item-display/item-display.component';
import { ProductsDisplayComponent } from './products-display/products-display.component';
import { FiltersComponent } from './filters/filters.component';
import { SortPipe } from './pipes/sort.pipe';
import { PriceFilterPipe } from './pipes/price-filter.pipe';





@NgModule({
  declarations: [
    SideNavbarComponent,
    UserProfileComponent,
    AddressComponent,
    OrdersComponent,
    TrackingComponent,
    CartButtonComponent,
    ItemDisplayComponent,
    ProductsDisplayComponent,
    FilterPipe,
    FiltersComponent,
    SortPipe,
    PriceFilterPipe
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule,
    AngmaterialModule,
    NgbModule
  ],providers:[],
  exports:[SideNavbarComponent,OrdersComponent,UserProfileComponent,TrackingComponent]
})
export class UserModule { }

this is my products page code , which is in user module products.component.html

 <ng-template #t let-fill="fill">
                    <span class="star" [class.full]="fill === 100">
                    <span class="half" [style.width.%]="fill">&hearts;</span>&hearts;
                    </span>
                </ng-template>
                <ngb-rating [(rate)]="x.rating" [starTemplate]="t" [readonly]="true" [max]="5"></ngb-rating>

my product component ts file

products.ts file

x={
.......,
rating:"4.2"
}

package.json

{
  "name": "e-commerce",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.1",
    "@angular/cdk": "^12.1.3",
    "@angular/common": "~12.0.1",
    "@angular/compiler": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/forms": "~12.0.1",
    "@angular/localize": "~12.0.1",
    "@angular/material": "^12.1.3",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "angular-bootstrap-md": "^4.3.2",
    "bootstrap": "^5.1.0",
    "jquery": "^3.6.0",
    "mdb-angular-ui-kit": "^1.0.0-beta8",
    "mdb-ui-kit": "^3.9.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.1",
    "@angular/cli": "^12.1.4",
    "@angular/compiler-cli": "~12.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

this is angular.json imported styles angular.json

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/jquery/dist/jquery.min.js"
            ],
            "scripts": []

Answer 1

As provided demo is using Bootstrap 4.5.3 as below:

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

Meanwhile, in the provided angular.json you are using Bootstrap 5.1.

"bootstrap": "^5.1.0"

And according to @ng-bootstrap/ng-bootstrap (Dependency Section):

ng-bootstrap	Angular	Bootstrap CSS
10.0.0	12.0.0	4.5.0

---

Solution

Hence, you have to downgrade Bootstrap to version 4.5.

npm install bootstrap@4.5

Sample Solution on StackBlitz

---

Concern

jquery.min.js have to be imported in scripts section, not styles section.

{
  ...,
  "styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js"
  ]
}