Angular2 Subscribe to a global variable

Question

I'm fairly new to Angular 2 and I have a little problem. I have a header component, in the header I want to use an ngIf, cause in the login-screen I will hide the header(navbar). Furthermore, I want to hide some more things from the header, depending on the users-profile.

To store, if a user is logged in, I have a global service named variables.ts, which looks like this:

    import { Injectable }   from '@angular/core';

@Injectable()
export class Variables {
    private url = "...";
    private username;
    private password;
    private isLoggedIn = false;

    constructor() {}

    setUrl(val) {
        this.url = val;
    }
    getUrl() {
        return this.url;
    }

    setUsername(val) {
        this.username = val;
    }
    getUsername() {
        return this.username;
    }

    setPassword(val) {
        this.password = val;
    }
    getPassword() {
        return this.password;
    }

    setIsLoggedIn(val) {
        this.isLoggedIn = val;
    }
    getIsLoggedIn() {
        return this.isLoggedIn;
    }
}

My header-component looks like this:

    import { Component }            from '@angular/core';
import { Router }               from '@angular/router';
import { Variables }            from '../../services/variables';

@Component({
    selector: 'app-header',
    moduleId: module.id,
    templateUrl: 'header.component.html'
})


export class HeaderComponent {

    constructor(private variables: Variables) {}
    isLoggedIn() {  
        return this.variables.getIsLoggedIn();
    }
    console.log(loggedIn); 
}

And last but not least, in the header.component.html I did this:

<nav class="navbar navbar-default navbar-static-top" *ngIf="isLoggedIn()">

My problem now is, that the header-component do not automatically update the var loggedIn, so the header is hidden if I'm logged in.

How can i make it functional?

http://stackoverflow.com/questions/34572005/persisting-and-accessing-values-globally-in-multiple-components-in-angular-2 — Sefa, Oct 13 '16 at 11:24
thanks for the comment, but if i implement this, i get an "No Directive annotation found on Variables"... Do you know any help? — Junias, Oct 14 '16 at 05:32
Please edit your question and add the code there. Code in comments is unreadable. — Günter Zöchbauer, Oct 24 '16 at 06:11
I think it's better to move these variables to a service that you provide in `@NgModule({providers: [myService]}) class AppModule{}` and use an `Observable` (or `Subject`, `BehaviorSubject`) to allow interested components to subscribe to changes. See also https://angular.io/docs/ts/latest/cookbook/component-communication.html — Günter Zöchbauer, Oct 24 '16 at 06:17

score 0 · Answer 1 · answered Oct 24 '16 at 06:33

0

I updated my original post, so that it is functional now ;) Thanks for your help!

Solution: Don´t bind it directly to a variable, but to a function and in the "ngIf" just ask the function ;)

answered Oct 24 '16 at 06:33

Junias

3,037
2
15
21

`return this.variables.getIsLoggedIn();` creates an unconnected copy and therefore changes to the original are not reflected. With your approach you don't create a copy but bind to the original and therefore Angular2 change detection detects the changes and updates the view. – Günter Zöchbauer Oct 24 '16 at 06:34
There is a difference in how values are passed. Primitives like string, num, boolean are passed as copy, objects are passed as reference. When a reference is passed and the receiver modifies properties, then these changes are also visible in the original (they have a reference to the same object instance), this is not the case with primitives, because there are no references, only the values itself. – Günter Zöchbauer Oct 24 '16 at 07:30

Angular2 Subscribe to a global variable

1 Answers1