NgBootstrapExt - moved to ngbx
Helpful additional components for ng-bootstrap.
- Install ng-bootstrap first.
npm install ng-bootstrap-ext
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 |
For newer versions, see ngbx.
- Import the
ToastModule
, e.g. inAppModule
. - 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);
- Import the
ModalModule
, e.g. inAppModule
. - 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 theActivatedRoute
.size
: Size of the modal (sm
,lg
,xl
, or any string). Passed to theNgbModal
component.scrollable
: Whether the modal should be scrollable. Passed to theNgbModal
component.locked
: Disables the close button, ESC and outside clicks.modalClose
(event): Emitted when the modal is closed or dismissed.
-
Import the
RouteTabsModule
, e.g. inAppModule
. -
Define or export
routes
from your*RoutingModule
. Adddata
to definetitle
,icon
(optional, CSS class) andnew
(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 tobadge text-white bg-primary bg-gradient-primary
.