18

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?

AngularChef
  • 13,797
  • 8
  • 53
  • 69
Max Griffin
  • 439
  • 2
  • 5
  • 11
  • I have also tried `newTrustFormVisible: boolean = false;` which I think is actually the correct syntax for that line, although it hasn't made any difference to the result. – Max Griffin Feb 14 '17 at 01:17

1 Answers1

33

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

shusson
  • 5,542
  • 34
  • 38
  • That's working, thanks, but it's not animated like the example in the documentation (which you're right, appears to be for AngularJS 1.x)? – Max Griffin Feb 14 '17 at 01:24
  • 1
    animations are a separate kettle of fish see https://angular.io/docs/ts/latest/guide/animations.html – shusson Feb 14 '17 at 01:25
  • So where ng-show would animate automatically, the closest Angular 2 equivalents do not do so. Seems odd? I have switched to ngClass as this appears easier to animate, although I've not got animation to work, yet. I'll keep playing. – Max Griffin Feb 14 '17 at 01:36
  • 1
    If using the second technique, use this: [hidden] { display: none !important;} – Owen May 15 '18 at 07:21