如何使用按钮单击隐藏一个div并显示另一个div？

Question

Home.component.html

 <div class="topnav">
        <ul class="nav nav-tabs">

                <li class="product"><a data-toggle="tab" href="#product" (click)="productRequest()">Products</a></li>
                <li class="user"><a data-toggle="tab" href="#user"  (click)="UserRequest()">Users</a></li>

                <li style="float:right"><a class="active" data-toggle="tab" href="#orderList" (click)=Ordercomponent.OrderRequest()>OrderLists</a></li>
                <li class="orderH"><a data-toggle="tab" href="#orderHistory" (click)=OrderHistoryComponent.OrderRequestHistory()>OrderHistory</a></li> 
        </ul>


 </div>


<div class="tab-content">


    <div class="col-md-8">
        <div>
             One for Product Lists
        </div>

        <div>
            One for UserLists 
        </div>

   </div>


  <div class="col-md-4">

         <div id="orderList" class="tab-pane fade in active">
                  <my-order #Ordercomponent></my-order>

        </div>

          <div id="orderHistory" class="tab-pane fade">
                            <my-orderHistory #OrderHistoryComponent> 
                          </my-orderHistory>
          </div>


       </div>


 </div>

 </div>

当我点击特定按钮时，它会显示内部视图 各栏（＆＃34; col-md-8＆＃34;（ProductLists和UserLists），                    ＆＃34; COL-MD-4＆＃34; （OrderLists和OrderHistory）） 但是div并没有隐藏。我怎么能隐藏它？

在我的组件文件中，我用这种方式做了，但事实并非如此  为我工作

 @ViewChild(ProductComponent)
 private productVariable:ProductComponent;

 @ViewChild(UserComponent)
 private userVariable:UserComponent;

  proVar:boolean;
  userVar:boolean;

  productRequest(){
    this.proVar=true;
    this.userVar=false;
       this.productVariable.productRequest();
   }

  UserRequest(){
    this.proVar=false;
    this.userVar=true;
    this.userVariable.UserRequest();

   }