Change label style onTap


#1

Hi everyone!

I’m new on the forum and new to NativeScript so please excuse me if I’m asking a stupid question or if I’m on the wrong place. I tried to figure it out using google for days now but had no success.

On the bottom of the app I have some labels with icon font. So what I want to do is to change the label color when clicked.

Here is my app.components.ts

import { Component } from "@angular/core";
import * as dockModule from "tns-core-modules/ui/layouts/dock-layout";
import { TNSFontIconService } from 'nativescript-ng2-fonticon';
import {topmost} from "ui/frame";   
import {Page} from "ui/page";



@Component({
  selector: "my-app",
  template: `
    <!-- <ActionBar title="Rupa GIS" class="action-bar" font-size= "7"></ActionBar> -->
    <ActionBar title="Rupa GIS" android.icon="res://icon" android.iconVisibility="always" class="action-bar" ></ActionBar>
    
    <!-- Your UI components go here -->
    
    <Page  class="pg">
    <DockLayout class="formMessag">
     <GridLayout class="formMessage1" columns="2*,2*,2*,2*" rows="" dock="bottom" verticalAlignment="bottom" class="mdi" >
     <Label class="mdi1" id="dd" [text]="'mdi-map' | fonticon" row="0" col="0"  (tap)="onTapMap()"   backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center" ></Label>     
     <Label class="mdi2" [text]="'mdi-camera' | fonticon" row="0" col="1" (tap)="onTapCam()" backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center"  ></Label>
     <Label class="mdi3" [text]="'mdi-info' | fonticon" row="0" col="2"  (tap)="onTapInfo()" backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center" ></Label>
     <Label class="mdi4" [text]="'mdi-settings' | fonticon" row="0" col="3" (tap)="onTapSett()"  backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center" ></Label>
     </GridLayout>
    </DockLayout> 
  </Page> 
 
  `
})



export class AppComponent  {
  // Your TypeScript logic goes here
 // var isSelected = "true";

  onTapMap(dd) {
   // boolean isSelected = true;
    let self = this;
    console.log("MAPA");
    

  }

  

  onTapCam() {
    console.log("KAMERA");
  }

  onTapInfo() {
    console.log("INFORMACIJE");
  }

  onTapSett() {
    console.log("PODESAVANJA");
  }
 
  constructor(private fonticon: TNSFontIconService, private page: Page) {
    page.actionBarHidden = true;
    
  }
  
}
export function pageLoaded() {
  console.log("DOBAR DAN!");
}

And here is my app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { TNSFontIconModule } from 'nativescript-ng2-fonticon';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [
    NativeScriptModule,
    TNSFontIconModule.forRoot({
      'mdi': 'material-design-icons.css'
    })
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

And here is the main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";

platformNativeScriptDynamic().bootstrapModule(AppModule);

Any advise or guidance would be greatly appreciated.


#2

Hey @Draugnim please share the file where the onTapMap(), onTapCam(), onTapInfo(), and onTapSett() are implemented. Normally it should be as simple as setting the .color (or is it .style.color?) of the selected element.


#3

Hi Pete. Thank you for your help!

They are in the first file I added.


#4

I’m not sure what you mean by the file where those functions are implemented?


#5

I only spotted the html, and didn’t see that it’s a template string in your angular component.


#6

So I defined the ID of the first label as ‘dd’ but in the onTapMap() function I can’t code something like this

dd.color = "red";

I now that I’m missing something trivial and essential but can’t figure out what.


#7

Any suggestion how I could make it so that the onTapMap function changes the color of a label?


#8

Hey @Draugnim try to access the label widget reference by ViewChild.

Then try to apply this,

dd.color = "red";

Have a look at Accessing NativeScript controls in Angular 2 with ViewChild.,


#9

You could also leverage Angular’s binding mechanism.

Let’s say you have the following css classes:

.red {
 // styling here
}
.blue {
 // styling here
}

And in your component you have an attribute

export class MyComponent {
  selectionIndex: number = 0;

  setRed() {
    this.selectionIndex = 1;
  }

  setBlue() {
    this.selectionIndex = 2;
  }
}

Then in your html you can do something like this:

  <Label
    class="mdi1"
    [class.red]="selectionIndex === 1"
    [class.blue]="selectionIndex === 2"
    text="'Make both labels RED"
    (tap)="setRed()" >
  </Label>     
  <Label
    class="mdi2"
    [class.red]="selectionIndex === 1"
    [class.blue]="selectionIndex === 2"
    text="Make both labels BLUE"
    (tap)="setBlue()">
  </Label>