Angular 5 using Web api Login authentication

1(How to add comments in Angular 7

Name of components are

logincomponent=

logincomponent.component.Html

<div class="row">

<input type="text" [(ngModel)]="uname" placeholder="UserName"><br>

<input type="text" [(ngModel)]="pwd" placeholder="password"><br>

<input type="button" value="login" (click)="validateUser(uname,pwd)">

</div>

logincomponent.component.ts

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

import { LoginServiceService } from '../login-service.service';

@Component({

selector: 'app-logincomponent',

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

styleUrls: ['./logincomponent.component.css']

})

export class LogincomponentComponent {

constructor(private loginservices:LoginServiceService) {

}

validateUser(username:string,password:string)

{

this.loginservices.LoginUser(username,password);

this.loginservices.getFoods();

}

}

app-routing.module:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->

<app-logincomponent></app-logincomponent>

app.component.ts

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

@Component({

selector: 'app-root',

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

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'MyPorject1';

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { LogincomponentComponent } from './logincomponent/
logincomponent.component';

import { LoginServiceService } from './login-service.service';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

AppComponent,

LogincomponentComponent

],

imports: [

HttpClientModule,

FormsModule,

BrowserModule

],

providers: [

LoginServiceService

],

bootstrap: [AppComponent]

})

export class AppModule { }

login-service.service.ts

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {

headers: new HttpHeaders({ 'Content-Type': 'application/json' })

};

@Injectable({

providedIn: 'root'

})

export class LoginServiceService {

constructor(private http:HttpClient) { }

LoginUser(UserName:string,Password:string)

{

console.log(UserName+','+Password);

}

getFoods() {

let a= this.http.get('https://reqres.in/api/users?page=2');

console.log(a);

}

}