Angular 2 - ngShow equivalent?

Question

According to my interpretation of the documentation, if I want to have an element hidden by default and display when the link is clicked, the following should work:

• At / app / app.component.ts

  newTrustFormVisible: false; 

• In / app / app.component.html

   <a href="#" (click)="newTrustFormVisible = !newTrustFormVisible;">[Add New]</a> <div ng-show="newTrustFormVisible" class="panel panel-default"> ... </div> 

However, this does not work. It also does not cause errors. What am I missing?

Answer 1

Used by Angular 1 directive. For Angular 2, use *ngIf for components that should not be in the DOM when they are hidden or tied to the hidden HTML property [hidden] , if you want the component to always be in the DOM but hiding from CSS.

eg:

 <div *ngIf="newTrustFormVisible" class="panel panel-default"> 

or

 <div [hidden]="!newTrustFormVisible" class="panel panel-default"> 

Angular 1 to Angular 2 links

* ngIf