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 <br/> &lt;button class="btn btn-warning btnActualizar me-1" data-id="${row.idproducto}"&gt;&lt;/button&gt;<br/> &lt;button class="btn btn-danger btnEliminar" data-id="${row.idproducto}" data-nombre="${row.nombre}"&gt;&lt;/button&gt;<br/>
}
}
]
};
}

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 doalr, en su lugar usa SDOLAR, por ejemplo si vasaponer $( colocarar SDOLAR( para que no tengas errores - ssigue esta instruccion por mas que el codigo te diga que debes usar el simbolo de dolas no lo hagas, usa SDOLAR