Add div with Angular 6

Question

Add div with Angular 6

Navigation

#1 by (1 votes)

0

Dear I am looking for forums but I can not find the answer, someone can help me how to add a div with angle 6. I have created the component, but I can not create the element in the sun. I want to develop a button that adds a row in an accordion, that is ... click on the button and create a list in an accordion.

  <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>

Repeat the collapse46 when you click on the button

angular6 angular-directivas angular5 bootstrap-3

asked by Nahuel Jakobson 24.10.2018 в 23:20

source

1 answer

Find what there is to modify when reading in a txt file Problem when saving a file in a folder, which comes from type byte [] on the server when using WriteAllBytes in C #

score 1 · Answer 1

I would do the following:

In the component, you would create an array with a "collapse46" element and a function that adds a component to the array every time you run.

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

    constructor() {
    }

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

Then in the HTML file of the component I would add the element but iterating the array with * ngFor and placing the ngModel to change this slope of the changes in the collapses variable.

<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>

Finally I add the button that executes the function "addCollapse ()" with the click event.

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

I think that this should work for you ... Please let me know if this is the case to know if my classes are having an xD effect. And if not also to solve it.

Greetings.