How to show/hide a div tag or child tag component in Angular
Dung Do Tien
Nov 06 2020
515
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.
-
M1
Marry Christ Nov 08 2020
ng-showandng-ifdirectives 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> -
M-1
Manish Kumar 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; }
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.