CODEWITHSUNDEEP
nativescript
user2950720
user2950720

Reputation: 941

multi css selectors not applying style

I have a class that when clicked is styled differently.

I tried to have the element as:

<GridLayout (tap)="onHeaderClicked()" cssClass="table-header" [class.open]="isOpen"> </GridLayout>

however when trying to apply styling to:

.table-header.open{

}

the css is not getting applied, I have now had to resort to the following syntax and have 2 methods:

<GridLayout (tap)="onHeaderClicked()"  cssClass="{{isOpen ? 'table-header-open' : 'table-header-closed' }}">

and create styles for these individually

is this possible in nativescript?

Upvotes: 0

Views: 416

Answers (1)

Nikolay Tsonev
Nikolay Tsonev

Reputation: 1919

In case you want to add specific style on runtime, you could use ViewChild decorator and with its help to create new property, which is pointing to the GridLayout. With this property you could change existing style properties to this element.

app.component.html

<GridLayout #container (tap)="onHeaderClicked()" rows="auto" columns="auto" width="200" height="300" cssClass="{{isOpen ? 'table-header-open' : 'table-header-closed'}}">
    <Label row="0" col="0" text="sample text" textWrap="true"></Label> 
</GridLayout>

app.component.ts

import {Component, ViewChild, ElementRef} from "@angular/core"; 
import {setTimeout} from "timer"; 
import {View} from "ui/core/view"; 
import {GridLayout} from "ui/layouts/grid-layout"; 
import {Color} from "color"

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public isOpen:boolean;


    @ViewChild("container") container: ElementRef;

    constructor(){
        this.isOpen = true;
        var that = this;
        setTimeout(function() {
            that.isOpen=false;
        },3000);


    }
    public onHeaderClicked()
    {
        let container = <GridLayout>this.container.nativeElement;
        container.color=new Color("blue");
    }
}

app.css

.table-header-open{
    background-color: red;
}

.table-header-closed{
    background-color: green;
}

Upvotes: 2

Related Questions