Angular - change text of label dynamically

Question

QUESTION:
how can I change the text of a label depending on a condition? In my case I want to have a blank label if I am on a specific route in my App.

CURRENT ATTEMPT:

<RadSideDrawer allowEdgeSwipe="false">
    <StackLayout tkDrawerContent class="drawer-container" VerticalOptions=LayoutOptions.FillAndExpand>
        <GridLayout rows="2*,2*,*,*,*,3*,*,*,*,*,4*" columns="*,6*">
            <Label row="0" col="0" class="fa drawerContainerSymbol" text="&#xf00d;" (tap)="onCloseDrawer()"></Label>
            <Label row="1" col="0" class="fa drawerContainerSymbol" text="&#xf053;" *ngIf="!onMonitorlist()" (tap)="onGoBack()"></Label>
            <Label row="2" col="0" class="fa drawerContainerSymbol" text=""></Label>
            ...
        </GridLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <page-router-outlet></page-router-outlet>
    </StackLayout>
</RadSideDrawer>

The code for checking if I am on the specific route:

    onMonitorlist(){
        if(this.router.url === '/monitorliste'){
            return true;
        } else{
            return false
        }
    }

This was my attempt with *ngIf but if I do it like this I get an ugly white label looking like this:

If you have a nice solution on how to display text on label dynamically please let me know!
Cheers!

Answer 1

You can set text for your label by default. Then when you are on a specific route in your App you can hide that label by *ngIf and function you have written.

 <Label *ngIf="onMonitorlist()"> your text </Label>

 onMonitorlist(){
        if(this.router.url === '/monitorliste'){
            return false;
        } else{
            return true
        }
    }

Answer 2

I think you should use ngStyle with your condition instead of ngIf .

<Label [ngStyle]="{'display': onMonitorlist() ? 'block' : 'none'}"> your text </Label>

Answer 3

I ended up using [ngClass]="{'drawerContainerTransparent': onMonitorlist()===true}"

.drawerContainerTransparent{
        background: rgb(0,204,153);
        background-color: #00CC99;
        color: rgb(0,204,153);
    }

I know the button isn't disabled this way, but I disabled the logic of the button, if I am on the route where it should not be useable. So nothing happens when tapping on the invisable button.