How to watch service variable in Angular 6

Question

ive been trying to make Angular update the service variable "open_popup" for days with no luck.

TLDR; What I'm trying to do, is whenever the variable "open_popup" changes, make it change on the component too also be able to change the service variable from a component function.

This is what I've tried so far.

app/src/app/audience-creator/shared/audience-creator.service.ts

import { Injectable } from "@angular/core";
import {Observable} from "rxjs/index";
import { of } from "rxjs/index";

@Injectable()
export class AudienceCreatorService {
    constructor(private http: HttpClient) {}

    public open_popup = false;

    public toggleCreatorPopup() {
        this.open_popup = !this.open_popup;
    }

    popupIsOpen(): Observable<any> {
        return of(this.open_popup);
    }
}

app/src/app/audience-creator/audience-creator.component.ts

import {Stuff} from "@angular/core";

@Component({
    selector: 'audience-creator',
    templateUrl: 'audience-creator.html'
})
export class AudienceCreatorComponent implements AfterViewInit, OnInit {

    public popup_is_open = false;

    @Input()
    audience_creator_service;

    ngOnInit() {
        this.audience_creator_service.popupIsOpen().subscribe(
            popup_is_open => this.popup_is_open = popup_is_open
        );
    }
}

app/src/app/audience-creator/audience-creator.html

--> {{ this.popup_is_open }} variable is always false.

doesn't work

{{ this.popup_is_open }}

PS: just tried to hack the function directly into the template and it works so there must be something wrong with the way im binding the component variable??

{{ audience_creator_service.popupIsOpen().value }}

Why don't you inject the service in the component constructor? — Martin Parenteau
– Martin Parenteau, Commented Jul 26, 2018 at 19:05
im passing the same service used in the app component as in <selector [audience_creator_service]="this.audience_creator_service"></selector> — user3531149
– user3531149, Commented Jul 26, 2018 at 19:07

René Winkler · Accepted Answer · 2018-07-26 19:09:10Z

5

@Injectable()
export class AudienceCreatorService {
constructor(private http: HttpClient) {}

public open_popup = false
private isOpen: BehaviorSubject<boolean> = new BehaviorSubject(false);

public toggleCreatorPopup() {
    this.open_popup = !this.open_popup;
    this.isOpen.next(this.open_popup);
}

popupIsOpen(): Observable<any> {
    return this.isOpen.asObservable();
}
}

answered Jul 26, 2018 at 19:09

René Winkler

7,2388 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christoph Lütjen Over a year ago

"open_popup" property seems redundant. isOpen.value could be used instead.

Collectives™ on Stack Overflow

How to watch service variable in Angular 6

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related