<ion-grid class="grid">
    <!-- header -->
    <ion-row class="ion-justify-content-center tab-header" (click)="onClick()"  >
      <ion-col [size]="12" no-padding>
        <div class="header">
          <img class="imgArrow" [src]="show ? 'assets/imgs/arrowUp.png' : 'assets/imgs/arrowDown.png' " 
          [ngClass]=" direction == 'ltr' ? 'icon right' : 'icon left' " >
          <ng-container *ngIf="header && !subHeader" > 
            <p  [ngClass]=" direction == 'ltr' ? 'title left' : 'title right' " >  {{header}} </p> 
          </ng-container>
          <ng-container *ngIf="header && subHeader ">
              <!-- <p 
              [ngClass]=" direction == 'ltr' ? 'title-subtitle left' : 'title-subtitle right' "
              class="innerheader"  > <strong> {{header}} </strong> <br> {{subHeader}} </p> -->
                <ion-row>
                  <ion-col col-6>
                      <p 
                      [ngClass]=" direction == 'ltr' ? 'title-subtitle left' : 'title-subtitle right' "
                      class="innerheader"  > <strong> {{header}} </strong>
  
                      </p>
                  <!-- </ion-col>
                  <ion-col col-6> -->
                      <p  [ngClass]=" subHeadergreen == true ? 'headerGreen' : 'headerRed' " >
                          {{subHeader}}
                      </p> 
                  </ion-col>
                </ion-row>  
             
              
          </ng-container>
        </div>
      </ion-col>
    </ion-row>
  
    <!-- rerendered every tiem version-->
    <ion-row class="zoomIn" *ngIf="show">
      <ion-col [size]="12" no-padding>
        <ng-content> </ng-content>
      </ion-col>
    </ion-row>
  
  </ion-grid>