Menu
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?
In /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 produces no errors. What am I missing?
448
You can use [style. display]="'block'" to replace ngShow and [style. display]="'none'" to replace ngHide.
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements.
You can use getter function or get accessor to act as watch on angular 2.
The main difference is that *ngIf will remove the element from the DOM, while [hidden] actually plays with the CSS style by setting display:none . Generally it is expensive to add and remove stuff from the DOM for frequent actions.
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
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
