Angular 2 - ngShow equivalent? [duplicate]

Question

According to my interpretation of the documentation, if I want to be able to have an element hidden by default, and shown when a link is clicked, the following ought to work?

1. In /app/app.component.ts

   newTrustFormVisible: false;
   

2. 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 produces no errors. What am I missing?

Answer 1

Your using Angular 1 directives. For Angular 2 use *ngIf for components that do not need to be in the DOM when they are hidden or bind to the HTML hidden property [hidden] if you want the component to always be in the DOM but hidden with CSS.

e.g:

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

or

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

Angular 1 to Angular 2 reference

*ngIf