Created
August 23, 2019 10:53
-
-
Save feliperfranco/a5eba87f2e1afe8f5490e1c71c299275 to your computer and use it in GitHub Desktop.
Modal de confirmação com Angular e Boostrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ConfirmModalModule } from './shared/confirm-modal/confirm-modal/confirm-modal.module'; | |
import { environment } from '../environments/environment'; | |
import { BrowserModule } from '@angular/platform-browser'; | |
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
import { NgModule } from '@angular/core'; | |
import { FormsModule } from '@angular/forms' | |
import { AppRoutingModule } from './app-routing.module'; | |
import { AppComponent } from './app.component'; | |
@NgModule({ | |
declarations: [ | |
AppComponent, | |
], | |
imports: [ | |
BrowserModule, | |
BrowserAnimationsModule, | |
FormsModule, | |
AppRoutingModule, | |
ConfirmModalModule // <-- Precisa adicionar o ConfirmModalModule | |
], | |
providers: [], | |
bootstrap: [AppComponent] | |
}) | |
export class AppModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="modal-header"> | |
<h4 class="modal-title" id="modal-basic-title">{{ options.title}}</h4> | |
<button type="button" class="close" aria-label="Close" (click)="cancel()" > | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<div class="modal-body"> | |
<p [innerHTML]=options.message></p> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-primary" (click)="confirm()">{{ options.buttonOkText }}</button> | |
<button type="button" class="btn btn-secondary" (click)="cancel()">{{ options.buttonCancelText }}</button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ConfirmStateService } from './../shared/confirm-state.service'; | |
import { ConfirmOptions } from './../shared/confirm-options'; | |
import { Component, OnInit } from '@angular/core'; | |
@Component({ | |
selector: 'app-confirm-modal', | |
templateUrl: './confirm-modal.component.html', | |
styleUrls: ['./confirm-modal.component.scss'] | |
}) | |
export class ConfirmModalComponent { | |
options: ConfirmOptions; | |
constructor(private state: ConfirmStateService) { | |
this.options = state.options; | |
} | |
confirm() { | |
this.state.modal.close(); | |
} | |
cancel() { | |
this.state.modal.dismiss(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; | |
import { ConfirmTemplateDirective } from './../shared/confirm-template.directive'; | |
import { ConfirmModalComponent } from './confirm-modal.component'; | |
import { NgModule } from '@angular/core'; | |
import { CommonModule } from '@angular/common'; | |
@NgModule({ | |
declarations: [ | |
ConfirmModalComponent, | |
ConfirmTemplateDirective | |
], | |
imports: [ | |
CommonModule, | |
NgbModule | |
], | |
exports: [ | |
ConfirmModalComponent, | |
ConfirmTemplateDirective | |
] | |
}) | |
export class ConfirmModalModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export interface ConfirmOptions { | |
title: string; | |
message: string; | |
buttonOkText: string; | |
buttonCancelText: string; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ConfirmOptions } from './confirm-options'; | |
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; | |
import { Injectable, TemplateRef } from '@angular/core'; | |
@Injectable({ | |
providedIn: 'root' | |
}) | |
export class ConfirmStateService { | |
options: ConfirmOptions; | |
modal: NgbModalRef; | |
template: TemplateRef<any>; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ConfirmStateService } from './confirm-state.service'; | |
import { Directive, TemplateRef } from '@angular/core'; | |
@Directive({ | |
selector: '[confirm]' | |
}) | |
export class ConfirmTemplateDirective { | |
constructor(confirmTemplate: TemplateRef<any>, state: ConfirmStateService) { | |
state.template = confirmTemplate; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ConfirmOptions } from './confirm-options'; | |
import { ConfirmStateService } from './confirm-state.service'; | |
import { Injectable } from '@angular/core'; | |
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; | |
@Injectable({ | |
providedIn: 'root' | |
}) | |
export class ConfirmService { | |
constructor(private modalService: NgbModal, private state: ConfirmStateService) { } | |
/** | |
* Opens a confirmation modal | |
* @param options the options for the modal (title and message) | |
* @returns {Promise<any>} a promise that is fulfilled when the user chooses to confirm, and rejected when | |
* the user chooses not to confirm, or closes the modal | |
*/ | |
confirm(options: ConfirmOptions): Promise<any> { | |
this.state.options = options; | |
this.state.modal = this.modalService.open(this.state.template); | |
return this.state.modal.result; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ConfirmService } from './../../shared/confirm-modal/shared/confirm.service'; | |
import { Component } from '@angular/core'; | |
@Component({ | |
selector: 'app-exemplo', | |
templateUrl: './exemplo.component.html', | |
styleUrls: ['./exemplo.component.scss'] | |
}) | |
export class ExemploComponent { | |
constructor(private confirmService: ConfirmService) { } | |
exemploDeUso() { | |
this.confirmService | |
.confirm( | |
{ | |
title: 'Titulo da Confirmação?', | |
message: `Você deseja reprovar o cadastro do aluno: <b>${name}</b>`, | |
buttonOkText: 'Reprovar cadastro', | |
buttonCancelText: 'Cancelar' | |
}).then(() => { | |
// cai aqui qdo clica no botão ok | |
}).catch(() => { | |
// cai aqui qdo clica no botão cancelar | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment