Ionic *ngIf - Check for global variables-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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.