How to show/hide a div tag or child tag component in Angular

Dung Do Tien Nov 06 2020 30

I'm using Angular version 8 to make a web application. In my Home component I want to show and hide a div tag contains a child component in this. I used ng-show and ng-if to show and hide the div tag but it didn't work for me.

<div class="top-latest-new">
  <top-new ng-show="displayNews"><top-new ng-show>
</div>

Please tell me if you have any solution!!!

Have 2 answer(s) found.
  • ng-show and ng-if directives are of angular js. You can not use it for angular 2+. Your project is angular version 8 you can do as below:

    - Option 1 : using [hidden] directive.

    <div class="top-latest-new">
      <top-new [hidden]="displayNews"><top-new ng-show>
    </div> 

    - Option 2: Using *ngIf 

    <div class="top-latest-new">
      <top-new *ngIf="displayNews"><top-new ng-show>
    </div> 
    
    Marry Christ Nov 08 2020
  • You can use CSS to show or hide a div or child component. You can do as below:

    <div class="top-latest-new">
      <top-new [ngClass]="displayNews ? 'show' : 'hide'"><top-new ng-show>
    </div> 

    In that show & hide is the class name.

    .show{ display: block; }
    .hide{ display: none; } 
    
    Manish Kumar Nov 08 2020
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips