Customization in Ionic Bottom Sheet - ionic-framework

Question

I am trying to add list in bottom sheet but ionic gave us an array so we can add class there and style it.
What i am trying to ask is how we can make a list or totally our own html code and pass it to bottom sheet function that will just display?
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
It is by default action sheet, what i want is to make it in DOM. I have found the similar question here with no answer Similar Question URL Please see what i need...!
What i need

Answer 1

Try with Modal Component
home.page.html
<ion-button (click)="OpenModel()">
Open Modal (Bottom)
<ion-icon mode="ios" name="arrow-forward"></ion-icon>
</ion-button>
home.page.ts
import { ModalController } from '#ionic/angular';
import { ModalpagePage } from '../modalpage/modalpage.page';
constructor(private modalCtrl: ModalController) {}
async OpenModel(){
const presentModel = await this.modalCtrl.create({
component: ModalpagePage,
componentProps: {
title: 'Billing Address',
type:'billing',
},
showBackdrop: true,
mode: "ios",
cssClass: 'change-address-shipping-modal'
});
presentModel.onWillDismiss().then((data)=>{
console.log(data);
//custom code
});
return await presentModel.present();
}
modalpage.page.html
<ion-header>
<ion-toolbar text-center>
<ion-title>
Modal title
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
HTML CODE HERE
</div>
</ion-content>
Declare in app.module.ts
declarations: [AppComponent, ModalpagePage],
entryComponents: [ModalpagePage],
Global.scss
.change-address-shipping-modal{
--height:60%;
align-items: flex-end;
}
ScreenShot
Demo

Answer 2

Currently action sheet does not allow you to add html code in it. This feature is however requested you can see here https://github.com/ionic-team/ionic/issues/16718

Answer 3

Try <ion-card>
<ion-header> </ion-header>
<ion-content> </ion-content>
<ion-card> </ion-card>
<ion-footer> </ion-footer>
you can use *ngIf to control ion-card
example:
in page.ts
showCard:Boolean = true;
constructor(){}
ngOnInit() {}
in page.html
<ion-card *ngIf="showCard"> </ion-card>
https://ionicframework.com/docs/api/card