0

Estimados estoy buscando en foros pero no encuentro la respuesta, alguien me puede ayudar de como agregar un div con angular 6. Tengo creado el componente, pero no puedo crear el elemento en el dom. Quiero desarrollar un boton que me agrege una fila en un acordion, es decir...hacer click en el boton y crear una lista en un acordion.

  <div id="collapse46" class="panel-collapse collapse ml-4">
                <ul class="list-group">
                  <a data-toggle="collapse" href="#collapse47" class="list-group-item">1.1.1.1. Caja</a>
                  <li data-toggle="collapse" href="#collapse47" class="list-group-item">1.1.1.2. Caja chica</li>
                  <li data-toggle="collapse" href="#collapse47" class="list-group-item">1.1.1.3. Fondo Rotativo</li>
                  <a data-toggle="collapse" href="#collapse48" class="list-group-item">1.1.1.4. Bancos</a>
                  <div id="collapse48" class="panel-collapse collapse ml-4">
                    <ul class="list-group">
                      <a data-toggle="collapse" href="#collapse49" class="list-group-item">1.1.1.4.1. Banco X</a>
                      <li data-toggle="collapse" href="#collapse49" class="list-group-item">1.1.1.4.2. Banco Y</li>
                      <li data-toggle="collapse" href="#collapse49" class="list-group-item">1.1.1.4.3. Banco Z</li>
                    </ul>
                  </div>

Repetir el collapse46 al hacer click en el boton

2
  • 1
    Para ayudarte y dar una respuesta más específica a tu pregunta te sugiero que agregues lo que llevas, es decir, tu componente, el botón, el acordeón y todo lo relacionado. el 24 oct. 2018 a las 21:26
  • Para efectuar esto el collapse 46 debería ser un componente hijo y en el padre efectuar un *ngFor con una lista de elementos que contenga los hijos. Tienes un ejemplo en la respuesta del siguiente post: es.stackoverflow.com/questions/205800/acordeon-en-angular/…
    – osiris85
    el 25 oct. 2018 a las 14:24

1 respuesta 1

1

Yo realizaría lo siguiente:

En el componente crearía una matriz con un elemento "collapse46" y una función que agregue a la matriz un componente cada vez que ejecute.

export class tuComponente () {
    public collapses: string[]= ["collapse46"];

    constructor() {
    }

    agregarCollapse (){
        this.collapses.push("collapse46");
    }
}

Luego en el archivo HTML del componente agregaría el elemento pero iterando el arreglo con *ngFor y colocándole el ngModel para que cambie este pendiente de los cambios en la variable collapses.

<div id="{{collapse}}" class="panel-collapse collapse ml-4" *ngFor="let collapse of collapses; let i = index" [(ngModel)]="collapses">
    ...el código de todo lo que deba ir dentro...
</div>

Por ultimo agrego el botón que ejecute la función "agregarCollapse()" con el evento click.

<button (click)="agregarCollapse()">Agregar elemento</button>

Creo que así te debiera funcionar... Por favor avísame si así fue para saber si mis clases están teniendo efecto xD. Y si no también para solucionarlo.

Saludos.

Tu Respuesta

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

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