How to use observables with Angular
Tags: observable, angular
Published: 2020-05-01 09:52:58

---
title: How to use observables with Angular
published: true
description: few notes about angular's observables
tags: observable, angular
series: 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.