Conditional breakpoints - Angular Flex layout to Tailwind transition-CodePudding

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" >
    <button mat-button fxFlex>
        <span >{{moneda.codMonedaFuente | uppercase}}</span><span>&nbsp;</span>
        <span fxFlex >{{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?

CodePudding user response：

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

<div 
  *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 >{{moneda.codMonedaFuente | uppercase}}</span><span>&nbsp;</span>
    <span >{{moneda.valor | number:'1.2-2'}}
    </span>
  </button>
</div>

CodePudding user response：

I would recommend you to spend a bit more time in reading the documentation. However, for your ease, here is a hack

<div >
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

md and lg are one of the breakpoints. You can use these breakpoints to specify how many columns you want to show on mobile screen, how many on desktop and so on. You can read further here Responsive Design