How to solve problem with grid system in Angular ng-bootstrap

Question

I have strange problem in my Angular App.

I have created login form:

My Form in original size

And when user click register it should load new form which looks the same.

When i write whole code in one Component it works fine, but this is not the good way in Angular.

My base component:

<div *ngIf="!registerMode" class="container h-100">
    <div  class="row h-100  justify-content-center align-items-center text-center">
        <form class="p-5 col-md-5 col-sm-8 formShadow">
            <p class="h4 mb-4">Sign in</p>
            <input type="text" class="form-control mb-4" name="username" placeholder="Username">
            <input type="password" class="form-control mb-4" name="password" placeholder="Password">
            <div class="d-flex justify-content-around">
                <div>
                    <a href="">Forgot password?</a>
                </div>
            </div>
            <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
            <p>Not a member?
                <a (click)="registerToggle()">Register</a>
            </p>
        </form>
    </div>
</div>

<div *ngIf="registerMode" class="container h-100">
    <div class="row h-100 justify-content-center align-items-center text-center">
        <app-register (cancelRegister)="cancelRegisterMode($event)"></app-register>
    </div>
</div>

I have created new component which contains code:

<form class="p-5 col-md-5 col-sm-8 formShadow">
            <p class="h4 mb-4">Sign in</p>
            <input type="text" class="form-control mb-4" name="username" placeholder="Username">
            <input type="password" class="form-control mb-4" name="password" placeholder="Password">
            <div class="d-flex justify-content-around">
                <div>
                    <a href="">Forgot password?</a>
                </div>
            </div>
            <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
            <p>Not a member?
                <a>Register</a>
            </p>
        </form>

As you can see it's the same code but in different component.

The problem is when i want to display register form it looks like this.. Strange form

Answer 1

The problem may come from the fact that in your signin form the html hierarchy is

<div  class="row">
    <form class="col">
        ...

on the register form the html hierarchy is

<div  class="row">
    <app-register>
        <form class="col">
            ...

you may be loosing css logic here.

One solution I would do would be to have different routes and two different components

something like this in your module

  imports: [
    RouterModule.forRoot([
     {
       path:'signin,
       component: SignInComponent
     },
     {
       path:'register',
       component: RegisterComponent
     }
    ])
  ]