jeudi 18 janvier 2018

ion-checkbox:checked not working angular 2 ionic 2

I want to execute css when ion-checkbox is checked. But ion-checkbox:checked never executed.Image1

I want to highlight all column below it.

Here what I done.

**Html file

<ion-row class = "DefaultBundle">
    <ion-col col-4>Description of Services</ion-col>
    <ion-item col-4 style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Full Service Agency</ion-label>
        <ion-checkbox class = "Bundle1"></ion-checkbox> // <-- Here's the check box
    </ion-item>
    <ion-item col-4 [hidden] = "!DefaultBundle.checked" style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Frost & Co Lite</ion-label>
        <ion-checkbox class = "Bundle2"></ion-checkbox>
    </ion-item>
</ion-row>

Here are some of the fields that I want to highlight.

<ion-row>
    <ion-col>Market Appraisal</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>For Sale Board</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>Rightmove Portal Listing</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>

Here's my css.

.Bundle1:checked
{
    background-color: red; // <-- this is just for testing. And it never executes.
}

What I might be missing?




Aucun commentaire:

Enregistrer un commentaire