How to create Observable function in angular

Read to understand Observable in angular What is Observable in angular.


Create a function in a service file that return Observable. authentication.service.ts

new Observable((observer))

public Login(email: string, password: string): Observable<any> {
    return new Observable((observer) => {
      // Clear Authorization token for API requests
      this.api.http.all('users/login').post({email: email, password: password}).subscribe(user => {
        // Set Authorization token for API requests
        localStorage.setItem(this.TOKEN_KEY, user.token);;


Consume Observable in component.ts with .subscribe()

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

import { AuthService } from '../authentication.service';

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
export class LoginComponent implements OnInit {

  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit() {

  // On login form submit
  onSubmit() {
    this.authService.Login(, this.loginForm.value.password).subscribe(user => {
      console.log('value:', user);



How to create Observable function in angular
Show Buttons
Hide Buttons