Переход CSS метки не работает в одном компоненте, но работает во втором компоненте - Angular CLI

Question

Я новичок в области веб-разработки, и я просто настраиваю проект Angular CLI и создаю два компонента 'Login' и 'Registration', которые находятся в теме Admindek.но проблема в том, что переход метки текстового поля работает в компоненте входа, но не работает в компоненте регистрации.Это прекрасно работает, когда я перезагружаю всю страницу вручную.Но я не хочу перезагрузить всю страницу вручную.Это должна быть автоматическая перезагрузка компонента, и эффект перехода должен работать для всех компонентов.

Вот мой код

Компонент входа

<section class="login-block">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <form class="md-float-material form-material">
          <div class="text-center">
            <img src="../../../assets/images/logo.png" alt="logo.png">
          </div>
          <div class="auth-box card">
            <div class="card-block">
              <div class="row m-b-20">
                <div class="col-md-12">
                  <h3 class="text-center txt-primary">Sign In</h3>
                </div>
              </div>              
              <p class="text-muted text-center p-b-5">Sign in with your regular account</p>
              <div class="form-group form-primary">
                <input type="text" name="user-name" class="form-control" required="">
                <span class="form-bar"></span>
                <label class="float-label">Username</label>
              </div>
              <div class="form-group form-primary">
                <input type="password" name="password" class="form-control" required="">
                <span class="form-bar"></span>
                <label class="float-label">Password</label>
              </div>
              <div class="row m-t-25 text-left">
                <div class="col-12">
                  <div class="checkbox-fade fade-in-primary">
                    <label>
                      <input type="checkbox" value="">
                      <span class="cr"><i class="cr-icon icofont icofont-ui-check txt-primary"></i></span>
                      <span class="text-inverse">Remember me</span>
                    </label>
                  </div>
                  <div class="forgot-phone text-right float-right">
                    <a routerLink="/request-password-reset" class="text-right f-w-600"> Forgot Password?</a>
                  </div>
                </div>
              </div>
              <div class="row m-t-30">
                <div class="col-md-12">
                  <button type="button"
                    class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">LOGIN</button>
                </div>
              </div>
              <p class="text-inverse text-left">Don't have an account? <a routerLink="/signup"> <b>Register
                    here </b></a>for free!</p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Компоненты регистрации

<section class="login-block">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <form class="md-float-material form-material">
          <div class="text-center">
            <img src="../../../assets/images/logo.png" alt="logo.png">
          </div>
          <div class="auth-box card">
            <div class="card-block">
              <div class="row m-b-20">
                <div class="col-md-12">
                  <h3 class="text-center txt-primary">Sign up</h3>
                </div>
              </div>
              <p class="text-muted text-center p-b-5">Sign up with your regular account</p>
              <div class="form-group form-primary">
                <input type="text" name="full-name" class="form-control" required="">
                <span class="form-bar"></span>
                <label class="float-label">Your Full Name</label>
              </div>
              <div class="form-group form-primary">
                <input type="text" name="email" class="form-control" required="">
                <span class="form-bar"></span>
                <label class="float-label">Your Email Address</label>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group form-primary">
                    <input type="password" name="password" class="form-control" required="">
                    <span class="form-bar"></span>
                    <label class="float-label">Password</label>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group form-primary">
                    <input type="password" name="confirm-password" class="form-control" required="">
                    <span class="form-bar"></span>
                    <label class="float-label">Confirm Password</label>
                  </div>
                </div>
              </div>
              <div class="row m-t-25 text-left">
                <div class="col-md-12">
                  <div class="checkbox-fade fade-in-primary">
                    <label>
                      <input type="checkbox" value="">
                      <span class="cr"><i class="cr-icon icofont icofont-ui-check txt-primary"></i></span>
                      <span class="text-inverse">I read and accept <a href="#">Terms &amp; Conditions.</a></span>
                    </label>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="checkbox-fade fade-in-primary">
                    <label>
                      <input type="checkbox" value="">
                      <span class="cr"><i class="cr-icon icofont icofont-ui-check txt-primary"></i></span>
                      <span class="text-inverse">Send me the <a href="#">Newsletter</a> weekly.</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="row m-t-30">
                <div class="col-md-12">
                  <button class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">Sign up now</button>
                </div>
              </div>
              <p class="f-w-600 text-right">Already have an account? <a routerLink="/login">Login.</a></p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Код CSS

.form-material .float-label {
    pointer-events: none;
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 14px;
    font-weight: 400;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all;
}

.form-material .form-control.fill~.float-label,
.form-material .form-material .form-control.fill~.float-label {
    top: -14px;
    font-size: 11px
}

.form-material .form-primary .form-control:focus~label {
    color: #4099ff