Introduction to ng-bootstrap

ng-bootstrap is the official Angular library for Bootstrap components. It provides a set of native Angular directives and allows developers to easily integrate Bootstrap components into their Angular applications.

Advantages of using ng-bootstrap

• Native Angular: ng-bootstrap components are written in pure Angular and do not require any dependency on jQuery or Bootstrap's JavaScript.
• Easy to use: ng-bootstrap provides a set of directives that can be used like any other Angular directive.
• Customizable: ng-bootstrap components can be easily customized using CSS.
• Large ecosystem: ng-bootstrap has a large community and provides support for a wide range of Bootstrap components.

Installation

To use ng-bootstrap in your Angular application, you need to install it using npm.

npm install --save @ng-bootstrap/ng-bootstrap

Usage

Once you have installed ng-bootstrap, you can start using it in your Angular application.

First, you need to import the required module in your app module.

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

@NgModule({
  imports: [
    NgbModule
  ],
  ...
})
export class AppModule { }

After that, you can easily use any ng-bootstrap component by adding the corresponding directive in your HTML.

<button ngbButton>Click me!</button>

Examples

Here are some examples of ng-bootstrap components that you can use in your Angular application.

Alerts

Alerts are used to display important messages to the user.

<ngb-alert [dismissible]="false" type="success">Success!</ngb-alert>

Modals

Modals are used to display content in a dialog box.

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Modal Title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Modal Content
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close()">Close</button>
  </div>
</ng-template>

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

Dropdowns

Dropdowns are used to display a list of options.

<div ngbDropdown>
  <button class="btn btn-outline-secondary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button ngbDropdownItem>Action 1</button>
    <button ngbDropdownItem>Action 2</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem disabled>Disabled Action</button>
  </div>
</div>

Conclusion

ng-bootstrap is a great library that allows developers to easily integrate Bootstrap components into their Angular applications. With its native Angular directives, easy customization, and large ecosystem, ng-bootstrap is a great choice for any Angular developer.