Change layout based on screen width

Ionic Framework ionic-v3
1

I have a question regarding layout. Firstly I need to say that I’m already using media queries to change my layout based on screen width, BUT the thing I want here is a drastic change of layout.

What I mean is I have this:

<ion-item class="chapa" *ngIf="contexto == 'PT'">
                    <ion-label floating color="dark">Crachá</ion-label>
                    <ion-input type="text" [(ngModel)]="chapa" required></ion-input>
                </ion-item>

                <ion-list radio-group [(ngModel)]="tipoHorario" required name="tipoHorario" #name="ngModel">
                    <ion-item>
                        <ion-label>Entrada</ion-label>
                        <ion-radio value="E"></ion-radio>
                    </ion-item>

                    <ion-item>
                        <ion-label>Saída intervalo</ion-label>
                        <ion-radio value="I"></ion-radio>
                    </ion-item>

                    <ion-item>
                        <ion-label>Retorno intervalo</ion-label>
                        <ion-radio value="R"></ion-radio>
                    </ion-item>

                    <ion-item>
                        <ion-label>Saída</ion-label>
                        <ion-radio value="S"></ion-radio>
                    </ion-item>

                    <ion-item>
                        <ion-label>Presença de posto</ion-label>
                        <ion-radio value="P"></ion-radio>
                    </ion-item>
                </ion-list>

But when it’s a small device I want to change the list to a dropdown.

Should I write two different groups and change their visibility with Angular OR just change the content of the one I have now?

2

yeah i would use *ngIf to switch whole ui-elements

1 Like