DEV Community

Simone Gentili
Simone Gentili

Posted on • Edited on

How to use observables with Angular

#observable #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.

Top comments (0)