Affichage angulaire 5 * ng pour horizontalement

Question

Je construis ma première application angulaire en utilisant la dernière version et j'ai besoin d'aide pour afficher des informations dans une position spécifique.

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>

Donc cela l'affiche comme ceci: verticalement :(

Mais moi, je veux l'afficher horizontalement comme ceci: horizontalement :)

Alors comment puis-je faire cela en utilisant * ngfor pour charger ces informations? si je ne peux pas, que me conseillez-vous?

angular css ngfor angular5

1

mIcHy AmRaNe 27 nov. 2017 à 23:36

Answer 1

Vous pouvez utiliser le package Angular Flex Layout. Il vous suffit d'utiliser la mise en page row.

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

Voici un lien vers la bibliothèque @ angular / flex-layout.

Et une démo ici

7

cgatian 27 nov. 2017 à 22:23

Answer 2

Je ne sais pas si vous en avez encore besoin, mais enveloppez simplement votre div ngFor dans une rangée .

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

Voici un exemple de ce à quoi cela pourrait ressembler.

2

Gage Nathaniel 3 oct. 2019 à 01:53

Answer 3

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>

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

2

Manzer 27 nov. 2017 à 21:02

Affichage angulaire 5 * ng pour horizontalement

3 réponses

App.component.html:

Questions connexes

De nouvelles questions

angular