When using @output, the methods of my parent component are not executed.
Hello, I am trying to send an array and a number through EventEmitter but the methods of my parent component are not executed.
Parent component: monitoreo Child component: tree-monitoreo
tree-monitoreo.component.html:
<div class="expandible" [style.margin-left.px]="(item.level === 2 ? 14 : item.level === 3 ? 43 : 0)">
<span *ngIf="item.children" (click)="toggleExpand()">[{{ item.expanded ? '-' : '+' }}]</span>
<input type="checkbox" (change)="ActivarCheckBox(item.name)"> {{ item.name }}
</div>
<div *ngIf="item.expanded && item.children">
<app-tree-monitoreo *ngFor="let child of item.children" [item]="child"></app-tree-monitoreo>
</div>
tree-monitoreo.component.ts:
export class TreeMonitoreoComponent {
@Output() datos: EventEmitter<any[]> = new EventEmitter<any[]>();
@Output() id = new EventEmitter<number>();
@Input() item:any;
private checkboxPreviousState: boolean = false;
busData = [
{ name: "Bus 1", longitude: -79.025062, latitude: -8.134483, nId: 1, msg: "msg1"},
{ name: "Bus 2", longitude: -79.039958, latitude: -8.111403, nId: 2, msg: "msg2"},
]
toggleExpand() {
console.log("entro a toggle expand");
this.item.expanded = !this.item.expanded;
}
ActivarCheckBox(value: any) {
console.log("in Activarcheckbox");
if (!this.checkboxPreviousState) {
for (let i = 0; i < this.busData.length; i++) {
let busData = this.busData[i];
if(value == busData.name) {
this.datos.emit([busData.latitude,busData.longitude,busData.nId,busData.msg]);
}
}
}
else {
for (let i = 0; i < this.busData.length; i++) {
let busData = this.busData[i];
if(value == busData.name) {
this.id.emit(busData.nId);
break;
}
}
}
this.checkboxPreviousState = !this.checkboxPreviousState;this.checkboxPreviousState;
}
}
monitoreo.component.html:
<body>
<div class="menu">
<app-menu></app-menu>
</div>
<div class="nav-monitoring">
<div class="resizable">
<div class="tree-container">
<app-tree-monitoreo class="tree-item"
*ngFor="let item of treeData"
(datos)="actualizarMapa($event)"
(id)="removerMarca($event)"
[item]="item">
</app-tree-monitoreo>
</div>
</div>
<div class="adjacent" id="map"></div>
</div>
</body>
monitoreo.component.ts:
export class MonitoreoComponent implements OnInit {
private map:any;
private marker:any;
private marcadores: { [key: string]: L.Marker } = {};
treeData = [
{ name: 'Centro de monitoreo 1', level: 1, expanded: true, children: [
{ name: 'Bus 1', level: 2, expanded: true, children: [
{ name: 'Cam 1', level: 3 },
{ name: 'Cam 2', level: 3 },
{ name: 'Cam 3', level: 3 },]},]},
{ name: 'Centro de monitoreo 2', level: 1, expanded: true, children: [
{ name: 'Bus 2', level: 2, expanded: true, children: [
{ name: 'Cam 1', level: 3 },
{ name: 'Cam 2', level: 3 },
{ name: 'Cam 3', level: 3 },]},]},
];
ngOnInit(): void {
this.map = this.inicializarMapa();
}
inicializarMapa() {
this.map = L.map('map').setView([-8.134483, -79.025062], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(this.map);
return this.map;
}
actualizarMapa(datos:any[]) {
console.log("in actualizarMapa");
this.marker = L.marker([datos[0], datos[1]],{
icon: L.icon({
iconUrl: 'assets/img/marker-icon-2x.png',
shadowUrl: 'assets/img/marker-shadow.png',
iconSize: [40, 40],
iconAnchor: [20, 40],
popupAnchor: [0, -40]
})
}).addTo(this.map).bindPopup(datos[3]).openPopup();
this.marcadores[datos[2]] = this.marker;
}
removerMarca(nId:number) {
console.log("in removerMarca")
if (this.marcadores[nId]) {
this.marcadores[nId].remove();
delete this.marcadores[nId];
}
}
}
In the console I cannot see see that the actualizarMapa and removerMarca methods are executed. Help please.