Skip to content

Instantly share code, notes, and snippets.

@amay077
Last active January 29, 2020 02:47
Show Gist options
  • Save amay077/b2012b7dee8e3fe6f08463273a166d15 to your computer and use it in GitHub Desktop.
Save amay077/b2012b7dee8e3fe6f08463273a166d15 to your computer and use it in GitHub Desktop.
Angular6 + ng-bootstrap で使えるモーダル表示サービス
@NgModule({
imports: [
CommonModule,
],
declarations: [
MyModalConfirmContent], ←追加
exports: [LayoutComponent],
entryComponents: [MyModalConfirmContent] ←追加
})
export class AppModule { }
import { Injectable, Component, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Injectable({
providedIn: 'root'
})
export class MyModalService {
constructor(private modalService: NgbModal) { }
confirm(title: string, message: string, okCaption?: string, cancelCaption?: string): Promise<boolean> {
const modalRef = this.modalService.open(MyModalConfirmContent);
const component = modalRef.componentInstance as MyModalConfirmContent;
if (component != null) {
component.title = title;
component.message = message;
component.okCaption = okCaption || 'OK';
component.cancelCaption = cancelCaption || 'Cancel';
}
return modalRef.result.then(result => {
return true;
}, reason => {
return false;
});
}
}
@Component({
template:
`
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('dissmiss')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="activeModal.close('ok')">{{okCaption}}</button>
<button type="button" class="btn btn-outline-dark" (click)="activeModal.dismiss('cancel')">{{cancelCaption}}</button>
</div>
`
})
// tslint:disable-next-line
export class MyModalConfirmContent {
@Input() title: string;
@Input() message: string;
@Input() okCaption = 'OK';
@Input() cancelCaption = 'Cancel';
constructor(public activeModal: NgbActiveModal) { }
}
@Component({
selector: 'app-my-top',
templateUrl: './my-top.component.html',
styleUrls: ['./my-top.component.scss']
})
export class MyTopComponent {
constructor(
private modal: MyModalService) { }
async showConfirm() {
const res = await this.modal.confirm('たいとる', 'もーだるですか?', 'はい', 'いいえ');
console.log(`result = {res}`);
if (!res) {
return;
}
}
}
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^2.2.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"moment": "^2.22.2",
"ng-spin-kit": "^5.1.1",
"ngx-loading": "^1.0.14",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment