There are 2 ways to resolve this.

1.

Change private service: LoginService to public service: LoginService

As you are using AOT during compilation, you can not access private properties of your component in your HTML template.

2.

If you want to keep your service private, you can provide a public method in the controller which returns the service properties. You can call this method from your HTML template. It would be something like this:

Template:

<div id=login_section class=d-flex justify-content-center align-items-center>

    <div class=login_cnt col-8 row>

        <div class=col-6 d-flex justify-content-center py-4>



            <form class=col-8 [formGroup]=getLoginForm()> <!-- Change here-->

                <h2 class=text-center>User Login</h2>

                <mat-form-field class=col-12>

                  <input matInput type=text placeholder=Username formControlName=username >

                  <mat-error>Username is Required</mat-error>

                </mat-form-field>



                <mat-form-field class=col-12>

                  <input matInput [type]=hide ? 'password' : 'text' formControlName=password placeholder=Password>

                  <mat-icon matSuffix (click)=hide = !hide>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>

                  <mat-error>Password is Required</mat-error>

                </mat-form-field>

                <a href=# class=float-left lnk_forgot h7>Forgot Password</a>

                <button mat-raised-button color=primary class=float-right [routerLink]=['/home'] [disabled]=getLoginForm().invalid>Login</button> <!-- Change here-->

              </form>

        </div>

    </div>

</div>

Controller:

import { Component, OnInit } from '@angular/core';

import { LoginService } from '../shared/login.service';



@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

  styleUrls: ['./login.component.scss']

})

export class LoginComponent implements OnInit {

  username : string;

  password: string;

  hide = true;



  constructor(private service: LoginService) { }

  ngOnInit() {

  }



  getLoginForm() {

    return this.service.loginform;

  }

}

P.S: I have not tested the second one myself for the moment.