how to apply border color for ion-card using ngClass

Question

i an array like below

this.defaultBackground=[{"applyBackground":"true"},{"applyBackground":"false"}];

in my html i have used ion-card

<div *ngFor="let details of addressArray; let idx = index" 
    [ngClass]="defaultBackground[idx].applyBackground ? 'zerocard':'oneCardData' ">
   <ion-card></ion-card>
</div>

here is my css code

.zerocard{
        .card-ios {
            margin: 12px 12px 12px 0px;
            border: 1px solid $green-color !important;
        }

        .card-md {
            margin: 12px 12px 12px 0px;
            border: 1px solid $green-color !important;
        }

                ion-col[width-80]{
            padding-left: 15px;
            font-family: $font-roboto;
            font-weight: bold;
            color: gray;
        }
        ion-col[width-20]{
            ion-icon{
                color:gray;
                padding-left: 15px;
            }
        }

        ion-card{
            width: 100%;
        }

        ion-card-header{
            padding: 0px;
        }

        ion-card-content{
            ion-row p {
                color:black;
                margin-bottom: -5px;
            }
            ion-row{

                ion-col{
                    margin-bottom: -14px;
                    margin-left: -5px;
                    margin-top: -5px;
                }
                ion-col[width-80]{
                    text-align: left;
                    padding-left: 0px;
                }
                ion-col[width-20]{
                    text-align: right;
                }
            }   
        }
    }

    .oneCardData{
        .card-ios {
            margin: 12px 12px 12px 0px;
            //border: 1px solid $green-color !important;
        }

        .card-md {
            margin: 12px 12px 12px 0px;
            //border: 1px solid $green-color!important;
        }

        ion-col[width-80]{
            padding-left: 15px;
            font-family: $font-roboto;
            font-weight: bold;
            color: gray;
        }
        ion-col[width-20]{
            ion-icon{
                color:gray;
                padding-left: 15px;
            }
        }

        ion-card{
            width: 100%;
        }

        ion-card-header{
            padding: 0px;
        }

        ion-card-content{
            ion-row p {
                color:black;
                margin-bottom: -5px;
            }
            ion-row{

                ion-col{
                    margin-bottom: -14px;
                    margin-left: -5px;
                    margin-top: -5px;
                }
                ion-col[width-80]{
                    text-align: left;
                    padding-left: 0px;
                }
                ion-col[width-20]{
                    text-align: right;
                }
            }   
        }

    }

i have two object from my array which is displayed in my ui in that card i have use two color based upon the 'defaultBackground' array.

the above code always applying only oneCardData css class.

So in my inspect element i am seeing only oneCardData css but my zerocard css is not applyed

update

updated my html part with indext of idx in to get display true or false.

Answer 1

Remove the quotes around the boolean values

this.defaultBackground=[{"applyBackground": true},{"applyBackground": false}];

Answer 2

It seems your html is not proper, please update your html as below:

<style>
    .zerocard {
        background-color:red;
        color:white;
    }
     .oneCardData {
        background-color:blue;
        color:white;
    }
</style>

<div *ngFor="let item of defaultBackground">
    <div [ngClass]="item.applyBackground=='true' ? 'zerocard':'oneCardData' " style="height:50px;">
        {{item.applyBackground}}
    </div>
</div>

Output:

Answer 3

It is simple in CSS. If we using box-shadow:none; it does not show border color. If we use padding then it works.

ion-card{
     box-shadow: none;
     border: black;
     background-color: white;
     border-radius: 5px;
     padding:15px;
}