0

Necesito recorrer cada uno de los elementos padres de un input y verificar si alguno de ellos tiene implementada una clase.

<div>
   <div [ngClass]="{'myClass':active === true}">
     <ul>
       <li>
         <input #elementChild "[formControl]="formControl">
      </li>
    </ul>
  </div>

de encontrar el elemento padre que contiene la clase (myClass) necesito implementar un método.

He buscado si @ViewChild cuenta con alguna forma de recorrer u obtener los parents Element pero no encuentro nada al respecto.

6
  • Exactamente no explicas lo que quieres conseguir. Pero tienes el método closest que tu busca el padre(ancestro) mas cercano que coincida con el selector que le pases. Quizá te sirva
    – hawks
    Commented el 6 ago. 2020 a las 15:20
  • Si estás usando Angular, casi siempre hay una forma de resolver cualquier necesidad sin usar el DOM. ¿Qué es lo que quieres conseguir? ¿Interviene más de un componente? Commented el 6 ago. 2020 a las 15:27
  • @hawks closest buscaría en el padre mas cercano pero necesito buscar en cualquiera de los elementos superiores donde esta anidado el input. De enontrar la clase en un elemento superior pueda deshabilitar el input. La clase la incluyo mediante una condición en un ngClass pero los niveles de anidacion del input pueden variar.
    – car-onte
    Commented el 6 ago. 2020 a las 15:40
  • pues eso si input es un elemento anidado y algun padre tiene esa clase que buscas pues puedes encontrar el elemento con el closest. No se que quieres decir con "cualquiera de los elementos" si con esto te refieres buscar cualquier elemento que exista en el DOM con esa clase ya no estamos hablando de la anidación del input.
    – hawks
    Commented el 6 ago. 2020 a las 15:43
  • si tienes acceso a la variable active ya sabes que tiene esa clase o no(` [ngClass]="{'myClass':active === true}"). Solo con comprobar si active === true` puedes ejecutar el método. Si necesitas ejecutar un método en el componente hijo puedes pasar active como @Input
    – hawks
    Commented el 6 ago. 2020 a las 15:52

1 respuesta 1

0

Tal como he puesto en los comentarios puedes hacer lo siguiente.

En tu component.ts

@ViewChild('inputRef') inputRef: ElementRef;

// yo no se cuando necesitas validar lo de la clase
// lo puedes poner el ngOnInit
// o donde tu creas

// puedes hacer la validación así 
parentElemHasMyClass() {
   if (this.inputRef && this.inputRef.nativeElement) {
      return this.inputRef.nativeElement.closest('.myClass');
   }
   return false;
}
<div [ngClass]="{'myClass':active === true}">
  <ul>
    <li>
      <input #inputRef [formControl]="formControl">
    </li>
  </ul>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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