How to change color text in menu, using Nativescript

Question

In this play I have a demo from my project.

I want to change color text in menu when I select it.

In html I used this code:

<GridLayout rows="*,60">
    <StackLayout row="1" orientation="horizontal" class="foot" backgroundColor="#eae8e8" padding="10 5 10 5">
        <StackLayout (tap)="gofp()" width="45%" textAlignment="center">
            <Label  text="Home">

            </Label>
        </StackLayout>
        <StackLayout (tap)="gosettings()" width="55%" textAlignment="center">
            <Label  text="Settings">
            </Label>
        </StackLayout>
    </StackLayout>
</GridLayout>

I try a function like this:

declare var $: any;

$(function () {
    $("#myMenu label").click(function () {
        $("#myMenu label").removeClass("active");
        $(this).addClass("active");
    });

});

but show this error:

$ is not defined

Can you give me any idea, how to change color text when I select it?

image

Thank you

Answer 1

Do not use jQuery. The easiest way is to use ngClass. [ngClass]="{ 'active': itemActive } . When you then (tap) the label you can set itemActive to true and then you have the active class on the Label.

Pass the event so you know which item you clicked and add the class accordingly.

Answer 2

I'm a relatively new Nativescript/Angular developer myself, but to my knowledge, you don't need to use jQuery to make a change like this (and I'm not sure if it works either, but I could be wrong). Using ViewChild and ElementRef , you can access the properties of the element and change them directly; try referring to and tweaking this playground to get the effect you want.