title: how to apply border color for ion-card using ngClass
body: <p>i an array like below</p>
  
  <pre><code>this.defaultBackground=[{"applyBackground":"true"},{"applyBackground":"false"}];
  </code></pre>
  
  <p>in my html i have used ion-card</p>
  
  <pre><code>&lt;div *ngFor="let details of addressArray; let idx = index" 
      [ngClass]="defaultBackground[idx].applyBackground ? 'zerocard':'oneCardData' "&gt;
     &lt;ion-card&gt;&lt;/ion-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my css code</p>
  
  <pre><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;
                  }
              }   
          }
  
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>the above code always applying only oneCardData css class.</p>
  
  <p>So in my inspect element i am seeing only <code>oneCardData</code> css but my <code>zerocard</code> css is not applyed</p>
  
  <p><strong>update</strong></p>
  
  <p>updated my html part with indext of idx in to get display true or false.</p>