# Items richtig listen



## Panda9296 (15. Jan 2021)

Hi und zwar bin ich seit gestern Mittag an einem Problem in angular...wobei ich glaube, dass es an Bootstrap liegen könnte... es geht darum, dass ich items habe, die irgendwie so aufgeteilt werden sollen, dass das erste item auf der linken Seite landet, dass zweite dann auf der rechten Seite und so weiter:


```
<header>
  <h2 style="text-align: center">Books</h2>
</header>
<body>
  <div class="container" *ngFor="let item of books;let i =index">
    <div class="row">
      <div class="col" *ngIf="i%2===0">
        <app-book-cardcomponent (click)="pushItemToSelect(item)"

                                [title]="item.title"
                                [author]="item.author"
                                [details]="item.details">
        </app-book-cardcomponent>
      </div>
      <div class="col" *ngIf="i%2!==0">
        <app-book-cardcomponent (click)="pushItemToSelect(item)"

                              [title]="item.title"
                              [author]="item.author"
                              [details]="item.details">

        </app-book-cardcomponent>
      </div>
    </div>

    </div>

</body>
```
ich hatte die Idee das mit ngIf zu machen.. items ein und ausblenden, je nach dem, ob das Argument true oder false ergibt... soweit so cool nur leider ist meine row dazwischen... das Ergebnis ist dann dass das erste item auf der linken seite angezeigt wird das zweite Item zwar auf der rechten Seite, allerdings in der nächsten Zeile, da ja die row nicht ausgeblendet wird und auch nicht ausgeblendet werden kann, da sie in dem Layout ja für die linke Seite benötigt wird pu das ist echt mies... gibt es eine bessere Lösung? im Form von einem Layout, womit ich die Idee vll so umsetzen kann?Ich hatte auch schon die Idee einfach 2 rows mit 50% breite zu nehmen, aber dann passt das layout nicht mehr


----------



## thecain (15. Jan 2021)

Das brauchst du doch gar nicht... einfach ein ngFor und die css-klasse `col-6` auf items


```
<div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
```


----------



## Panda9296 (15. Jan 2021)

ok danke  sry bin anfänger in Bootstrap


----------

