We Keep Coding

Creating observable from submit event

Disclaimer: I'm super new to both Angular and RXJS.
I have a simple form from which I'm trying to create an observable. This will look for submit events and update some value in the component. However, I'm getting a this._subscribe is not a function error.
<form (submit)='submitForm()'>
<button type='submit'>Submit</button>
</form>
My component
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs';
import UtilsHelperService from '../services/utils-helper.service';
#Component({...stuffs...})
export class HomeComponent implements OnInit {
formSubmit: Observable<any>;
counter = 0;
constructor() { }
ngOnInit() {
const form = document.getElementsByTagName('form')[0];
this.formSubmit = Observable.create(form, 'submit');
}
submitForm() {
this.formSubmit.subscribe(
UtilsHelperService.formSubmitObserver(this.counter));
}
}
And my utils-helper.service.ts helper class...
import {Injectable} from '#angular/core';
#Injectable({
providedIn: 'root'
})
export default class UtilsHelperService {
static formSubmitObserver(counter) {
return {
next: (value) => {
counter++;
},
error: err => console.log(err),
complete: () => console.log('complete')
}
}
}
I see that the formSubmit observer is created fine.
I have the UtilsHelperService.formSubmitObserver method that returns an observer object with the 3 necessary methods.
So, I'm not sure whether if it's the Angular stuffs I'm doing wrong (which I guess not) or its the RXjs stuff. Thank you for your time reading it :)

Take a look at FormGroup. Its 'valueChanges' property is an observable you can subscribe to.
FormGroup formGroup;
// populate your formGroup (https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance)
formGroup.valueChanges.subscribe(// do whatever you want);

There were 2 things I did to solve the issue:
Using fromEvent instead of Observable.create to create observable from submit event. This way the subscription didn't threw error (investigating why..)
Updating component property from service won't work as the services are singletons. You either have to use eventemitter or use AngularJS styles dot rule. For this case, I added all the helper logic in the component itself.
ngOnInit() {
const form = document.getElementsByTagName('form')[0];
this.formSubmit = fromEvent(form, 'submit');
this.formSubmit.subscribe((submitEvent) => {
this.counter++;
this.formSubmitted.emit(this.counter);
})
}
With this I can remove the submitForm method from the component and template and the helper method from the service.

function variable dynamic setting

This question related to Syntactically anonymous/Arrow Function/add-hoc/factory DP functions:
I have a component which is embedded in the Html.
The component has a click event which is binded to a function. This function content depend on another component which has a reference to this component.
This is the component with the click event:
HTML:
<div (click)="doSomething()">Content.....</div> \\ Should it be with a brackets ?
In the component I just want to define the function signature:
#Component({
selector: 'app-embedded'
})
export class className
{
constructor() { }
ngOnInit() { }
doSomething:(booleanparams: boolean) => any; //The function get a boolean parameter as input and return void or any
}
Now this is where the component is embedded:
<div >
<app-embedded #emb></app-embedded>
</div>
This is the component of the container of the embedded component, which has a reference to the embedded component:
#Component({
selector: 'app-container',
})
export class container
{
#ViewChild('emb') private emb: ElementRef;
booleanParam : booelan;
constructor()
{
emb.doSomething = containerFunction(true);
}
containerFunction(booleanParam : boolean)
{
// do something in this context
}
}
The idea is that this embedded component is embedded in many other containers and whenever the click event triggered a function that was set in the doSomething function variable should be executed.
What changes in the code I need to do in order to accomplish this ?

The best way i see of doing this would be to simply use an event emitter and capture the event on the other side? so embedded would have this:
#Component({
selector: 'app-embedded'
})
export class className
{
#Output()
public something: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
ngOnInit() { }
doSomething:(booleanparams: boolean) {
this.something.emit(booleanparams);
}; //The function get a boolean parameter as input and return void or any
}
Then where it is called:
<div >
<app-embedded #emb (something)="doSomething($event)"></app-embedded>
</div>
Other solution that would allow a return
#Component({
selector: 'app-embedded'
})
export class className
{
#Input()
public somethingFunc: (boolean)=>any;
constructor() { }
ngOnInit() { }
doSomething:(booleanparams: boolean) {
let w_potato = this.somethingFunc(booleanparams);
//Do whatever you want with w_potato
}; //The function get a boolean parameter as input and return void or any
}
in this case the view would be
<div >
<app-embedded #emb [somethingFunc]="doSomething"></app-embedded>
</div>
I hope this helps! Passing the function or emitting an event will be much more angular than trying to modify an instance of a component. On top of that, a constructor is only called once when Angular starts up so #emb at that time will not be defined to be anything. If you wanted to do it that way you would have to bind yourself in something ngAfterViewInit.
But again, I think that passing it through attributes will be much more angular looking.
Good Luck let me know if this doesn't suit your answer.

ngFor loop content disapears when leaving page

I am new to Angular and Ionic. I am looping through an array of content that is store in my Firestore database. When the app recompiles and loads, then I go to the settings page (that's where the loop is happening), I see the array of content just fine. I can update it on Firestore and it will update in real time in the app. It's all good here. But if I click "Back" (because Settings is being visited using "navPush"), then click on the Settings page again, the whole loop content will be gone.
Stuff is still in the database just fine. I have to recompile the project to make the content appear again. But once again, as soon as I leave that settings page, and come back, the content will be gone.
Here's my code:
HTML Settings page (main code for the loop):
<ion-list>
<ion-item *ngFor="let setting of settings">
<ion-icon item-start color="light-grey" name="archive"></ion-icon>
<ion-label>{{ setting.name }}</ion-label>
<ion-toggle (ionChange)="onToggle($event, setting)" [checked]="setting.state"></ion-toggle>
</ion-item>
</ion-list>
That Settings page TS file:
import { Settings } from './../../../models/settings';
import { DashboardSettingsService } from './../../../services/settings';
import { Component, OnInit } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-dashboard-settings',
templateUrl: 'dashboard-settings.html',
})
export class DashboardSettingsPage implements OnInit {
settings: Settings[];
checkStateToggle: boolean;
checkedSetting: Settings;
constructor(public dashboardSettingsService: DashboardSettingsService) {
this.dashboardSettingsService.getSettings().subscribe(setting => {
this.settings = setting;
console.log(setting.state);
})
}
onToggle(event, setting: Settings) {
this.dashboardSettingsService.setBackground(setting);
}
}
And my Settings Service file (the DashboardSettingsService import):
import { Settings } from './../models/settings';
import { Injectable, OnInit } from '#angular/core';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
#Injectable()
export class DashboardSettingsService implements OnInit {
settings: Observable<Settings[]>;
settingsCollection: AngularFirestoreCollection<Settings>;
settingDoc: AngularFirestoreDocument<Settings>;
public checkedSetting = false;
setBackground(setting: Settings) {
if (this.checkedSetting == true) {
this.checkedSetting = false;
} else if(this.checkedSetting == false) {
this.checkedSetting = true;
};
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({state: this.checkedSetting});
console.log(setting);
}
constructor(private afAuth: AngularFireAuth,private afs: AngularFirestore) {
this.settingsCollection = this.afs.collection('settings');
this.settings = this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
return data;
});
});
}
isChecked() {
return this.checkedSetting;
}
getSettings() {
return this.settings;
}
updateSetting(setting: Settings) {
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({ state: checkedSetting });
}
}
Any idea what is causing that?
My loop was in a custom component before, so I tried putting it directly in the Dashboard Settings Page, but it's still not working. I have no idea what to check here. I tried putting the :
this.dashboardSettingsService.getSettings().subscribe(setting => {
this.settings = setting;
})
...part in an ngOninit method instead, or even ionViewWillLoad, and others, but it's not working either.
I am using Ionic latest version (3+) and same for Angular (5)
Thank you!

From the Code you posted i have observed two findings that might be the potential cause for the issue ,
Calling of the Service method in the constructor :
When your setting component is created , then that constructor will be called but but if you were relying on properties or data from child components actions to take place like navigating to the Setting page so move your constructor to any of the life cycle hooks.
ngAfterContentInit() {
// Component content has been initialized
}
ngAfterContentChecked() {
// Component content has been Checked
}
ngAfterViewInit() {
// Component views are initialized
}
ngAfterViewChecked() {
// Component views have been checked
}
Even though you add your service calling method in the life cycle events but it will be called only once as you were subscribing your service method in the constructor of the Settings service file . so just try to change your service file as follows :
getSettings() {
this.settingsCollection = this.afs.collection('settings');
this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
return data;
});
});
}
Update :
Try to change the Getsettings as follows and please do update your question with the latest changes
getSettings() {
this.settingsCollection = this.afs.collection('settings');
return this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
return data;
});
});
}

I'm not certain, but I suspect the subscription to the settings observable settings: Observable<Settings[]> could be to blame. This may work on the first load because the DashboardSettingsService is being created and injected, therefore loading the settings, and then emitting an item (causing your subscription event in DashboardSettingsPage to fire).
On the second page load, DashboardSettingsService already exists (services are created as singletons by default) - this means that the constructor does not get called (which is where you set up your observable) and therefore it does not emit a new settings object for your component.
Because the Observable does not emit anything, the following event will not be fired, meaning your local settings object is never populated:
this.dashboardSettingsService.getSettings().subscribe(setting => {
this.settings = setting;
console.log(setting.state);
})
You could refactor your service with a method that provides the latest (cached) settings object, or a new Observable (dont forget to unsubscribe!!), rather than creating a single Observable which will only be triggered by creation or changes to the underlying storage object.
Here's a simple example that doesnt change your method signature.
import { Settings } from './../models/settings';
import { Injectable, OnInit } from '#angular/core';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
#Injectable()
export class DashboardSettingsService implements OnInit {
settings: Observable<Settings[]>;
cachedSettings: Settings[];
settingsCollection: AngularFirestoreCollection<Settings>;
settingDoc: AngularFirestoreDocument<Settings>;
public checkedSetting = false;
setBackground(setting: Settings) {
if (this.checkedSetting == true) {
this.checkedSetting = false;
} else if(this.checkedSetting == false) {
this.checkedSetting = true;
};
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({state: this.checkedSetting});
console.log(setting);
}
constructor(private afAuth: AngularFireAuth,private afs: AngularFirestore) {
this.settingsCollection = this.afs.collection('settings');
this.settings = this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
this.cachedSettings = data;
return data;
});
});
}
isChecked() {
return this.checkedSetting;
}
getSettings() {
return Observable.of(this.cachedSettings);
}
updateSetting(setting: Settings) {
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({ state: checkedSetting });
}
}

Emit http requests + debounce on Kendo field changes

I have a method which is called everytime some input text is change. (Basically it is a search).
I want to delay post/get request so if user quickly types, only one request will be send to server.
I was thinking something like that:
public partnerFilterChange(value)
{
if (this.partnersSubscriptions)
this.partnersSubscriptions.unsubscribe();
this.partnersSubscriptions = this.partnersService.list({ filter: value })
.debounceTime(5000)
.subscribe(partners =>
{
delete this.partnersSubscriptions;
this.partners = partners;
});
}
but it is not working.
Http request is executed immediately, not after 5 seconds. I also try delay instead debounceTime.
Edited:
I am using kendo drop down list component and its change event, so I have no control over the function call, only on subscribing to http request.

As per my comment. You can't use form.get('fieldName').valueChanges directly since you're using Kendo. But you CAN push the values received from Kendo to your own, custom observable, thus replicating the behavior of valueChanges:
class AppComponent {
// This is your own, custom observable that you'll subscribe to.
// It will contain a stream of filter values received from Kendo.
private _filterValues: Subject<string> = new Subject<string>();
constructor() {
// Start from your custom stream, debounce values, and run http query
this._filterValues.asObservable()
.debounceTime(400)
.mergeMap(value => this.partnersService.list({ filter: value }))
.subscribe(partners => this.partners = partners);
}
// This method is called by Kendo every time the field value changes.
handleFilter(value) {
// Push the value in the custom stream.
this._filterValues.next(value);
}
}
NB. This code assumes that this.partnersService.list() returns an observable.
With this code, every time you update the field, the list of partners should be refreshed and the debounce should be applied. (I haven't tested the code, you might need to adapt it to your own use case.)

import { Component, Output, HostListener, ChangeDetectionStrategy } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'my-user-search',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<form role="search" class="navbar-form-custom form-inline" [formGroup]="searchForm">
<div class="form-group">
<label for="user-search">Search</label>
<input
id="user-search"
class="form-control"
name="input"
type="text"
placeholder="Search Co-worker"
formControlName="search"
/>
</div>
</form>
`
})
export class UserSearchComponent {
searchForm = new FormGroup({
search: new FormControl('')
});
#Output() search: Observable<string> = this.searchForm.valueChanges
.map(form => form.search)
.debounceTime(700)
.distinctUntilChanged();
#HostListener('window:keyup', ['$event'])
cancelSearch(event) {
if (event.code === 'Escape') {
this.searchForm.reset();
// this.searchControl.setValue('', {emitEvent: true});
}
}
}
Usage
Where the $event value is the search term and (search) will be called first when 700ms has passed and the input is not the same
<my-user-search (search)="handleSearch($event)"></my-user-search>

I had a similar issue in my Angular 2 app, I am just going to paste my solution:
subscribeToSearchQueryChanges(){
const sub = Observable.fromEvent(this.panelSuggestionBox.nativeElement, 'keyup')
.debounceTime(300)
.filter((kbE: KeyboardEvent) => {
return !(kbE['code'] === 'Space' || kbE.key === 'ArrowDown' || kbE.key === 'ArrowUp' || kbE.key === 'Enter' || kbE.key === 'Tab' || kbE.key === 'Shift')
})
.map(() => _.trim(this.panelSuggestionBox.nativeElement.value) )
.filter((term: string) => term.length > 2 )
.switchMap((term: string) => this.suggestionService.getSuggestions(this.suggestionTypes, term))
.subscribe((suggestions: Suggestion[]) => {
this.suggestionsData = this.suggestionService.groupSuggestions(suggestions);
this.toggleSuggestionList();
}, err => {
console.error('suggestions failed', err);
this.removeSubscription(sub);
this.subscribeToSearchQueryChanges();
});
this.addSubscription(sub);
}

How to subscribe to an event on a service in Angular2?

I know how to raise an event with the EventEmitter. I can also attach a method to be called if I have a component like this:
<component-with-event (myevent)="mymethod($event)" />
When I have a component like this, everything works great. I moved some logic into a service and I need to raise an event from inside the Service. What I did was this:
export class MyService {
myevent: EventEmitter = new EventEmitter();
someMethodThatWillRaiseEvent() {
this.myevent.next({data: 'fun'});
}
}
I have a component that needs to update some value based on this event but i can't seem to make it work. What I tried was this:
//Annotations...
export class MyComponent {
constructor(myService: MyService) {
//myService is injected properly and i already use methods/shared data on this.
myService.myevent.on(... // 'on' is not a method <-- not working
myService.myevent.subscribe(.. // subscribe is not a method <-- not working
}
}
How do i make MyComponent subscribe to the event when the service that raises it is not a component?
I'm on On 2.0.0-alpha.28
EDIT: Modified my "working example" to actually work, so focus can be put on the not-working part ;)
Example code:
http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

Update: I have found a better/proper way to solve this problem using a BehaviorSubject or an Observable rather than an EventEmitter. Please see this answer: https://stackoverflow.com/a/35568924/215945
Also, the Angular docs now have a cookbook example that uses a Subject.
Original/outdated/wrong answer: again, don't use an EventEmitter in a service. That is an anti-pattern.
Using beta.1... NavService contains the EventEmiter. Component Navigation emits events via the service, and component ObservingComponent subscribes to the events.
nav.service.ts
import {EventEmitter} from 'angular2/core';
export class NavService {
navchange: EventEmitter<number> = new EventEmitter();
constructor() {}
emitNavChangeEvent(number) {
this.navchange.emit(number);
}
getNavChangeEmitter() {
return this.navchange;
}
}
components.ts
import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';
#Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number = 0;
subscription: any;
constructor(private navService:NavService) {}
ngOnInit() {
this.subscription = this.navService.getNavChangeEmitter()
.subscribe(item => this.selectedNavItem(item));
}
selectedNavItem(item: number) {
this.item = item;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
#Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
<div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>
`,
})
export class Navigation {
item = 1;
constructor(private navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this.navService.emitNavChangeEvent(item);
}
}
Plunker

Using alpha 28, I accomplished programmatically subscribing to event emitters by way of the eventEmitter.toRx().subscribe(..) method. As it is not intuitive, it may perhaps change in a future release.

Sometime quick fix of library cause that added event import like
import { EventEmitter } from 'events';
You must change it with core libray using subscribe
import { EventEmitter } from '#angular/core';