DEV Community

Simone Gentili
Simone Gentili

Posted on • Edited on

2 1

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)
})
Enter fullscreen mode Exit fullscreen mode

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)
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

And then let me introduce the service.

src/app/messenger.service.ts

The service provide a public observable.

public subject: Subject<LoginForm> = new Subject;
Enter fullscreen mode Exit fullscreen mode

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

send(form: LoginForm) {
  this.subject.next(form);
}
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode
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: '',
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

and thanks to the subscriber

subject.subscribe((form:LoginForm) => {
  console.log(form.username)
})
Enter fullscreen mode Exit fullscreen mode

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay