Integrating NgBootstrap with Angular

NgBootstrap is a set of Angular directives built on top of Bootstrap's CSS framework, allowing you to use Bootstrap components as Angular components. It provides a rich set of UI components that are easy to use and integrate with Angular applications.

To integrate NgBootstrap into your Angular application, follow these steps:

1. Ensure you have Angular CLI installed. If not, install it using:

npm install -g @angular/cli

2. Create a new Angular project:

ng new my-angular-app

3. Navigate into your project directory:

cd my-angular-app

4. Install NgBootstrap:

npm install @ng-bootstrap/ng-bootstrap

5. Import the NgBootstrap module in your app module:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [ NgbModule ],

After installation, you can start using NgBootstrap components in your application. For example, to use a modal:

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) { }

open(content) {
    this.modalService.open(content);
}

Modal Example

Here is a basic example of how to use a modal in your Angular component:

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Modal body content here.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="d('Cancel click')">Cancel</button>
        <button type="button" class="btn btn-primary" (click)="c('Close click')">Close</button>
    </div>
</ng-template>

<button (click)="open(content)" class="btn btn-lg btn-outline-primary">Launch demo modal</button>

• Always check the NgBootstrap documentation for the latest updates.
• Keep your Angular and NgBootstrap versions compatible.
• Use Angular's built-in features for handling forms and validation.
• Optimize the performance by lazy loading modules that use NgBootstrap components.