How to use observables with Angular

The example is trivial, very trivial, but it aims to just keep the observable parts and remove other stuffs. I did this post because I would like to read this whenever I started to work with angular few months ago.

src/app/app.component.ts

And now let see the app component of this trivial example. The app component want to log the username whenever the service's observable receive a form.

let subject = this.messenger.subject.subscribe((form:LoginForm) => {
  console.log(form.username)
})

The form data will be sent via a form like the following.

src/app/app.component.ts

Let see the complete component.

import { Component } from '@angular/core';
import { MessengerService } from './messenger.service';
import { LoginForm } from './login-form';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private messenger : MessengerService) {
    this.messenger.subject.subscribe((form:LoginForm) => {
      console.log(form.username)
    })
  }
}

And then let me introduce the service.

src/app/messenger.service.ts

The service provide a public observable.

public subject: Subject<LoginForm> = new Subject;

and a method that send observable to the next observer, ...

send(form: LoginForm) {
  this.subject.next(form);
}

And this.subject.next(form); notify to all observer the form content. Do you remember the app component?

subject.subscribe((form:LoginForm) => {
  console.log(form.username)
})

Below you can read the MessengerService complete.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { LoginForm } from './login-form';

@Injectable({
  providedIn: 'root'
})
export class MessengerService {
  public subject: Subject<LoginForm> = new Subject;

  constructor() { }

  send(form: LoginForm) {
    this.subject.next(form);
  }
}

src/app/login-form/login-form.component.html

About this form we just need to see that it contains <input formControlName="username" name="username" />.

<form [formGroup]="customFormName 
      (ngSubmit)="onSubmit(customFormName.value)">
    <input formControlName="username" name="username" />
    <button type="submit">go!!!</button>
</form>

src/app/login-form/login-form.component.ts

Watching html you can see that send method is called after submit. Component's onSubmit method send data to the service ... messenger.send(data).

onSubmit(data) {
  messenger.send(data)
  this.clearForm();
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MessengerService } from '../messenger.service';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent implements OnInit {
  customFormName;

  constructor(
    private builder: FormBuilder,
    private messenger: MessengerService
  ) {
    this.clearForm();
  }

  ngOnInit() { }

  onSubmit(data) {
    messenger.send(data)
    this.clearForm();
  }

  private clearForm() {
    this.customFormName = this.builder.group({
      username: '',
    });
  }
}

and thanks to the subscriber

subject.subscribe((form:LoginForm) => {
  console.log(form.username)
})

You'll can see the username in console whenever you'll type a username and click on go!!! button.