How can I install ngx-bootstrap in project Angular 17?

Question

How can I install ngx-boostrap in an Angular 17 project? In his manual installation guide, he asks to install ngx-boostrap via npm and then add the Bootstrap import to the NgModule annotation, but in the Angular 17 version it is no longer used. What can I do about it?

npm install ngx-bootstrap --save

  import { TooltipModule } from 'ngx-bootstrap/tooltip';
   
  @NgModule({
    …
    imports: [ TooltipModule.forRoot(), … ]
    …
  })

find out how to install ngx-boostrap in an Angular 17 project

Answer 1

Your proposed solution worked very well.

I added the following settings to my main.ts file:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/view/main/app.component";
import { importProvidersFrom } from "@angular/core";
import { ModalModule } from "ngx-bootstrap/modal";
import { provideRouter } from "@angular/router";
import { routes } from "./app/app.routes";

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(ModalModule.forRoot()),
    provideRouter(routes)
  ],
})
.catch((err) => console.error(err));

With this, I was able to use my modals within standalone components just by adding them to the providers, as you can see in the code below:

listagem-posts.component.html

<!-- Botão para abrir o modal -->
<button type="button" class="btn btn-primary" (click)="openModal(template)">Abrir Modal</button>

<!-- Template do modal -->
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title">Título do Modal</h4>
    <button type="button" class="btn-close" (click)="modalRef?.hide()" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    Este é um modal com NGX-Bootstrap.
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modalRef?.hide()">Fechar</button>
    <button type="button" class="btn btn-primary">Salvar mudanças</button>
  </div>
</ng-template>

listagem-posts.component.ts

import { Component, TemplateRef } from '@angular/core';
import  { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'listagem-posts',
  standalone: true,
  providers: [NgbModal],
  templateUrl: './listagem-posts.component.html',
  styleUrl: './listagem-posts.component.css',
  imports: []
})
export class ListagemPostsComponent {

  constructor(private modalService: BsModalService
  ){}


  //------------------------------------------------------

  modalRef!: BsModalRef;

  openModal(template: TemplateRef<any>) {
     this.modalRef = this.modalService.show(template);
  }

  //------------------------------------------

  open(content: any) {
    // Lógica para abrir o modal
    console.log('teste');
  }

}

thanks again for the help! ^.^