Topic: Calling modal component from external component
I have a navigation bar through which I call login/signup components.
.html file parent element
<navlinks>
<a type="button"type="button"class="btn btn-sm btn-outline-default nav-link" (click)="loginForm()"mdbRippleRadius>login</a>
</navlinks>
<login [isModalShown]='loginFormModal'></login>
.ts file parent element
loginFormModal: boolean=fase;
loginForm() {
this.loginFormModal=!this.loginFormModal;
}
.html file child element
<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" mdbModal #autoShownModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
.ts file child element
@Input() isModalShown:boolean;
with the above implementation, modal opens for the first click of login button but for the second click it doesn't open up however it opens for the third click. It opens with every alternate click
Please suggest any changes I have to make or a better way to implement my scenario of calling login modal component from another component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 7 years ago
Dear srisumanth, If I understand your code logic, after clicking in Modal button you're changing loginFormModal from true to false and in reverse. I'm assuming, that you're displays modal only when loginFormModal is true. So now, it works correctly - when loginFormModal is false, modal won't show. And after another click, modal appears. For proper implementing this behavior, you have to check if modal is visible on screen. If yes, do something, if not, do another thing. Let me know if I understood you in right way. Best Regards, Damiansrisumanth pro premium commented 7 years ago
Dear Damian, sorry, I have pasted the wrong code before but now edited it Expected Behaviour: login modal must open and close as many times as clicked. present behavior: login modal only appears on alternate click of login button. logic: when user click on login button which is present in navBar component it will call loginForm() function and loginFormModal turns to true from false, this is passed to login component as Input.Damian Gemza staff commented 7 years ago
Could you send me your project at my mail? d.gemza@mdbootstrap.com , or create a reproduction example and send it to me / or push it to github and paste me link. Best Regards, damiansrisumanth pro premium commented 7 years ago
Dear Damian, I have mailed you the example Thanks and Regards, SumanthDamian Gemza staff commented 7 years ago
I didn't get any email. Spam folder is empty. Please send one more time.srisumanth pro premium commented 7 years ago
Dear Damian, I have resent you the mail let me know if you have still not received I will share with you some alternate way. Thanks and Regards, Sumanth