Ng-bootstrap-ext NPM

NgBootstrapExt

Helpful additional components for ng-bootstrap.

Installation

Install ng-bootstrap first.
npm install ng-bootstrap-ext

Compatibility

ng-bootstrap-ext	Angular	ng-bootstrap	bootstrap
0.1	^12.2	^10	^4.5
0.2	^13	^11	^4.6
0.3	^13	^12	^5.0
0.4	^13	^12	^5.0
0.5	^14.1	^13	^5.2
0.6	^15.0	^14	^5.2.3

Usage

Toasts

Import the ToastModule, e.g. in AppModule.
Add <ngbx-toast-list></ngbx-toast-list> somewhere (e.g. at the end of app component).
Use ToastService to display toasts:

this.toastService.add({
  title: 'Important', // optional
  body: 'Hello world', // optional
  class: 'bg-primary text-white', // optional, can also be object or array
  delay: 1500, // in ms, defaults to 5000
  actions: [ // optional
    {
      name: 'Click me',
      link: ['/home'], // optional, acts as routerLink
      run: () => {
      }, // optional, do anything you want
    },
  ],
});
this.toastService.success('Account', 'Successfully created account');
this.toastService.warning('Account', 'Successfully deleted account');
this.toastService.error('Account', 'Failed to delete account', error);

Modals

Import the ModalModule, e.g. in AppModule.

Create a component, e.g. EditUserComponent:

<ngbx-modal #modal="modal" [back]="['../..']">
  <ng-container modal-title>
    Edit User
  </ng-container>
  <ng-container modal-body>
    <!-- User Form -->
  </ng-container>
  <ng-container modal-footer>
    <button type="button" class="btn btn-secondary" (click)="modal.close()">
      Cancel
    </button>
    <button class="btn btn-primary" (click)="save(); modal.close()">
      Save
    </button>
  </ng-container>
</ngbx-modal>

Add <router-outlet></router-outlet> to the end of the parent component (e.g. UserListComponent).

Define child routes:

const routes: Routes = [
  {path: 'user-list', component: UserListComponent, children: [
    {path: 'edit/:id', component: EditUserComponent},
  ]},
];

Simply route to the modal from the parent component:
```
<a [routerLink]="['edit', user.id]">Edit</a>
```

The modal will be opened and closed automatically. The URL will be updated automatically.

Modals support the following options:

back: An array for routing when the modal is closed. Example: ['../..']
backOptions (optional): Options for routing when the modal is closed. Defaults to be relative to the ActivatedRoute.
size: Size of the modal (sm, lg, xl, or any string). Passed to the NgbModal component.
scrollable: Whether the modal should be scrollable. Passed to the NgbModal component.
locked: Disables the close button, ESC and outside clicks.
modalClose (event): Emitted when the modal is closed or dismissed.

Route Tabs

Import the RouteTabsModule, e.g. in AppModule.

Define or export routes from your *RoutingModule. Add data to define title, icon (optional, CSS class) and new (optional, boolean):

const routes: Routes = [
  {path: 'foo', component: FooComponent, data: {title: 'Foo'}},
  {path: 'bar', component: BarComponent, data: {title: 'Bar', icon: 'bi-bar-chart'}},
  {path: 'baz', component: BazComponent, data: {title: 'Baz', new: true}},
];

Simply use the ngbx-route-tabs component:

<ngbx-route-tabs [routes]="routes">
</ngbx-route-tabs>

Route Tabs support the following options:

routes: An array of routes.
active: The route to be active.
newBadgeClass: A CSS class for the "new" badge. Defaults to badge text-white bg-primary bg-gradient-primary.