Here’s what’s in my ion-content:
<ng-container *ngFor="let item of weeklySchedule; let i = index" [style.z-index]="i + 10">
<ion-grid>
<ion-row class="ion-justify-content-between ion-align-items-center">
<ion-col>
<span [textContent]="item.name"></span>
</ion-col>
<ion-col size="auto">
<ion-item lines="none">
<ion-checkbox labelPlacement="end" justify="start" checked (ionChange)="isClosed(i, $event)">Closed</ion-checkbox>
</ion-item>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-between ion-align-items-center" [style.display]="item.is_closed ? 'none' : ''">
<ion-col size="4.5">
<ion-item lines="none">
<ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.am_opening"></ion-input>
</ion-item>
</ion-col>
<ion-col size="4.5">
<ion-item lines="none">
<ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.am_closing"></ion-input>
</ion-item>
</ion-col>
<ion-col size="auto">
<ion-button (click)="addSecondOpening(i)">
<ion-icon name="add"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-between ion-align-items-center" [style.display]="item.has_second_opening ? '' : 'none'">
<ion-col size="4.5">
<ion-item lines="none">
<ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.pm_opening"></ion-input>
</ion-item>
</ion-col>
<ion-col size="4.5">
<ion-item lines="none">
<ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.pm_closing"></ion-input>
</ion-item>
</ion-col>
<ion-col size="auto">
<ion-button (click)="removeSecondOpening(i)">
<ion-icon name="trash-outline"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
Typescript:
public weeklySchedule: any = [
{ name: 'Monday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
{ name: 'Tuesday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
{ name: 'Wednesday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
{ name: 'Thursday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
{ name: 'Friday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
{ name: 'Saturday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
{ name: 'Sunday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
];
constructor() {}
ngOnInit() {}
isClosed(index: number, event: any): void{
if(!event.detail.checked){
this.weeklySchedule[index].is_closed = false;
}else{
this.weeklySchedule[index].is_closed = true;
this.removeSecondOpening(index)
}
}
addSecondOpening(index: number): void{
this.weeklySchedule[index].has_second_opening = true;
}
removeSecondOpening(index: number): void{
this.weeklySchedule[index].has_second_opening = false;
}
Stylesheet:
ion-grid{
border-bottom: 1px solid rgba(var(--wahooo-text-color-rgb), 0.07);
margin-bottom: 16px;
width: 100%;
position: relative;
&:last-child{
border-bottom: 0;
}
ion-row{
ion-col{
padding: 0;
span{
font-size: .85rem;
font-weight: bold;
}
ion-item{
--background: transparent;
--padding-bottom: 0;
--padding-top: 0;
--padding-start: 12px;
--padding-end: 12px;
--inner-padding-bottom: 0;
--inner-padding-top: 0;
--inner-padding-start: 0;
--inner-padding-end: 0;
--border-radius: 20px;
width: fit-content;
margin: 0;
font-size: .8rem;
ion-checkbox {
--checkbox-background-checked: #0058F5;
--border-color-checked: #0058F5;
}
ion-checkbox::part(container) {
border-radius: 6px;
--checkbox-background: var(--wahooo-secondary-bg-color);
--border-color: var(--wahooo-secondary-bg-color);
}
ion-input{
--background: var(--wahooo-secondary-bg-color);
--padding-start: 12px;
--padding-end: 12px;
--border-radius: 20px;
font-size: .85rem;
--highlight-color-focused: var(--ion-color-primary);
--highlight-color-valid: var(--ion-color-primary);
--highlight-color-invalid: var(--ion-color-primary);
.label-text{
opacity: .5 !important;
}
}
}
ion-button{
height: 55px;
width: 55px;
--border-radius: 50%;
--background: var(--wahooo-secondary-bg-color);
--box-shadow: 0;
}
}
&:nth-child(2), &:nth-child(3){
ion-item{
width: 100% !important;
--padding-start: 0px !important;
--padding-end: 0px !important;
}
}
&:nth-child(2) ion-button{
color: var(--ion-color-primary);
ion-icon{
font-size: 1.5rem;
}
}
&:nth-child(3) ion-button{
color: var(--ion-color-danger);
margin-bottom: 16px;
}
}
}
I’m using ionic 7 - Angular - Capacitor. This was tested using an Android device