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.
Top comments (0)