Angular 9 ng-if and ng-show - element is always displayed

Question

In Angular 9 I have code in that I want to hide html element. In typescript I have public property:

export class UserPageComponent implements OnInit {
  public postModel: any = {};

And in Html component I want to check if I should display html element:

<mat-video ng-if="postModel.moviePath != ''" src="{{ postModel.moviePath }}"></mat-video>

But element mat-video is always displayed. When I wanted to use ng-show the result is the same.

Sajeetharan · Accepted Answer · 2020-05-02T21:22:01.540

0

You are using angularjs syntax, with angular it should be ngIf directive

<mat-video *ngIf="postModel.moviePath != ''" src="{{ postModel.moviePath }}"></mat-video>

Also there is NO ng-show with angular.

edited May 02 '20 at 21:22

answered May 02 '20 at 21:16

Sajeetharan

also a note for OP, there is no angular version of angularJS's `ng-show` or `ng-hide` – bryan60 May 02 '20 at 21:19
so how to hide element in Angular 9? – Robert May 02 '20 at 21:38
you can do like this https://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular-2 – Sajeetharan May 03 '20 at 07:34

1 Answers1