Basically what you can do is generate custom angular modal component as a wrapper with the desired look and style.
Example HTML component:
<div class="custom-modal">
<div class="custom-modal-body">
<ng-content></ng-content> <!--used for content projection-->
</div>
</div>
<div class="custom-modal-background"></div>
After that you generate modal service so it can add and remove modal upon click. For example:
export class ModalService {
private modals: any[] = [];
add(modal: any) {
this.modals.push(modal);
}
remove(id: string) {
this.modals = this.modals.filter(x => x.id !== id);
}
open(id: string) {
const modal = this.modals.find(x => x.id === id);
modal.open();
}
close(id: string) {
const modal = this.modals.find(x => x.id === id);
modal.close();
}
}
Once you are done with the service you can generate some component who will be as a wrapper to the wrapper modal component where content projection will be used. For example:
<custom-modal id="custom-modal-1">
<h1>A Custom Modal!</h1>
<p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
<button (click)="closeModal('custom-modal-1');">Close</button>
</custom-modal>
This is the simplest form of creating custom modal form, I suggest you using it with some kind of Angular Material type since modals can be hard to handle after custom implementation.
For full sample please see this stackblitz:
https://stackblitz.com/edit/angular-custom-modal-custom
I hope this will help you, happy coding
