Topic: Angular modals
junior5417 pro asked 6 years ago
Hi,
I wanted to show/hide the modals trigger by the typescript code, How do i call the style.hide() / style.show() in typescript?
This is the example for html trigger method in the documentation
<button type="button" class="btn btn-primary waves-light" (click)="style.show()" mdbWavesEffect>Central Modal</button>
<div mdbModal #style="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<div class="modal-body">
<div class="text-center">
<i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione
fuga, enim, ab officiis totam.</p>
</div>
</div>
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary waves-light" mdbWavesEffect>Get it now <i class="fa fa-diamond ml-1"></i></a>
<a type="button" class="btn btn-outline-secondary" data-dismiss="modal" (click)="style.hide()" mdbWavesEffect>No, thanks</a>
</div>
</div>
</div>
</div>
alain.deurveilher@gmail.com pro answered 6 years ago
@Component({...}) export class MyClassComponent { @ViewChild('style') styleModal: ModalDirective; onClick() { this.styleModal.show(); } }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No