I am trying to use the ion-list using [inset]=“true”. It works fine if I create static ion-items inside the list but if I load the items dynamically from the an array I get vertical spaces between the items.
Component
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css']
})
export class ExampleComponent {
alerts: string[] = ["Pokémon Yellow", "Mega Man X", "The Legend of Zelda", "Pac-Man", "Super Mario World"]
}
Template
<ion-content color="light">
<ion-list [inset]="true" *ngFor="let alert of alerts">
<ion-item button>
<ion-label>{{ alert }}</ion-label>
</ion-item>
</ion-list>
</ion-content>