Expected left to be stacked top left and right top right

[Need to stack elements with name left in left side and right in right side Using single *ngFor div/ ul /table any means ..... Sample play around provided below] https://stackblitz.com/edit/ngfor-index-example-wntaie?file=app/app.component.html

CodePudding user response：

You could add class based on condition.

So with your stackblitz example I would write it like this.

<div  *ngFor="let course of courses; index as i">
  <div [ngClass]="{'leftsec': courses[i].name == 'left',
  'rightsec': courses[i].name == 'right'}">
    {{course.name}}
  </div>
</div>

CodePudding user response：

Welcome @Rahul Krishnakumar! Since we speak about list items, you can try this solution.

P.S accidently I just saved it to your stackblitz. Sorry about that.

https://stackblitz.com/edit/ngfor-index-example-b2ysbk?file=app/app.component.html

<div>
  <ul>
  <li
    *ngFor="let course of courses; index as i"
    [ngClass]="courses[i].name == 'left' ? 'leftsec' : 'rightsec'"
  >
    {{ courses[i].name   ' '   courses[i].id }}
  </li>
</ul>
</div>

and the styling

.leftsec {
  float: left;
  padding: 10px;
  background-color: red;
}

.rightsec {
  float: right;
  padding: 10px;
  background-color: blue;
  color: white;
}

ul {
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  height: 16em;
}

li {
  padding: 1em;
  margin: 2px;
}