creativetimofficial/ct-light-bootstrap-dashboard-pro-angular

ngSwitch not working

Closed this issue · 6 comments

I modified the login page such that i can use ngSwitch with some condition to change the div in which I have my login form controls. I want to switch to another div that contain controlls for Register but whenever i invoke this change value which ngSwitch binds to, the Login div disappear and the expected resigeration div won't come up. Below is the code snippet for reproduction if necessary

`
<div class="col-md-4 col-sm-6 col-md-offset-0 col-sm-offset-0 pull-right" [ngSwitch]="toggle">

                    <!--login-->
                    <div *ngSwitchDefault>
                        <form method="#" action="#">
                            <!--   if you want to have the card without animation please remove the ".card-hidden" class   -->
                            <div class="card card-hidden">
                                <div class="header text-center">Login</div>
                                <div class="content">
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input type="email" placeholder="Enter email" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Password</label>

                                        <div class="input-group">

                                            <input ngControl="login" [(ngModel)]="login" name="login"
                                                   *ngIf="!showPasswordText" type="password" placeholder="Password"
                                                   class="form-control">
                                            <input ngControl="login" [(ngModel)]="login" name="login"
                                                   *ngIf="showPasswordText" placeholder="Password" class="form-control">
                                            <span (mousedown)="mousedown()" (mouseup)="mouseup()" class="input-group-addon"><i class="pe-7s-look"></i></span>
                                        </div>


                                    </div>

                                </div>
                                <div class="footer  pull-right">
                                    <a (click)="gotoForg()">Forget Password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="submit" class="btn btn-fill btn-danger btn-wd">Login</button>
                                </div>
                                <div class="footer text-center ">
                                    <a (click)="gotoReg()">New User? Click Here to Register</a>

                                </div>
                            </div>
                        </form>
                    </div>


                    <!--Register start-->
                    <div *ngSwitchCase="1">
                        <form method="#" action="#">
                            <!--   if you want to have the card without animation please remove the ".card-hidden" class   -->
                            <div class="card card-hidden">
                                <div class="header text-center">Register</div>
                                <div class="content">
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input type="email" placeholder="Enter email" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Password</label>

                                        <div class="input-group">
                                            <input type="password" placeholder="Password" class="form-control">
                                            <span class="input-group-addon"><i class="pe-7s-look"></i></span>
                                        </div>


                                    </div>

                                </div>
                                <div class="footer  pull-right">
                                    <a (click)="gotoForg()">Forget Password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="submit" class="btn btn-fill btn-danger btn-wd">Login</button>
                                </div>
                                <div class="footer text-center ">
                                    <a (click)="gotoReg()">New User? Click Here to Register</a>

                                </div>
                            </div>
                        </form>
                    </div>


                    <!--Password forget start-->
                    <div *ngSwitchCase="2">
                        <form method="#" action="#">
                            <!--   if you want to have the card without animation please remove the ".card-hidden" class   -->
                            <div class="card card-hidden">
                                <div class="header text-center">Reset Password Request</div>
                                <div class="content">
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input type="email" placeholder="Enter email" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Password</label>

                                        <div class="input-group">

                                            <input type="password" placeholder="Password" class="form-control">
                                            <span class="input-group-addon"><i class="pe-7s-look"></i></span>
                                        </div>


                                    </div>

                                </div>
                                <div class="footer  pull-right">
                                    <a href="#">Forget Password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="submit" class="btn btn-fill btn-danger btn-wd">Login</button>
                                </div>
                                <div class="footer text-center ">
                                    <a (click)="gotoReg()">New User? Click Here to Register</a>

                                </div>
                            </div>
                        </form>
                    </div>
`

Hi, @olyjosh! Can you send me an archive for testing at ciprian@creative-tim.com?

alright, I will do that

@olyjosh I'm waiting for the archive

@olyjosh I've found the solution! You do not have to use class card-hidden because ngSwitch does that for you.

Thanks @chelaruc that solves it