'Bootstrap modal dialog is disabled in a project where Material modules are added

I am transferring my Bootstrap based Angular 11 project to Material based. Menu, Sidenav and new Material based components are working well. However my old Bootstrap based components having Modal dialogs started from a button press are shown as disabled and not reacting to anything. The exactly same code works well without Material modules included.

Immediately when I a add the Material components MatButtonModule,MatExpansionModule,MatIconModule, MatListModule,MatMenuModule, MatSidenavModule, MatToolbarModule to my app.module.ts, which are needed for the menu system the Bootstrap based Modal dialog in another component stops working (stays disabled).

There seems to be a problem with the concurrent use of Material and Bootstrap in this case. Is it possible to avoid it or is the only way to move all current bootstrap based modal dialogs to Material.

Dialog using Material modules in project
Dialog using Material modules in project

Same dialog using only Bootstrap
Same dialog using only Bootstrap



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source