import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type';
import { DemoNgComponent } from './demo-ng-template-ref.component';
import { ADTSettings } from 'angular-datatables/src/models/settings';

@Component({
  selector: 'app-router-link',
  templateUrl: 'router-link.component.html'
})
export class RouterLinkComponent implements AfterViewInit, OnInit, OnDestroy {

  dtOptions: ADTSettings = {};
  dtTrigger = new Subject<ADTSettings>();

  @ViewChild('demoNg') demoNg: TemplateRef<DemoNgComponent>;

  constructor(
    private router: Router
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    const self = this;
    // init here as we use ViewChild ref
    this.dtOptions = {
      ajax: 'data/data.json',
      columns: [
        {
          title: 'ID',
          data: 'id'
        }, {
          title: 'First name',
          data: 'firstName'
        }, {
          title: 'Last name',
          data: 'lastName'
        },
        {
          title: 'Action',
          defaultContent: '',
          ngTemplateRef: {
            ref: this.demoNg,
            context: {
              // needed for capturing events inside <ng-template>
              captureEvents: self.onCaptureEvent.bind(self)
            }
          }
        }
      ]
    };

    // race condition fails unit tests if dtOptions isn't sent with dtTrigger
    setTimeout(() => {
      this.dtTrigger.next(this.dtOptions);
    }, 200);
  }

  onCaptureEvent(event: IDemoNgComponentEventType) {
    this.router.navigate(["/person/" + event.data.id]);
  }

  ngOnDestroy(): void {
    this.dtTrigger?.unsubscribe();
  }
}
 - este es un ejemplo de como usar botones en angular, tengo un metodo que quiero usar pero no como usarlo enangular-ajax, este es mi componente - export class ProductoListarComponent implements OnInit {

  dtOptions: Config = {};

  constructor(private productoService: ProductoService) {}

  ngOnInit(): void {
    
    const that = this;
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true,
      serverSide: false,

      ajax: (dataTablesParameters: any, callback) => {
        that.productoService.listarProductos().subscribe(resp => {
          callback({
            data: resp
          });
        });
      },

      columns: [
        { title: 'ID', data: 'idproducto' },
        { title: 'Fecha', data: 'fecha' },
        { title: 'Nombre', data: 'nombre' },
        { title: 'Precio Compra', data: 'preciocompra' },
        { title: 'Precio Venta', data: 'precioventa' },
        { title: 'Imagen', data: 'imagen' },
        { title: 'Activo', data: 'activo' },
        { title: 'Categoría', data: 'categoria.nombre' },
        {
          title: 'Acciones',
          data: null,
          render: function(data, type, row){
            return `
      <button class="btn btn-warning btnActualizar me-1" data-id="${row.idproducto}"></button>
      <button class="btn btn-danger btnEliminar" data-id="${row.idproducto}" data-nombre="${row.nombre}"></button>
    `
          }
        }
      ]
    };
  }

  mensajeConfirmacion(id: number, producto: string): void {
    Swal.fire({
      title: "¿Estás seguro?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#28a745",
      cancelButtonColor: "#d33",
      confirmButtonText: "Si, ¡elimínalo!",
      cancelButtonText: "Cancelar"
    }).then((result) => {
      if (result.isConfirmed) {
        this.eliminar(id, producto);
      }
    });
  }
  

  mostrarNotificacion(titulo: string, texto: string, icono: 'success' | 'error'): void {
    Swal.fire({
      title: titulo,
      text: texto,
      icon: icono
    });
  }


  eliminar(id:number, producto: string): void {
    this.productoService.eliminarProducto(id).subscribe({
      next: () => {
        this.mostrarNotificacion("Eliminado", "El producto " + producto + "ha sido eliminado", "success")
      },
      error: (error) => {
        console.error('Error al eliminar producto', error);
        this.mostrarNotificacion("Error", "Hubo un problema al eliminar el producto: " + producto, "error");
      }
    })
  }
como ahgo para que el boton actualziar redireccione y el eliminar ejecute su metodo? - no uses el simbolo de dolas, en su lugar usa SDOLAR