0

Tengo un elemento en el DOM que es el siguiente:

<input type="text" id="miElemento" class="miElemento">
<ion-item class="input_float">
    <ion-label floating >Nombre:</ion-label>
    <ion-input class="x" id="nombre" #nombre name="nombre" type="text" [(ngModel)]="nombre" 
        (click)=" placeholderNombre=' Ej: Carlos Alberto Rodriguez Gacha';" 
        (blur)=" placeholderNombre=''" placeholder="{{placeholderNombre}}">
    </ion-input>
</ion-item>

y en mi archivo ts intento selecionarlo atravez de metodo getElementById() de la forma siguiente:

console.log("resultado por id:",document.getElementById("miElemento"));
console.log("resultado por class:",document.getElementsByClassName("miElemento"));

El resultado por consola es el el siguiente:

resultado por id: null
resultado por class: []length: 1 
                      miinput: div#nombre.miinput
                            0: div#nombre.miinput
                    __proto__: HTMLCollection

¿Por que no lo logro con el metodo getElementById()?

1 respuesta 1

0

Angular no puede tomar elementos HTML directamente por lo que necesita especificar el tipo de elemento vinculado.

Puedes usar @ViewChild:

@ViewChild - es utilizado sobre una propiedad de la clase que representa a un componente, permite obtener las instancias de elementos nativos, directivas y componentes que estén en el template del mismo.

1. Agregamos primero el decorador #miElemento:

<div id="miElemento" #miElemento class="miElemento"> mi elemento </div>

2. en el componente agregamos la correspondencia:

import { ElementRef, ViewChild, AfterViewInit } from '@angular/core';

...

export class ExamplePage
{
   @ViewChild( 'miElemento' ) miElemento: ElementRef;

   constructor() {}       

   ngAfterViewInit() {

       console.log( this.miElemento); // ElementRef {nativeElement: div#miElemento.miElemento}
       console.log( this.miElemento.nativeElement.id ); // "miElemento"
   }

...

Ver Demo

4
  • Bien, Gracias, es en parte lo que necesito. pero aun no logro lo que quiero, Realmente lo que necesito es que el elemento sea un input, y después de seleccionarlo quiero darle foco atravez del metodo focus(); de un input, y utilizo lo siguiente: this.miElemento.nativeElement.focus(); ahi pasa dos cosas en mi aplicacion el input no queda enfocado, pero lo probe en su demo y ahi si funciona, ¿por que pasa esto? Commented el 18 ago. 2017 a las 2:13
  • @DanielEnriqueRodriguezCaste - Haz usado los imports { ... ElementRef, ViewChild ... } ? Haz declarado el decorador en el elemento #miElemento ? Como y donde implementas el método focus ?... Commented el 18 ago. 2017 a las 8:54
  • tal cual, ngAfterViewInit() { var miElemento = this.miElemento.nativeElement; miElemento.focus(); } Commented el 20 ago. 2017 a las 23:14
  • @DanielEnriqueRodriguezCaste - Podrías hacer una demo con Plunkr con tu código? Así te podría ayudar... Commented el 21 ago. 2017 a las 6:51

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.