tengo un componente hijo el cual tiene esta estructura:
<div id="contenedor-producto" class="m-1">
<mat-icon id="icono-eliminar" (click)="eliminarProducto(i)" class="cursor-pointer">clear</mat-icon>
<div id="cont-opcion" class="text-center mt-4">
<span><i class="fas fa-heart cursor-pointer"></i></span>
<span class="ml-2 cursor-pointer" (click)="agregarAComparar(producto)"><mat-icon>cached</mat-icon></span>
<span class="ml-2 cursor-pointer" (click)="abrirDialog(producto)"><mat-icon>remove_red_eye</mat-icon></span>
<div class="product-button">
<button class="button">AÑADIR AL CARRITO</button>
</div>
</div>
</div>
al hacer hover en el contenedor hago que aparezca el icono-eliminar usando los siguientes estilos:
#contenedor-producto:hover mat-icon#icono-eliminar{
display: block;
}
/*icono para eliminar productos eliminar*/
mat-icon#icono-eliminar{
color: white;
position: absolute;
top: 0;
right: 0;
display: none;
}
ahora, este componente lo inserto en varios componentes, pero en uno de ellos quiero desaparecer por completo ese ícono eliminar, no quiero que aparezca nunca, es decir, desde el padre quiero eliminar ese icono totalmente.
Así que estuve leyendo y veo que se puede usar el decorador ViewChildren y renderer2 con removeChild para eliminar el icono de eliminar, el problema es que no he logrado implementarlo.
el componente padre donde quiero eliminar eliminar el icono de eliminar tiene mas o menos esta forma:
<div class="col-12 col-sm-12 col-lg mt-4">
<app-producto-marketplace #el [productos]="productos"></app-producto-marketplace>
<div class="row mt-5 md-5 justify-content-center">
<div id="paginador">
<span class="mr-3 mr-md-3 icono-paginador"> < </span> PÁGINA 1 <span class="icono-paginador ml-3 ml-md-3"> > </span>
</div>
</div>
</div>
en el .ts estaba intentando esto:
import { Component, OnInit, AfterViewInit, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
@ViewChildren('el', {read: ElementRef}) query: QueryList<ElementRef>;
ngAfterViewInit(){
// console.log(this.query._results);
console.log('--->',this.query.first.nativeElement)
// this.query.forEach((child) => { console.log('---->',child) })
}
pero luego de aquí ya no se que hacer, hago un console.log de eso y me muestra paracticamente la plantilla del componente hijo, pero como puedo acceder al icono-eliminar
y quitarlo del DOM completamente, ojo, solo quiero hacerlo en este componente padre, al utilizar el componente hijo en los otros componentes padres el boton debería aparecer. este planteamiento esta mal o existe una mejor forma de lograr esto ? Gracias de antemano al que me pueda ayudar.