Topic: Angular modals
Chetan D
free
asked 7 years ago
I have navigation component and login component. Login component is inside navigation component like below.
this is inside Navigation html "<login ><login>"
SO from button click in Navigation component how do i call this model which is login component
this login component has a modal which is this
Dawid Adach
pro
answered 7 years ago
Dear Chetan D,
please verify that you are using correct example, please use following code:
<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbRippleRadius>Login / Register form</button> <!--Modal: Login / Register Form--> <div mdbModal #form="mdb-modal" class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog cascading-modal" role="document"> <!--Content--> <div class="modal-content"> <!--Modal cascading tabs--> <div class="modal-c-tabs"> <!-- Tab panels --> <mdb-tabset #staticTabs [buttonClass]="'nav nav-tabs tabs-2 light-blue darken-3'" [contentClass]="''" class="tab-content"> <!--Panel 7--> <mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel" heading="<i class='fa fa-user mr-1'></i> Login"> <!--Body--> <div class="modal-body mb-1"> <div class="md-form form-sm"> <i class="fa fa-envelope prefix"></i> <input mdbActive type="text" id="form22" class="form-control"> <label for="form22">Your email</label> </div> <div class="md-form form-sm"> <i class="fa fa-lock prefix"></i> <input mdbActive type="password" id="form23" class="form-control"> <label for="form23">Your password</label> </div> <div class="text-center mt-2"> <button class="btn btn-info waves-light" mdbRippleRadius>Log in <i class="fa fa-sign-in ml-1"></i></button> </div> </div> <!--Footer--> <div class="modal-footer display-footer"> <div class="options text-center text-md-right mt-1"> <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p> <p>Forgot <a href="#" class="blue-text">Password?</a></p> </div> <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbRippleRadius>Close</button> </div> </mdb-tab> <!--/.Panel 7--> <!--Panel 8--> <mdb-tab class="tab-pane fade" id="panel8" role="tabpanel" heading="<i class='fa fa-user-plus mr-1'></i> Register"> <!--Body--> <div class="modal-body"> <div class="md-form form-sm"> <i class="fa fa-envelope prefix"></i> <input mdbActive type="text" id="form24" class="form-control"> <label for="form24">Your email</label> </div> <div class="md-form form-sm"> <i class="fa fa-lock prefix"></i> <input mdbActive type="password" id="form25" class="form-control"> <label for="form25">Your password</label> </div> <div class="md-form form-sm"> <i class="fa fa-lock prefix"></i> <input mdbActive type="password" id="form26" class="form-control"> <label for="form26">Repeat password</label> </div> <div class="text-center form-sm mt-2"> <button class="btn btn-info waves-light" mdbRippleRadius>Sign up <i class="fa fa-sign-in ml-1"></i></button> </div> </div> <!--Footer--> <div class="modal-footer"> <div class="options text-right"> <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p> </div> <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbRippleRadius>Close</button> </div> </mdb-tab> <!--/.Panel 8--> </mdb-tabset> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Login / Register Form-->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Chetan D free commented 7 years ago
I am using MDB for angular Modal. Demo shows Login/Register both tabs but when i use i dont see the login/register tabs. Her i dont see any tags for those elements. Login / Register form <mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel" heading=" Login"> Your email Your password Log in Not a member? Sign Up Forgot Password? Close <mdb-tab class="tab-pane fade" id="panel8" role="tabpanel" heading=" Register"> Your email Your password Repeat password Sign up Already have an account? Log In Close