web-dev-qa-db-fra.com

ajouter dynamiquement un conteneur div en angulaire 6

Comment ajouter dynamiquement des conteneurs div angular ?.  

S'il vous plaît regardez mon code HTML. Chaque fois que je clique sur le bouton "Ajouter", une nouvelle div doit ajouter le côté gauche de ce bouton. Dynamiquement, il devrait ajouter plusieurs conteneurs en fonction du nombre de clics. Tout devrait ajouter en horizontal sage. Si ce sont plus de conteneurs par défaut, il faut ajouter un parchemin et être en uniforme. Quelqu'un peut-il m'aider s'il vous plaît à le faire dans angular 6.

#content{
    width:100%;
    height:90px;
    border:1px solid black;
}
#contentInside{
    width:100px;
    height:70px;
    margin:7px;
    border:1px solid black;
    display:inline-flex;
}
<div id="content">
    <div id="contentInside">
    
    </div>
    <button (click)="add()">Add</button> 

</div>

Je suis nouveau en angulaire. S'il vous plaît, aidez-moi à le faire.

htmlcssangularangular6
3
sathish kumar

Le moyen le plus simple de le faire est d'utiliser un tableau. Laisse moi te montrer comment. 

Voici le stackblitz

Je crée un tableau d'éléments vides et je l'appelle containers.

Chaque fois que l'utilisateur clique sur le bouton Add, j'ajoute un autre élément à ce tableau . L'élément I Push n'a pas d'importance, donc je spécifie la longueur actuelle du tableau afin qu'il se termine comme [0, 1, 2, 3, 4...]

@Component({
  selector: 'my-comp',
  template: `
    <div id="content">
      <div id="contentInside" *ngFor="let container of containers"></div>
      <button (click)="add()">Add</button>
    </div>
  `,
  styles: [`
    #content{
      width:100%;
      height:90px;
      border:1px solid black;
    }
    #contentInside{
      width:100px;
      height:70px;
      margin:7px;
      border:1px solid black;
      display:inline-flex;
    }
  `]
})

export class MyComponent implements OnInit {

  containers = [];

  constructor() { }

  ngOnInit() { }

  add() {
    this.containers.Push(this.containers.length);
  }
}
10
Bunyamin Coskuner

Essayez d’utiliser cet exemple avec les CSS mis à jour pour le défilement automatique:

https://stackblitz.com/edit/angular-pujraw?file=src%2Fapp%2Fapp.component.css

1
Dinesh Ghule