Angular modals

Topic: Angular modals

Chetan D 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

<!--Modal: Login / Register Form-->
    <div 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">
    
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-user mr-1"></i> Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fa fa-user-plus mr-1"></i> Register</a>
                        </li>
                    </ul>
    
                    <!-- Tab panels -->
                    <div class="tab-content">
                        <!--Panel 7-->
                        <div class="tab-pane fade in show active" id="panel7" role="tabpanel">
    
                            <!--Body-->
                            <div class="modal-body mb-1">
                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input 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 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">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 waves-effect ml-auto" data-dismiss="modal">Close</button>
                            </div>
    
                        </div>
                        <!--/.Panel 7-->
    
                        <!--Panel 8-->
                        <div class="tab-pane fade" id="panel8" role="tabpanel">
    
                            <!--Body-->
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input 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 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 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">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 waves-effect ml-auto" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                        <!--/.Panel 8-->
                    </div>
    
                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    <!--Modal: Login / Register Form-->

Chetan D 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

Add comment

Dawid Adach pro answered 7 years ago

0 0 Best answer

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-->

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Chetan D

0Support score
5Questions 0Answers

0Snippets likes 0Snippets