How to show/hide in Angular2

Question

I have a component that show/hide element by clicking a button.

This is my html

  <div *ngFor="let history of histories | sortdate: '-dateModified'">
    <p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
    <a href="google.com" 
    [class.datatable-icon-right]="history.$$expanded" 
    [class.datatable-icon-down]="!history.$$expanded" 
    title="Expand/Collapse Row" 
    (click)="toggleExpandRow(history)"></a>
      <!-- hide/show this by clicking the button above.-->
    <div *ngFor="let step of history.steps; let i = index">
      <b>{{i+1}}.</b> {{step}}
      <span class="clear"></span>
    </div>
    <hr />
  </div>

and my .ts

  toggleExpandRow(row) {
    console.log('Toggled Expand Row!', row);
    //row
    return false;
  }

trying to search but, can't find any same sample.

On jquery, I can do this, but on Angular2, I am having hard time to figure this.

wrap it in the `...`, add `shown` property to the component and toggle it in the `toggleExpandRow` — Max Koretskyi, Jun 01 '17 at 05:40
may be u get yr answer from this stack answer: https://stackoverflow.com/questions/35163009/angular-2-show-and-hide-an-element — keyur patel, Jun 01 '17 at 05:42

score 2 · Answer 1 · answered Jun 01 '17 at 05:50

There are two options:

1- You can use the hidden directive to show or hide any element

<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>

2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.

<div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>

yeah, already read that answer, but It doesn't even provide on the .ts side on how it works. — Storm Spirit, Jun 01 '17 at 05:53
you can show this solutions from here https://plnkr.co/edit/FsrJZPIrzogud5PsRP0t?p=preview — Feras Al Sous, Jun 01 '17 at 06:01

score 1 · Answer 2 · answered Jun 01 '17 at 06:10

Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.

<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
  <b>{{i+1}}.</b> {{step}}
  <span class="clear"></span>
</div>

Then, in your .ts file:

  toggleExpandRow(history) {
     history.showStep = !history.showStep
     //note the same porperty of showStep that is used in your html
  }

Extra:

In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:

//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">

How to show/hide in Angular2

2 Answers2

Extra: