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.

Have you tried with `[ngClass]="true ? 'zerocard':'oneCardData' ">` and `[ngClass]="false ? 'zerocard':'oneCardData' ">`? If this does what you want then `defaultBackground.applyBackground` probably doesn't return what you expect. — Günter Zöchbauer, Dec 23 '16 at 12:32

Sandip - Frontend Developer · Answer 1 · 2016-12-23T12:50:51.747

0

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:

edited Dec 23 '16 at 12:50

answered Dec 23 '16 at 12:42

Sandip - Frontend Developer

14,397
4
35
61

i think my answer help you, no need index variable in for loop – Sandip - Frontend Developer Dec 23 '16 at 12:45
Your code does produce the right output, but isn't useful in the current scenario. Mohan has an `addressArray` in his question, so your solution would result in a nested loop, or you'd still have to fit in an index variable – Ivar Reukers Dec 23 '16 at 13:01
i answered when his html not proper, i just guess what he going to do and answer and my guess 70% correct – Sandip - Frontend Developer Dec 23 '16 at 13:02

score 0 · Accepted Answer · answered Dec 23 '16 at 12:45

0

Remove the quotes around the boolean values

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

answered Dec 23 '16 at 12:45

Günter Zöchbauer

623,577
216
2,003
1,567

you are right, if quotes will remove work perfect and no need to put condition as i put like 'true' in loop – Sandip - Frontend Developer Dec 23 '16 at 12:50

score 0 · Answer 3 · edited Jun 23 '20 at 14:29

0

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;
}

edited Jun 23 '20 at 14:29

Jason Aller

3,541
28
38
38

answered Jun 23 '20 at 13:04

Lovely Chakraborty

1
3

You used both here, box-shadow:none and padding. But either interfere with the border IMO. – Vega Jun 23 '20 at 17:54
The question is with ngClass – Vega Jun 23 '20 at 17:55

how to apply border color for ion-card using ngClass

3 Answers3