1

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.

1 respuesta 1

0

Creo que el approach que tuviste no esta mal pero tendríamos que utilizar ViewChild y no ViewChildren ya que encontramos presente solo 1 componente hijo dentro del template del padre.

Mi approach es el siguiente:

  • En el componente hijo utilizaremos una variable flag(banderea) para indicar si debe o no mostrarse el icono de eliminar. Esto se hará del lado TypeScript y del lado HTML de nuestro componente:

      //-------------------------------TEMPLATE DEL HIJO---------------------------------//
      <div id="contenedor-producto" class="m-1">
         /*
         * NgContainer se utilizará junto con la flag para no renderizar
         * un elemento div, por ejemplo, al vicio
         */
          <ng-container *ngIf="showDeleteIcon">
              <mat-icon  id="icono-eliminar" (click)="eliminarProducto(i)" class="cursor-pointer">clear</mat-icon>
          </ng-container>
          <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>
    
    
      //-----------------------------------TS------------------------------------//
      Component({
        selector: 'app-componente-hijo',
        templateUrl: './componente-hijo.component.html'
      })
      export class ComponenteHijo {
    
          showDeleteIcon: boolean = true;
    
          // El resto del componente seguiría aquí debajo
    
      }
    
  • En el componente padre con el uso de ViewChild() tengo acceso a mi app-componente-hijo insertado dentro del template, lo capturamos en una variable:

      ViewChild(ComponenteHijo)
      hijo: ComponenteHijo;
    
  • Tendré disponible esta variable en el evento de ciclco de vida ngAfterViewInit() y es allí en donde cambiaré mi flag a false para dejar de mostrar el icono (si, tenemos acceso a la parte Typescript de nuestro componente hijo):

      ngAfterViewInit() {
          this.hijo.showDeleteIcon = false;
      }
    

Espero te sirva! saludos.

6
  • Funcionó perfecto. cuál sería la diferencia entre usar ng-container y un simple div con el mismo ngIf ? es primera vez que uso ng-container, lo había visto pero no le había hecho énfasis.
    – JulianProg
    el 8 ene. 2021 a las 13:59
  • acabo de notar que aparece este error en la consola del navegador: core.js:4442 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false' ProductoMarketplaceComponent_div_1_Template (producto-marketplace.component.html:6) Ese componente productoMarketplace es ek componente hijo al que se le esta modificando la propiedad, Alguna idea ?
    – JulianProg
    el 8 ene. 2021 a las 14:09
  • Me alegro Julian!. Haciendo uso de ng-container evitamos renderizar un elemento vacío para insertar nuestra directiva *ngIf. Hacé la prueba de usar un div y vas a ver como se renderiza y al usar un ng-container no ves ningun nuevo nodo en el DOM. En cuanto al error que me mencionas( el cual no es un erro en si sino que se espera que aparezca en tu caso), tiene que ver con la detección de cambios que realiza angular y el uso de ngAfterViewInit, te recomiendo que lo googlees un poco, es bastante interesante. Saludos! el 9 ene. 2021 a las 0:07
  • Ok, si leí pero no entendí como resolverlo, tendrás un tiempo para una consulta en el chat?
    – JulianProg
    el 9 ene. 2021 a las 3:21
  • Por algún motivo esto ya no me funciona, me muestra este error: Cannot set property 'mostrarIconoEliminar' of undefined y por mas que busco no hallo el error. Podrías ayudarme?
    – JulianProg
    el 6 feb. 2021 a las 19:23

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.