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?
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.
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.
There are two way:
Make a service instance public
constructor(
public debugService: DebugService,
) {}
Use a method (recommended way).
public isDebugActive() {
return this.debugService.debugActive;
}
<div *ngIf="isDebugActive()"></div>