reactivos - ngmodel angular 5

Angular2 Cómo obtener referencia de elementos HTML generados dinámicamente.

Question

Tengo estas entradas generadas dinámicamente:

  <div *ngFor="let cell of column; let i = index;">
          <!-- Material design input-->
          <md-input id="my-input-{{i}}">
          </md-input>
  </div>

Por favor note id=my-input-{{i}} Me gustaría obtener una referencia al elemento DOM basado en esta identificación dinámica. Esta entrada puede ser de 3, 6 o más entradas, por lo que necesito acceder a la ID dinámicamente y controlarla.

Answer 1

Hay una clase llamada clase ElementRef

Le da a su permiso acceso directo al componente o directiva actual que aloja DOM.

Puede usar ElementRef.nativeElement para obtener un elemento HTML, luego puede acceder a las propiedades del elemento html para realizar su modificación utilizando jQuery o la clase Renderer proporcionada por Angular 2.

Ejemplo con ElementRef y Renderer :

import { Directive, ElementRef, Input, Renderer } from ''@angular/core'';
@Directive({ selector: ''[myHighlight]'' })
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, ''backgroundColor'', ''yellow'');
    }
}

Answer 2

La única respuesta es

let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")

Ninguna otra ceremonia extraña angular necesaria

Probado en angular 4+

Answer 3

Podrías acceder al DOM por medio de elementRef.

Inyecte tirar su constructor por.

constructor(myElement: ElementRef) { ... }

Y acceso al elemento DOM por la propiedad nativeElement

elementRef.nativeElement.select("#blabla")

Answer 4

Use la clase ElementRef de @angular/core para obtener el elemento padre y luego cree un HTMLElement para obtener sus elementos dinámicos por nombre de clase.

Componente:

declare var $: any; //intentional use of jQuery-not recommended though

@Component({
  selector: ''my-app'',
  template: `
    <input type=''button'' (click)=''addDiv()'' value=''Add New Div'' />

    <input type=''button'' (click)=''selectDiv()'' value=''Select'' />
  `
})
export class App {
  constructor(private elRef: ElementRef) {
  }

  addDiv() {
    /*intentional use of jQuery for appending new div
     give a class to your dynamic elements*/

    $(''my-app'').append("<div class=''foo''>Hello I''m Dynamic!</div>");
  }

  selectDiv() {
    //create a new HTMLElement from nativeElement
    var hElement: HTMLElement = this.elRef.nativeElement;

    //now you can simply get your elements with their class name
    var allDivs = hElement.getElementsByClassName(''foo'');

    //do something with selected elements
    console.log(allDivs);
  }
}

Trabajando plunker

Edición: usé jQuery solo para fines de demostración rápida aquí. De lo contrario, no debes usar jQuery con Angular .