CODEWITHSUNDEEP
htmlcssangularbootstrap-4ngfor
Qiimiia
Qiimiia

Reputation: 607

Align items to left with ngFor

I have a div and I want to add some inputs in it dynamically and since the inputs are supposed to make a number with a format, I add justify-content-end class to start from left. HTML:

<div class='row justify-content-end'>
  <ng-container *ngFor='let input of dashAndInputCount; let i = index'>
     <button (click)='addDashAndInput(i)'> - </button>
     <div class='col-2' style='padding-top: 2.2rem !important;'>
        <input type='number'></input>
     </div>
     <div class='col-1 ax-text-center'>
        <p>
          ــ
        </p>
     </div>
  </ng-container>
</div>

TS:

  addDashAndInput(i) {
    this.dashAndInputCount.push(1);
  }

Now the problem is that when I add an item, the item is added in a wrong direction. For instance if I add 1, 2, 3, 4 in the row I'll have 4, 3, 2, 1. How can I fix this?

Upvotes: 0

Views: 710

Answers (2)

Maciler
Maciler

Reputation: 1

Include d-flex class in the containter. With d-flex the element behaves like a block element and lays out its content according to the flexbox model.

Upvotes: 0

Arun Gaddam
Arun Gaddam

Reputation: 36

justify-content Property is dependent on display: flex You should add display: flex to the justify-content-end class

.justify-content-end{
   display: flex;
   justify-content: end;
}

Upvotes: 1

Related Questions