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    lt div  ngIf  edited  true  class  alert alert-success alert-dismissible fade in  role  alert  gt           lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt    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

User · Answer

This is a good use case for a directive  Something like this is surprisingly useful   Directive     selector    removeAfter      export class RemoveAfter     constructor readonly element  ElementRef lt HTMLElement gt                    Removes the attributed element after the specified number of milliseconds         default  1000           Input   removeAfter   1000      ngOnInit         setTimeout      gt          this element nativeElement remove           this removeAfter

User · Answer

You should use the  ngIf Directive  lt div  ngIf  quot edited quot  class  quot alert alert-success box-msg quot  role  quot alert quot  gt           lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt    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    lt div  ngFor  quot let obj of listOfObjects quot   ngIf  quot obj edited quot  class  quot alert alert-success box-msg quot  role  quot alert quot  gt           lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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      lt input type  text    ngModel    toggleShowHide  gt     lt br gt    Toggle Show hide     lt div  style visibility   toggleShowHide  gt          Final Release Angular 2     lt  div gt

User · Answer

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    lt div  ngIf  edited  true  class  alert alert-success alert-dismissible fade in  role  alert  gt           lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt    To    lt div  ngIf  edited  class  alert alert-success alert-dismissible fade in  role  alert  gt           lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt

User · Answer

There are two options depending what you want to achieve     You can use the hidden directive to show or hide an element   lt div  hidden    edited  class  alert alert-success box-msg  role  alert  gt     lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt   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    lt div  ngIf  edited  class  alert alert-success box-msg  role  alert  gt      lt strong gt List Saved  lt  strong gt  Your changes has been saved   lt  div gt     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

User · Answer

When you don t care about removing the Html Dom-Element  use  ngIf    Otherwise  use this    lt div  style visibility    numberOfUnreadAlerts    0     hidden     visible    gt     COUNTER    numberOfUnreadAlerts     lt  div gt

User · Answer

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

[typescript] Angular 2 Show and Hide an element

Examples related to typescript

Examples related to angular