servicios angular

component.ts

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core'
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: [
    './../../assets/css/bootstrap.css',
    './../../assets/css/animate.css',
    './../../assets/css/font-awesome.min.css',
    './../../assets/css/font.css',
    './../../assets/css/plugin.css',
    './../../assets/css/app.css',
    './login.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {
  returnUrl: string;
  username: string;
  password: string;
  
  constructor(
    private route: ActivatedRoute,
    private loginService: LoginService) { }

  ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }
  onSubmit(event: Event) {
    event.preventDefault(); // Avoid default action for the submit button of the login form

    this.loginService.
      login('eve.holt@reqres.in', 'cityslicka').
      subscribe(res => {
        console.log(res);      
      });

  }

}
// username: string, password: string, 
// username.value, password.value, 

serviciosangular.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class LoginService {

  constructor(private http: HttpClient) {
  }

  login(username:string, password:string) {
    return this.http.post('https://reqres.in/api/login', {
      email: username,
      password: password,     
    });     
  }  
}