ngSwitch not working

[olyjosh]

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>

[chelaruc]

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

[olyjosh]

alright, I will do that

[chelaruc]

@olyjosh I'm waiting for the archive

[olyjosh]

Sent

On Tue, Feb 27, 2018 at 9:33 AM, Chelaru Ciprian notifications@github.com wrote:

@olyjosh https://github.com/olyjosh I'm waiting for the archive

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/light-bootstrap-dashboard-pro-angular/issues/16#issuecomment-368786580, or mute the thread https://github.com/notifications/unsubscribe-auth/AILD9LQmgdTojN9Bc7k4UKvYp7C7fUpRks5tY73sgaJpZM4SSRut .

-- *Joshua *Aroke. +2348061662025 f12softwares.com

Information contained in this email and any attachments are confidential and intended solely for the use of the addressee only or otherwise directed in such applicable cases. Any dissemination, distribution, copying or use of this communication without prior permission from the addressee is strictly prohibited. If you are not the intended recipient of this communication, please delete permanently without copying, disclosing or otherwise using its contents and notify the sender immediately. Please note that any views or opinions presented in this email are solely those of the author. Joshua accepts no liability for any damage caused by any virus transmitted by this email. All My communications with you is rendered in accordance with the applicable conditions. Thank you for too kind.

[chelaruc]

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

[olyjosh]

Thanks @chelaruc that solves it