Skip to content

Instantly share code, notes, and snippets.

@ygamretuta
Last active February 26, 2017 08:10
Show Gist options
  • Save ygamretuta/2e547c2159b2482a9aa0718dc6be4b10 to your computer and use it in GitHub Desktop.
Save ygamretuta/2e547c2159b2482a9aa0718dc6be4b10 to your computer and use it in GitHub Desktop.
// app.module.ts
import { ModalModule } from 'ng2-bootstrap';
@NgModule({
bootstrap: [AppComponent],
// other code removed for brevity
imports: [
// error if not using forRoot()
ModalModule.forRoot()
]
})
// my-component.ts
import { ModalDirective } from 'ng2-bootstrap/modal';
@ViewChild('myModal') public myModal: ModalDirective;
getResource() {
this.customService.getResource().subscribe(
response => {
doSomething();
this.applyModal.hide();
}
)
}
// my-component.html
<div class="modal fade" bsModal #myModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="applyModal.hide()">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3 class="modal-title">My Custom Modal</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-primary btn-block" (click)="getResource()" id="btn-add" type="button">Apply</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment