'Ionic *ngIf - Check for global variables

Can *ngIf only check for local variables of the page or can I check global variables?

I want to do the following:

home.page.html

<div *ngIf="debugService.debugActive"></div>

debug.service.ts

debugActive: boolean = true;

contructor() {}
...

But right now, I have to first initialize the variable on my home.page.ts in order to use it in the html:

home.page.ts

import { DebugService } from 'src/app/services/debug.service';

localDebugActive: boolean = false;

constructor(
    private debugService: DebugService,
) {}

ngOnInit() {
    this.localDebugActive = this.debugService.debugActive;
}

home.page.html

<div *ngIf="localDebugActive"></div>

This means an extra-step and filling my whole pages with local variables. Is it possible without redeclaring it and using it directly in the HTML?

javascripthtmlangularionic-framework


Solution 1:[1]

There are two way:

  1. Make a service instance public

    constructor(
    public debugService: DebugService,
) {}

  2. Use a method (recommended way).

    public isDebugActive() {
    return this.debugService.debugActive;
}

<div *ngIf="isDebugActive()"></div>

Solution 2:[2]

The only way a component gets access to a service is by injecting it, ensuring that dependency injection works correctly. Services aren't really global variables, as you put it: they're not simply "accessible from anywhere". You do need to use DI.

Technically you can inject a service as a public variable rather than a private one, and access its members directly from the template. This is generally considered code smell, however.

Solution 3:[3]

You can expose the injected service as public :

public debugService: DebugService

And use it in your template. Though I don't like that very much, but for simple display, that would do the trick.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Will Alexander
Solution 3 Alain Boudard

Related Questions