Angular 5 display *ngfor horizontally

问题

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:

socials = [
  {
    name: 'Github',
    icon: 'fa fa-github fa-2x',
    link: 'https://www.github.com/..';
  },
  {
    name: 'Twitter',
    icon: 'fa fa-twitter fa-2x',
    link: 'https://www.twitter.com/..';
  },
  {
    name: 'Keybase',
    icon: '',
    link: 'https://keybase.io/..';
  },
...
..
.

app.component.html:

<div class="footer">
  <div class="row">
    <div class="col-sm-12 links" *ngFor="let social of socials">
      <a href={{social.link}} target="_blank">
        <i class={{social.icon}} aria-hidden="true"></i>
        <span>{{social.name}}</span>
      </a>
    </div>
  </div>
</div>

so this display it like this: vertically :(

but me i want to display it horizontally like this: horizontally :)

so how can i do that while using *ngfor to load those informations ? if i cant , what do you advice me?

回答1:

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

回答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

回答3:

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.

来源：https://stackoverflow.com/questions/47519400/angular-5-display-ngfor-horizontally

标签

angular

css3

ngfor

angular5