Angular 2 Show and Hide an element

There are two options depending what you want to achieve :

1. You can use the hidden directive to show or hide an 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>

For you problem of change after 3 seconds, it can be due to incompatibility with setTimeout. Did you include angular2-polyfills.js library in your page ?

You should use the *ngIf Directive

<div *ngIf="edited" class="alert alert-success box-msg" role="alert">        <strong>List Saved!</strong> Your changes has been saved.</div>export class AppComponent implements OnInit{  (...)  public edited = false;  (...)  saveTodos(): void {   //show box msg   this.edited = true;   //wait 3 Seconds and hide   setTimeout(function() {       this.edited = false;       console.log(this.edited);   }.bind(this), 3000);  }}

Update: you are missing the reference to the outer scope when you are inside the Timeout callback.

so add the .bind(this) like I added Above

Q : edited is a global variable. What would be your approach within a *ngFor-loop? – Blauhirn

A : I would add edit as a property to the object I am iterating over.

<div *ngFor="let obj of listOfObjects" *ngIf="obj.edited" class="alert alert-success box-msg" role="alert">        <strong>List Saved!</strong> Your changes has been saved.</div>export class AppComponent implements OnInit{     public listOfObjects = [    {       name : 'obj - 1',       edit : false    },    {       name : 'obj - 2',       edit : false    },    {       name : 'obj - 2',       edit : false    }   ];  saveTodos(): void {   //show box msg   this.edited = true;   //wait 3 Seconds and hide   setTimeout(function() {       this.edited = false;       console.log(this.edited);   }.bind(this), 3000);  }}

When you don't care about removing the Html Dom-Element, use *ngIf.

Otherwise, use this:

<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">   COUNTER: {{numberOfUnreadAlerts}} </div>