Quiero pintar el valor que esta recibiento la variable numberTable en mi archivo html, pero no logro hacerlo y por consola si lo veo. Si me pueden ayudar, se los agradezco, les muestro mi codigo:
Este es el componente.html que tienes los botones de casa mesa:
<div class="btn-table-container">
<button (click)="selectTable($event)" id="mesa01" class="btn-table" [routerLink]="['/', 'menu']">Mesa 01</button>
<button (click)="selectTable($event)" id="mesa02" class="btn-table" [routerLink]="['/', 'menu']">Mesa 02</button>
<button (click)="selectTable($event)" id="mesa03" class="btn-table" [routerLink]="['/', 'menu']">Mesa 03</button>
<button (click)="selectTable($event)" id="mesa04" class="btn-table" [routerLink]="['/', 'menu']">Mesa 04</button>
<button (click)="selectTable($event)" id="mesa05" class="btn-table" [routerLink]="['/', 'menu']">Mesa 05</button>
<button (click)="selectTable($event)" id="mesa06" class="btn-table" [routerLink]="['/', 'menu']">Mesa 06</button>
</div>
Este es el componente.ts donde al presionar cada boton se obtiene el evento con el id de cada mesa :
import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';
@Component({
selector: 'app-waiter-tables',
templateUrl: './waiter-tables.component.html',
styleUrls: ['./waiter-tables.component.scss']
})
export class WaiterTablesComponent implements OnInit {
constructor(private dataService: DataService) { }
ngOnInit(): void {
}
selectTable(event: any) {
const idTable = event.target.id;
console.log(idTable)
this.dataService.tablesEvent$.emit(idTable)
}
}
Este es el componente donde quiero obtener el numero de mesa
numberTable: string = '';
//Aqui me suscribo al servicio
this.dataService.tablesEvent$.subscribe(numMesa => {
this.numberTable = numMesa;
console.log(this.numberTable);
console.log('numero de mesa es:', numMesa);
})
Este es el html donde quiero pintar cual fue el numero de mesa que guardo la variable
<div class="commensalDates">
<div class="commensalNameDiv">
<label for="commensal" class="commensalNameLabel">
<fa-icon [icon]="['fas', 'user']"></fa-icon>
</label>
<input type="text" class="commensalNameInput" class="form-control" (keyup)="changeCommensalName($event)"
placeholder="Nombre cliente" aria-label="Username" aria-describedby="basic-addon1">
</div>
<label for="commensal" class="commensalTableLabel">Mesa N°: {{numberTable}}</label>
</div>
Y este es el resultado: les muestro imagen
como pueden observar el numero de mesa esta vacio y deberia mostrar la mesa que seleccione, que en la consola se puede ver que fue la mesa 02