npm i @viceri/confirmation-modal --save
Esse componente as seguintes dependências:
- @angular/material;
Importe os seguintes módulos em seu NgModule:
-
ConfirmationModalModule;
-
MatDialogModule;
-
BrowserAnimationsModule;
Na propriedade entryComponents coloque o ConfirmationModalComponent;
Após isso, seu NgModule deverá parecer como isso:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ConfirmationModalModule,
MatDialogModule,
BrowserAnimationsModule,
HttpClientModule
],
providers: [],
entryComponents: [ConfirmationModalComponent],
bootstrap: [AppComponent]
})
Adicione o theme do componente no seu styles.scss:
@import './node_modules/@viceri/confirmation-modal/theme.scss';
Para chamar o modal e capturar sua resposta, basta injetar o ConfirmationModalService:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private confirmationModalService: ConfirmationModalService) {
}
show() {
this.confirmationModalService.open(new ConfirmationModal(), () => console.log("cofirmado"));
}
}
Chame o método open passando como parâmetro um ConfirmationModal e um callback. O callback será chamado caso a resposta seja sim.
A classe ConfirmationModal é usada para customizar a mensagem do modal, texto dos botões.
export class ConfirmationModal {
header: {
title: string,
};
message: string;
actions: {
whenTrue: string,
whenFalse: string,
};
constructor() {
this.header = {
title: 'Confirmar ação'
};
this.message = 'Esta ação não poderá ser desfeita! Tem certeza que deseja continuar?';
this.actions = {
whenFalse: 'Não',
whenTrue: 'Sim'
};
}
}
Uma vez configurado, o modal deverá ter essa aparência: