Angular 2 Show and Hide an element

Question

I'm having a problem hiding and showing an element depending of a boolean variable in Angular 2.

this is the code for the div to show and hide:

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

the variable is "edited" and it's stored in my component:

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);
   }, 3000);
  }
}

The element is hidden, when saveTodos function starts, the element is shown, but after 3 seconds, even if the variable come back to be false, the element does not hide. Why?

score 231 · Answer 1 · edited Nov 27 '16 at 09:51

There are two options depending what you want to achieve :

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>

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 ?

In case you have issues with hidden, please follow the answer of http://stackoverflow.com/a/35578093/873282: `[hidden] { display: none !important;}` in your global css. — koppor, Apr 02 '17 at 16:33

score 189 · Accepted Answer · edited Jun 20 '20 at 09:12

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);
  }
}

`edited` is a global variable. What would be your approach within a `*ngFor-loop`? — phil294, Jan 27 '17 at 11:53
Edited wouldn't be a global variable, it belongs to the component. I will add the answer above. — inoabrian, Jan 27 '17 at 14:04
ngif cause some angular material components fail to initialize and work properly, like mat-paginator.I think using [hidden] is better choice for some cases. — AmirHossein Rezaei, Jun 27 '19 at 20:19

score 42 · Answer 3 · answered Dec 07 '16 at 14:34

42

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>

answered Dec 07 '16 at 14:34

Dudi

3,069
1
27
23

score 16 · Answer 4 · answered May 03 '17 at 00:44

16

For child component to show I was using *ngif="selectedState == 1"

Instead of that I used [hidden]="selectedState!=1"

It worked for me.. loading the child component properly and after hide and un-hide child component was not undefined after using this.

answered May 03 '17 at 00:44

Swapnil Kale

2,620
2
23
21

Aluan Haddad · Answer 5 · 2021-04-10T23:38:57.623

10

This is a good use case for an Angular Directive. Something like this is surprisingly useful.

@Directive({
  selector: '[removeAfter]'
})
export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }
 
  /**
   * Removes the attributed element after the specified number of milliseconds.
   */
  @Input() removeAfter: number;

  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}

Usage:

<div [removeAfter]="3000">Removed after 3 seconds</div>

edited Apr 10 '21 at 23:38

answered Dec 08 '16 at 23:01

Aluan Haddad

29,886
8
72
84

I like the idea, but this will remove the element completely. I changed it to hide, so you could reuse it but that doesn't hide the element presumably due to the `ngIf` is `true`. Is there a way to set the parent's variable that controls this to `false`? – occasl Mar 21 '17 at 20:13
Can't you just add a hidden class or something instead of calling remove? This technique is pretty generic. – Aluan Haddad Mar 21 '17 at 20:31
I think the problem is `ngIf` is more for whether the element is in the DOM or not. What I want is this: `
...` where I show/hide messages if there are any and then remove messages after 3 seconds so user doesn't have to close box. I added your directive above and switched it to do a `hide()` but it doesn't get called when the messages are shown. How do I get it to be invoked on the event? `@Output()` and `EventEmitter`?
– occasl Mar 21 '17 at 22:02

score 8 · Answer 6 · answered Jun 30 '21 at 12:09

8

In TS file

showMyContainer: boolean = false;

In HTML

<button (click)="showMyContainer=!showMyContainer">Show/Hide</button>

<div *ngIf="showMyContainer">
     your code
</div>

See my stackblitz

Happy to hear if someone got helped.

answered Jun 30 '21 at 12:09

Pullat Junaid

3,224
3
25
25

score 6 · Answer 7 · edited Apr 24 '20 at 00:25

6

We can do it by using the below code snippet..

Angular Code:

 export class AppComponent {  
    toggleShowHide: string = "visible";  
 }

HTML Template:

  Enter text to hide or show item in bellow: 
  <input type="text" [(ngModel)]="toggleShowHide">
  <br>
  Toggle Show/hide:
  <div [style.visibility]="toggleShowHide">   
     Final Release Angular 2!
  </div>

edited Apr 24 '20 at 00:25

j3ff

5,719
8
38
51

answered Oct 25 '16 at 04:53

Rejwanul Reja

1,339
1
17
19

score 4 · Answer 8 · edited Oct 25 '16 at 04:55

4

Depending on your needs, *ngIf or [ngClass]="{hide_element: item.hidden}" where CSS class hide_element is { display: none; }

*ngIf can cause issues if you're changing state variables *ngIf is removing, in those cases using CSS display: none; is required.

edited Oct 25 '16 at 04:55

Günter Zöchbauer

623,577
216
2,003
1,567

answered Aug 31 '16 at 06:00

Luke Dupin

2,275
23
30

score 0 · Answer 9 · answered Jan 29 '18 at 17:27

@inoabrian solution above worked for me. I ran into a situation where I would refresh my page and my hidden element would reappear on my page. Here's what I did to resolve it.

export class FooterComponent implements OnInit {
public showJoinTodayBtn: boolean = null;

ngOnInit() {
      if (condition is true) {
        this.showJoinTodayBtn = true;
      } else {
        this.showJoinTodayBtn = false;
      }
}

score 0 · Answer 10 · answered May 28 '19 at 13:49

Just add bind(this) in your setTimeout function it will start working

setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);

and in HTML change

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

To

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

Philip Mutua · Answer 11 · 2023-02-16T08:08:09.287

You can use the built-in HTML attribute that can be used to conditionally hide or show an element which is [hidden].

NOTE: This will work on div if you try on any other element tag like this will not work.

HTML

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

TS file

export class AppComponent implements OnInit{
  edited: boolean;
  constructor(){}

  // function that does something then updates the edited condition
  func(){

   .....
    this.edited = true;
  }

....
 
}

Angular 2 Show and Hide an element

11 Answers11

Linked

Related