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> </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> </span>
<span class="font-size-dynamic">{{moneda.valor | number:'1.2-2'}}
</span>
</button>
</div>
Answered By - Gerardo Buenrostro González
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.