Xtykutl

I have two set of categories(CategoryVerticals and CategoryHorizontals).
onclick of a single category (eg.. CategoryVertical 1) I need to display some data.
onclick of two categories(eg.. CategoryVertical 1 & CategoryHorizontal 2) I need to display some data.

Likewise I have to display some data onClick of all Combinations like these. As we are doing Isotopes in JQuery.

My Horizontal Categories:

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-2">

    <button type="submit" class="btn1" id="cat1" (click)="onClick('cat1');changeTrans();"

    </button>

</div>

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-2">

    <button type="submit" class="btn1" id="cat2" (click)="onClick('cat2');changeCol();"></button>

</div>

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-2">

    <button type="submit" class="btn1" id="cat3" (click)="onClick('cat3');changeBus();"></button>

</div>

My Vertical Categories:

<li (click)="submitVertical1();"><a href="" routerLink="/link">CategoryVetical1</a></li>

<li (click)="submitVertical2();"><a href="" routerLink="/link">CategoryVertical2</a></li>

<li (click)="submitVertical3()"><a href="" routerLink="/link">CategoryVertical2</a></li>

My Component.ts file:

  changeTrans(){

       this.flagTrans =true;

   }

  changeCol(){

      this.flagCol = true;

  }

  changeBus(){

       this.flagBus = true;

  }

  submitVertical1(){

      this.vertical1 = true;

      if(this.vertical1 == true &&  this.flagTrans == true{

          this.flagVerticalAndTrans = true;

      }

    else if(this.vertical1 == true &&  this.flagCol == true{

          this.flagVerticalAndCol = true;

      }

   else if(this.vertical1 == true &&  this.flagBus == true{

          this.flagVerticalAndBus = true;

      }

   }

  submitVertical2(){

      this.vertical2 =true;

        if(this.vertical2 == true &&  this.flagTrans == true{

          this.flagVerticalAndTrans = true;

      }

    else if(this.vertical2 == true &&  this.flagCol == true{

          this.flagVerticalAndCol = true;

      }

   else if(this.vertical2 == true &&  this.flagBus == true{

          this.flagVerticalAndBus = true;

      }

   }

And in html:

<div *ngIf="flagVerticalAndBus">

    sample content

</div>

<div *ngIf="flagVerticalAndTrans">

    sample content trans

</div>

<div *ngIf="flagVerticalAndCol">

    sample content col

</div>

<div *ngIf="flagVerticalAndTrans">

    sample vertical trans

</div>

<div *ngIf="flagVerticalAndCol">

    sample vertical col

</div>

<div *ngIf="flagVerticalAndBus">

    sample vertical Bus

</div>

But it is not working. Or do we have any other way to implement this? Please suggest.