CODEWITHSUNDEEP
javascripthtmlangularionic-framework
Ljonja
Ljonja

Reputation: 357

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?

Upvotes: 0

Views: 657

Answers (3)

Justwell Solets
Justwell Solets

Reputation: 171

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>

Upvotes: 0

Will Alexander
Will Alexander

Reputation: 3571

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.

Upvotes: 1

Alain Boudard
Alain Boudard

Reputation: 873

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.

Upvotes: 0

Related Questions