Angular 8/9 - Insertar HTML Dinamicamente

alexsanro

Buenas!! De primera soy muy novato con Angular, llevaré unos meses un o algo mas a base de tutoriales y haciendo alguna chorrada para ir aprendiendo un poco nada más. Pero me surge una duda al querer hacer un ejemplo para mi que se me había ocurrido. De antemano muchas gracias a todos los que me puedan ayudar.

Por poner un ejemplo rápido tengo el siguiente código:

<div *ngFor="let item of config">
        <label for="">Name:</label><br>
        <input type="text" name="name[]" value="{{item.label}}">
        <br>
        <input name="shortcutInput[]" class="shortcutInput" (keyup)="onkeyUpShortcut($event)" 
        (keydown)="onKeyDownShortcut($event)" value="{{item.shortcut}}"/>
    </div> 
<button name="add" (click)=addNew($event)>Nuevo</button> 

Lo que quiero es que haga click en el botón ese de "add" se me añada otra fila más igual que la de arriba, con su label y sus inputs con esos eventos. Vengo de javascript y Jquery basicmente, y claro entiendo ahí las cosas se hacen de otra manera, pero aquí con el tema de la compilación del proyecto y tal no termino de ver como poder hacerlo bien. O al menos no entiendo la documentación por mis escaso conocimientos.

Wasd

config.push(elem) y ya deberia renderizarlo.

1 respuesta
Nedaim

Con añadir un elemento mas a la variable config en el método "addNew" debería ser suficiente. El ngFor escucha los cambios de config y rerenderiza cuando se disparan con lo que te pintará un elemento más.

3 1 respuesta
JuAn4k4

Mirate también angular forms y formControl, en lugar de ponerles name a tus inputs.

1 respuesta
alexsanro

#2 #3 Gracias!! Funciono como me dijisteis

#4 Si si razón tienes

Usuarios habituales

  • alexsanro
  • JuAn4k4
  • Nedaim
  • Wasd