0

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?

1
  • 2
    You're not adding classes.
    – Akib
    Oct 25, 2022 at 6:02

1 Answer 1

0

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>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.