Angular Flex-Layout with Ngfor

Angular flex-layout with ngFor

I found the solution on: How to control number of items per row using media queries in Flexbox?

HTML:

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap">
  <country fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let country of countries" [country]="country"></country>
</div>

Typescript:

//I use this to show of expression bindings in flex-layout and because I don't want the calculated value in the HTML.
regularDistribution = 100 / 3;

wrap: multi-line / left to right in ltr; right to left in rtl

The key here is the fxLayoutWrap="wrap"

Angular Flex-layout with ngFor, X elements per row

Your code (derived from the other SO question) is not working because fxLayoutWrap is deprecated according to the changelog of Angular Flex-layout. Instead, you should set it directly to the fxLayout attribute to take effect:

fxLayout="row wrap" fxLayout.xs="column wrap"

is the outcome. I also add a percentage sign to the regularDistribution variable: 100 / 3 + '%'.

<div fxLayout="row wrap" fxLayout.xs="column wrap">
  <div fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let room of listRooms;" class="room">
      Room {{room|json}}
  </div>
</div>

Here's an updated StackBlitz that solves your issue. If the viewport is larger than fxFlex.gt-md, it will show three items per row.

Angular 7 flexbox with ngFor

You did were small mistake. You set the class main at the wrong place.
Try this:

// html
<div class="main">
  <div *ngFor="let hero of heros">
  <div class="child">
    {{hero.name}}
  </div>
</div>
</div>

// css
.main {
    width: 90%;
    list-style-type: none;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: red;
}

.child {
    width: fit-content;
    max-width: 100%;
    background: blue;
    margin: 1% 0px;

}

this will give a clear picture of how things are rendering.

*ngFor flexbox row direction

You should rearrange as

<div class="charts" style="padding-top: 0.5em">
      <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
        <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
        </span>
      </div>
</div>

The display: flex; flex-direction: row; should be on the parent div

Angular Flex Layout row wrap with grid align not working

Here is the solution, updated code can be accessed at stackblitz. Basically we need to wrap a div around mat-card and add fxFlex with percentage. In my case I had set it to 25 so that 4 cards come in first raw.

<div class="cards-container" style="width: 100%; syntax: 100%;">
  <div
    fxLayout="row wrap"
    fxLayoutAlign="start start"
    fxLayoutGap="32px 12px grid"
  >
    <ng-container *ngFor="let item of cards">
    <div fxFlex="25">  
      <mat-card>
        <mat-card-header>
          <mat-card-title>{{ item }}</mat-card-title>
          <mat-card-subtitle>subtitle</mat-card-subtitle>
        </mat-card-header>
        <img
          mat-card-image
          height="240px"
          width="240px"
          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
          alt="Photo of a Shiba Inu"
        />
        <mat-card-content> </mat-card-content>
        <mat-divider inset></mat-divider>
        <mat-card-actions>
          <button mat-button>Ok</button>
        </mat-card-actions>
        <mat-card-footer>
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </mat-card-footer>
      </mat-card>
    </div>
    </ng-container>
  </div>
</div>

How to use array to populate contents of the Flex Layout within for loop in angular 7

Pass in an @Input property to the CardComponent:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: 'card.component.html',
  styles: [`
  :host {
    display: block;
    padding: 25px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
  `]
})
export class CardComponent {
  @Input() cardContent;
}

And then use it in the template of the CardComponent:

<mat-card>
   <div style="height: 120px;">
      <div style="text-align: center;">
         <h2>{{ cardContent.title }}</h2>
      </div>
      <div style="font-size: small;">
         {{ cardContent.content }}
      </div>
   </div>
</mat-card>

You can then manage this content from the Parent Component:

<div 
   fxLayout="row wrap" 
   fxLayout.lt-sm="column" 
   fxLayoutGap="10px" 
   fxLayoutAlign="flex-start"
   style="margin-left: 5%;">

   <ng-container *ngFor="let content of contents">
      <app-card 
         fxFlex="0 1 calc(33.3% - 32px)"
         fxFlex.lt-md="0 1 calc(50% - 32px)"
         fxFlex.lt-sm="100%"
         [cardContent]="content"
         ></app-card>
   </ng-container>

</div>

You'll now have to manage a property named contents of type Array on the Parent Component now:

contents = [{ title: 'abc', content: 'lorem ipsum...' }, {...}, {...}]

---

Related Topics