What is the equivalent of ngShow and ngHide in Angular 2

Question

I have a number of elements that I want to be visible under certain conditions   In AngularJS I would write   lt div ng-show  myVar  gt stuff lt  div gt    How can I do this in Angular 2

User · Answer

Sorry  I have to disagree with binding to hidden which is considered to be unsafe when using Angular 2  This is because the hidden style could be overwritten easily for example using   display  flex    The recommended approach is to use  ngIf which is safer  For more details  please refer to the official Angular blog  5 Rookie Mistakes to Avoid with Angular 2   lt div  ngIf  showGreeting  gt     Hello  there   lt  div gt

User · Answer

There are two examples on Angular documents https   angular io guide structural-directives why-remove-rather-than-hide     A directive could hide the unwanted paragraph instead by setting its display style to none     lt p  style display    block   gt    Expression sets display to  block     This paragraph is visible   lt  p gt    lt p  style display    none   gt    Expression sets display to  none     This paragraph is hidden but still in the DOM   lt  p gt    You can use  style display    block   to replace ngShow and  style display    none   to replace ngHide

User · Answer

Best way to deal with this issue using ngIf Because this well prevent getting that element render in front-end   If you use  hidden   true  or style hide  style display  it will only hide element in front end and someone can change the value and visible it easily   In my opinion best way to hide element is ngIf    lt div  ngIf  myVar  gt stuff lt  div gt    and also If you have multiple element  need to implement else also  you can Use  lt ng-template gt  option   lt ng-container  ngIf  myVar  then loadAdmin else loadMenu  gt  lt  ng-container gt   lt ng-template  loadMenu gt        lt div gt loadMenu lt  div gt   lt  ng-template gt    lt ng-template  loadAdmin gt        lt div gt loadAdmin lt  div gt   lt  ng-template gt      sample ng-template code

User · Answer

If you just want to use the symmetrical hidden shown directives that AngularJS came with  I suggest writing an attribute directive to simplify the templates like so  tested with Angular 7     import   Directive  Input  HostBinding   from   angular core     Directive   selector    shown      export class ShownDirective      Input   public shown  boolean      HostBinding  attr hidden     public get attrHidden    string   null       return this shown   null    hidden           Many of the other solutions are correct  You should use  ngIf where ever possible  Using the hidden attribute can have unexpected styles applied  but unless you are writing components for others  you probably know if it is  So for this shown directive to work  you will also want to make sure that you add    hidden       display  none  important      to your global styles somewhere   With these you can use the directive like so    lt div  shown   myVar  gt stuff lt  div gt    with the symmetrical  and opposite  version like so    lt div  hidden   myVar  gt stuff lt  div gt    To add on to the shoulds - yous should also us a prefix like so  acmeShown  vs just  shown     The main reason I used a shown attribute directive is for converting AngularJS code to Angular -AND- when the content that is being hidden contains container components that cause XHR round trips  The reason I don t just use  hidden    myVar  is that often enough it is more complicated like   hidden     myVar    yourVar   amp  amp  anotherVar  - yes I can invert that  but it is more error prone  shown   is simply easier to think about

User · Answer

lt div  hidden   myExpression  gt    myExpression may be set to true or false

User · Answer

Use the  hidden  attribute    hidden    myVar    Or you can use  ngIf   ngIf  myVar    These are two ways to show hide an element  The only difference is   ngIf will remove the element from DOM while  hidden  will tell the browser to show hide an element using CSS display property by keeping the element in DOM

User · Answer

Just bind to the hidden property   hidden    myVar    See also    https   developer mozilla org en-US docs Web HTML Global attributes hidden   issues  hidden has some issues though because it can conflict with CSS for the display property      See how some in Plunker example doesn t get hidden because it has a style    host  display  block     set   This might behave differently in other browsers - I tested with Chrome 50   workaround  You can fix it by adding   hidden    display  none  important     To a global style in index html   another pitfall  hidden  false  hidden    false    hidden    isHidden       isHidden   false    are the same as  hidden  true    and will not show the element    hidden  false  will assign the string  false  which is considered truthy  Only the value false or removing the attribute will actually make the element  visible    Using      also converts the expression to a string and won t work as expected    Only binding with    will work as expected because this false is assigned as false instead of  false     ngIf vs  hidden    ngIf effectively removes its content from the DOM while  hidden  modifies the display property and only instructs the browser to not show the content but the DOM still contains it

User · Answer

For anybody else stumbling across this issue  this is how I accomplished it   import  Directive  ElementRef  Input  OnChanges  Renderer2  from   angular core     Directive     selector    hide      export class HideDirective implements OnChanges      Input   hide  boolean     constructor private renderer  Renderer2  private elRef  ElementRef        ngOnChanges         if  this hide          this renderer setStyle this elRef nativeElement   visibility    hidden          else         this renderer setStyle this elRef nativeElement   visibility    visible                  I used  visibility  because I wanted to preserve the space occupied by the element  If you did not wish to do so  you could just use  display  and set it to  none    You can bind it to your html element  dynamically or not    lt span hide  true  gt  lt  span gt    or   lt span  hide   anyBooleanExpression  gt  lt  span gt

User · Answer

If your case is that the style is display none you can also use the ngStyle directive and modify the display directly  I did that for a bootstrap DropDown the UL on it is set to display none   So I created a click event for  manually  toggling the UL to display   lt div class  dropdown  gt       lt button class  btn btn-default   click   manualtoggle     id  dropdownMenu1   gt      Seleccione una Ubicaci  n      lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu   ngStyle    display displayddl   gt           lt li  ngFor  let object of Array   click   selectLocation location   gt   object Value   lt  li gt                                        lt  ul gt    lt  div gt        Then on the component I have showDropDown bool attribute that I toggle every time  and based on int  set the displayDDL for the style as follows  showDropDown boolean  displayddl string  manualtoggle        this showDropDown    this showDropDown      this displayddl   this showDropDown    inline     none

User · Answer

My issue was displaying hiding a mat-table on a button click using  lt ng-container  ngIf  quot myVar quot  gt   The  loading  of the table was very slow with 300 records at 2-3 seconds  The data is loaded using a subscribe in ngOnInit    and is available and ready to be used in the template  however the  loading  of the table in the template became increasingly slower with the increase in number of rows  My solution was to replace the  ngIf with   x000D   x000D   lt div  style display   activeSelected    block     none   gt  x000D   x000D   x000D     Now the table loads instantly when the button is clicked

User · Answer

for me   hidden   var has never worked    So    lt div  ngIf  expression  style  display none   gt   And    lt div  ngIf  expression  gt  Always give correct results

User · Answer

lt div  hidden   flagValue  gt  ---content---  lt  div gt

User · Answer

To hide and show div on button click in angular 6   Html Code   lt button  click    isShow  isShow  gt FormatCell lt  button gt   lt div class  ruleOptionsPanel   ngIf   isShow  gt   lt table gt   lt tr gt   lt td gt Name lt  td gt   lt td gt Ram lt  td gt   lt  tr gt   lt  table gt   lt  div gt    Component  ts Code   Component     selector   app-root     templateUrl     app component html     styleUrls      app component css      export class AppComponent   isShow false        this works for me and it is way to replace ng-hide and ng-show in angular6   enjoy     Thanks

User · Answer

in bootstrap 4 0 the class  d-none     display  none important     lt div  ngClass     d-none   exp   gt   lt  div gt

User · Answer

this is what worked for me    lt div  style visibility   showThis    visible     hidden   gt blah lt  div gt

User · Answer

I find myself in the same situation with the difference than in my case the element was a flex container If is not your case an easy work around could be     style display    isLoading    block     none     in my case due to the fact that a lot of browsers that we support still need the vendor prefix to avoid problems i went for another easy solution   class is-loading   isLoading    where then the CSS is simple as   amp  is-loading   display  none      to leave then the displayed state handled by the default class

User · Answer

According to Angular 1 documentation of ngShow and ngHide  both of these directive adds the css style display  none  important   to the element according to the condition of that directive  for ngShow adds the css on false value  and for ngHide adds the css for true value    We can achieve this behavior using Angular 2 directive ngClass      style css     hide        display  none  important      lt  -- old angular1 ngShow -- gt   lt div ng-show  ngShowVal  gt  I m Angular1 ngShow     lt  div gt    lt  -- become new angular2 ngClass -- gt   lt div  ngClass      hide    ngShowVal    gt  I m Angular2 ngShow     lt  div gt    lt  -- old angular2 ngHide -- gt   lt div ng-hide  ngHideVal  gt  I m Angular1 ngHide     lt  div gt    lt  -- become new angular2 ngClass -- gt   lt div  ngClass      hide   ngHideVal    gt  I m Angular2 ngHide     lt  div gt    Notice that for show behavior in Angular2 we need to add    not  before the ngShowVal  and for hide behavior in Angular2 we don t need to add    not  before the ngHideVal

User · Answer

If you are using Bootstrap is as simple as this    lt div  class hidden   myBooleanValue  gt  lt  div gt

User · Answer

Use hidden like you bind any model with control and specify css for it   HTML    lt input type  button  class  view form-control  value  View   hidden   true    gt    CSS    hidden       display  none

[angular] What is the equivalent of ngShow and ngHide in Angular 2+?

Examples related to angular

Examples related to angular-components

Examples related to angular-template