Hello modal, looking good!
{{ closeResult }}
```
And the component definition:
```typescript
`import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
title = 'css-angular';
closeResult: string;
constructor(private modalService: NgbModal) { }
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
```
We can capture the close event and print the reason why the modal was closed, all without a single jQuery or Bootstrap.js dependency.
> Code sample taken from the ng-bootstrap documentation, slightly modified.
## ngx-bootstrap
Like ng-bootstrap, [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/) gives us Bootstrap components the Angular-native way, with no external JavaScript dependencies.
Install it: `npm install ngx-bootstrap`. Alternatively, ngx-bootstrap supports the `ng add` command: `ng add ngx-bootstrap`. The second approach also wires up the CSS in `angular.json` automatically, so there's no need to manually point to Bootstrap's stylesheet.
Next, drop the import statements into `app.module.ts`:
```typescript
// specific import
// generic import to import further modules:
// import { AlertModule, ModalModule } from 'ngx-bootstrap';
@NgModule({
// ...
imports: [AlertModule.forRoot(), ...]
// ...
})
```
Again, importing only the required modules helps trim the application's size.
## Examples
Test it by dropping an alert panel into a component template:
```html
Hello from ngx-bootstrap