Xtykutl

My html code:

<ul style="list-style:none">

          <li  (click)="submitls();"><i class="fa fa-hospital-o first"

                aria-hidden="true"></i><a routerLink="/">LS</a></li>

<li  (click)="submitlsp();"><i class="fa fa-hospital-o first"

                aria-hidden="true"></i><a routerLink="/">LSP</a></li>

 </ul>

Likewise I am having another 5 options in list.

And Navbar menu,

<div class="row">

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

          <button type="submit"  id="category1" (click)="changeCat1();">

            <img [src]="path" alt="image not found" class="icon">

            category1

          </button></div>

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

          <button type="submit"  id="category2" (click)="changeCat2();">

            <img [src]="path" alt="image not found" class="icon">

            category2

          </button></div>

So, here I have another 3 categories also. Based on the selection of LS & category1 I need to display some data, Then based on the selection of LSP & category 1 I need to display some data.

My typescript file:

submits(){

    this.showls = true;

    this.changeCat1();

    this.showHlsTransformationpoc();



}

changeCat1(){

    this.showCat1 = true;

    this.showlspoc();

}

changeCat2(){

    this.showCat2 = true;

    this.showlspoc();

}



showlspoc(){

   this.showls_poc_flag = false;

    this.ls_cat2poc_flag = false;

     if(this.showls == true && this.showCat1 == true){

        this.showls_poc_flag = true;

    }

    else if(this.showls == true && this.showCat2== true){

        this.ls_cat2poc_flag = true;

    }

  }

So do I need to do like this for every category & also if I give another condition like this, it is not working. Can somebody help me with this please?