Angular 5 display *ngfor horizontally

Question

i\'m building my first angular app using latest version and i need some help to display some informations in a specific position.

app.component.ts:

Answer 1

I don't know if you still need this, but just wrap your ngFor in a row div.

<div class="row">
  <div *ngFor="let item of itemList">
    <span class="ml-2 badge badge-pill badge-primary"> {{item?.name}} </span>
  </div>
</div>

Here's an example of what that might look like.

Answer 2

app.component.html:

    <div class="footer">
      <div class="row">
        <div class="col-sm-12 links" *ngFor="let social of socials">
    <div style="float:left;height:50px;"  [ngStyle]="{'width': 'calc(100% /' + socials.length + ')'}">
          <a href={{social.link}} target="_blank">
            <i class={{social.icon}} aria-hidden="true"></i>
            <span>{{social.name}}</span>
          </a>
        </div>
      </div>
    </div>
 </div>

Link: https://stackblitz.com/edit/angular-zd69fh?file=app/app.component.html

Answer 3

You could use the package Angular Flex Layout. You just have to use the row layout.

<div fxLayout="row">
    <div *ngFor...></div>
</div>

Here is a link to the @angular/flex-layout library.

And a demo here