Conditional breakpoints – Angular Flex layout to Tailwind transition

Issue

Currently I have this implementation in Angular using Flex Layout. But Flex Layout is no more, so I’m transitioning to tailwindcss.

Everything has been going smooth until I stumbled upon this component…

<div fxLayout="row" *ngFor=" let moneda of tipoCambio; let i=index" fxShow.xs="{{i < 2}}" fxShow.sm="{{i < 3}}" fxShow.md="{{i < 5}}" fxShow.lg="{{i < 7}}" fxShow.xl="{{i < 12}}" fxLayoutAlign="center center" class="border-left">
    <button mat-button fxFlex>
        <span class="bold accent">{{moneda.codMonedaFuente | uppercase}}</span><span>&nbsp;</span>
        <span fxFlex class="font-size-dynamic">{{moneda.valor | number:'1.2-2'}}</span>
    </button>
</div>

As you can see, I’m using the index of the ngFor to validate how many items to show depending on the screen breakpoint. As tailwind is CSS only, I don’t know how to bridge this gap between Ng and Tailwind.

Any ideas?

Solution

I found the answer by applying ngClass conditionaly. It was rather simple.

<div class="flex-row justify-center items-center content-center border-left"
  *ngFor=" let moneda of tipoCambio; let i=index"
  [ngClass]="{'hidden': i > 1, 'sm:block': i < 3, 'md:block': i < 4, 'lg:block': i < 5, 'xl:block': i < 6, '2xl:block': i < 8}">
  <button mat-button>
    <span class="bold accent">{{moneda.codMonedaFuente | uppercase}}</span><span>&nbsp;</span>
    <span class="font-size-dynamic">{{moneda.valor | number:'1.2-2'}}
    </span>
  </button>
</div>

Answered By – Gerardo Buenrostro González

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published