Hola usuario de nuestra página web, hemos encontrado la solución a lo que buscabas, has scroll y la obtendrás a continuación.

Solución:

Método 1

Una forma sencilla de confirmar es utilizar la alerta de confirmación del navegador nativo. La plantilla puede tener un botón o un enlace.

Delete me

Y el método del componente puede ser algo como el siguiente.

clickMethod(name: string) 
  if(confirm("Are you sure to delete "+name)) 
    console.log("Implement delete functionality here");
  

Método 2

Otra forma de obtener un cuadro de diálogo de confirmación simple es utilizar los componentes de arranque angular como ng-bootstrap o ngx-bootstrap. Simplemente puede instalar el componente y usar el componente modal.

1. Ejemplos de modales que usan ng-bootstrap
2. Ejemplos de modales que utilizan ngx-bootstrap.

Método 3

A continuación se proporciona otra forma de implementar una ventana emergente de confirmación simple usando angular2/material que implementé en mi proyecto.

app.module.ts

import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  ConfirmationDialog  from './confirm-dialog/confirmation-dialog';

@NgModule(
  imports: [
    ...
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ...
    ConfirmationDialog
  ],
  providers: [ ... ],
  bootstrap: [ AppComponent ],
  entryComponents: [ConfirmationDialog]
)
export class AppModule  

confirmación-diálogo.ts

import  Component, Input  from '@angular/core';
import  MdDialog, MdDialogRef  from '@angular/material';

@Component(
  selector: 'confirm-dialog',
  templateUrl: '/app/confirm-dialog/confirmation-dialog.html',
)
export class ConfirmationDialog 
  constructor(public dialogRef: MdDialogRef) 

  public confirmMessage:string;

confirm-dialog.html

Confirm
confirmMessage

  Confirm
  Cancel

app.component.html

Delete me

app.component.ts

import  MdDialog, MdDialogRef  from '@angular/material';
import  ConfirmationDialog  from './confirm-dialog/confirmation-dialog';

@Component(
  moduleId: module.id,
  templateUrl: '/app/app.component.html',
  styleUrls: ['/app/main.css']
)

export class AppComponent implements AfterViewInit 
  dialogRef: MdDialogRef;

  constructor(public dialog: MdDialog) 

  openConfirmationDialog() 
    this.dialogRef = this.dialog.open(ConfirmationDialog, 
      disableClose: false
    );
    this.dialogRef.componentInstance.confirmMessage = "Are you sure you want to delete?"

    this.dialogRef.afterClosed().subscribe(result => 
      if(result) 
        // do confirmation actions
      
      this.dialogRef = null;
    );
  

index.html => se agregó la siguiente hoja de estilo

puede usar window.confirm dentro de su función combinado con if condition

 delete(whatever:any)
    if(window.confirm('Are sure you want to delete this item ?'))
    //put your delete method logic here
   

cuando llame al método de eliminación, aparecerá un mensaje de confirmación y cuando presione ok, ejecutará toda la lógica dentro de la condición if.

ACTUALIZACIÓN: Plunkr agregado

Estaba buscando una solución en todos los foros pero no encontré ninguna, así que encontré una solución con la función de devolución de llamada de Javascript de la vieja escuela. Esta es una forma realmente simple y limpia de crear un cuadro de diálogo de confirmación y configurar funciones de devolución de llamada para ambos SÍ y NO haga clic en eventos.
He usado Bootstrap CSS para modal y un servicio de alerta con el asunto rxjs.

alert.component.html

        

            

                

                    
message.text
                
            
            

                

                    

                        
                            No
                        
                        
                            Yes
                        
                    
                
            
         

alert.component.ts

export class AlertComponent {
    message: any;
    constructor(
      public router: Router, 
      private route: ActivatedRoute, 
      private alertService: AlertService,
   )  
   ngOnInit() 
    //this function waits for a message from alert service, it gets 
    //triggered when we call this from any other component
    this.alertService.getMessage().subscribe(message => 
        this.message = message;
    );

La parte mas importante esta aqui alert.service.ts

     import  Injectable  from '@angular/core'; 
     import  Router, NavigationStart  from '@angular/router'; 
     import  Observable  from 'rxjs'; 
     import  Subject  from 'rxjs/Subject';
     @Injectable() export class AlertService 
          private subject = new Subject();
          constructor()
          confirm(message: string,siFn:()=>void,noFn:()=>void)
            this.setConfirmation(message,siFn,noFn);
          
          setConfirmation(message: string,siFn:()=>void,noFn:()=>void) 
            let that = this;
            this.subject.next( type: "confirm",
                        text: message,
                        siFn:
                        function()
                            that.subject.next(); //this will close the modal
                            siFn();
                        ,
                        noFn:function()
                            that.subject.next();
                            noFn();
                        
                     );

                 

          getMessage(): Observable 
             return this.subject.asObservable();
          
       

Llame a la función desde cualquier componente

this.alertService.confirm("You sure Bro?",function()
    //ACTION: Do this If user says YES
,function()
    //ACTION: Do this if user says NO
)

Plunkr https://embed.plnkr.co/vWBT2nWmtsXff0MXMKdd/

Sección de Reseñas y Valoraciones

Recuerda algo, que puedes agregar una reseña si te fue preciso.

---

---

Utiliza Nuestro Buscador