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);}Andthis.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 theMessengerService 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 thatsend 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 ongo!!! button.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
