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

The hidden property can be used for that

[hidden]="!myVar"

See also

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.

Related Posts:

  1. How to use *ngIf else?
  2. Could not find module “@angular-devkit/build-angular”
  3. Angular: conditional class with *ngClass
  4. Difference between Constructor and ngOnInit
  5. AngularJS vs Angular [closed]
  6. When to use ‘npm start’ and when to use ‘ng serve’?
  7. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  8. ExpressionChangedAfterItHasBeenCheckedError Explained
  9. Angular 10 – can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  10. ngFor with index as value in attribute
  11. How to upgrade Angular CLI to the latest version
  12. What is pipe for in RxJS?
  13. Angular: Get current index in ngFor
  14. What is .subscribe in Angular?
  15. BehaviorSubject vs Observable?
  16. Angular 6 “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”
  17. ERR_INVALID_HTTP_RESPONSE using Angular 7 and ASP.Net Core 2.2 in Google Chrome browser
  18. What is the difference between Promises and Observables?
  19. mat-form-field must contain a MatFormFieldControl
  20. formSelect() method in materialize does’nt work in angular 6 inputs
  21. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  22. form control error:ERROR Error: No value accessor for form control with unspecified name attribute
  23. You seem to not be depending on “@angular/core” and/or “rxjs”. This is an error
  24. ‘ng’ is not recognized as an internal or external command, operable program or batch file
  25. Kendo Angular Chart change legend position based on size
  26. Angular: conditional class with *ngClass
  27. Unexpected value ‘undefined’ declared by the module ‘AppModule’
  28. Angular: conditional class with *ngClass
  29. Where to place/find the systemjs.config.js file in an angularJS2 project?
  30. ng serve does not work
  31. document.getElementById replacement in angular4 / typescript?
  32. how to refresh page in angular 2
  33. TS1086: An accessor cannot be declared in ambient context
  34. Property ‘map’ does not exist on type ‘Observable‘
  35. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  36. ‘router-outlet’ is not a known element
  37. Angular 2 Cannot read property ‘config’ of null
  38. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  39. Set focus on element
  40. Cleanest way to reset forms
  41. Angular2 CLI error “@angular/compiler-cli” package was not properly installed
  42. Angular2 – How to create a simple table
  43. No provider for HttpClient
  44. Angular material Could not find Angular Material core theme
  45. Angular EXCEPTION: No provider for Http
  46. Error : Cannot find primary outlet to load
  47. cannot find module ‘@angular/http’?
  48. Templating with href in angular (4)
  49. How to implement sleep function in TypeScript?
  50. File Upload In Angular?
  51. is there any alternative for ng-disabled in angular2?
  52. Angular 2.0 and Modal Dialog
  53. Cannot find module ‘@angular/compiler’
  54. Implement session storage in an Angular 8 application
  55. Angular 2 [hidden] does not seem to be working?
  56. Local workspace file (‘angular.json’) could not be found. But same code works in another computer
  57. Can’t bind to ‘routerLink’ since it isn’t a known property
  58. How to use bootstrap 4 in angular 2?
  59. You have to be inside an angular-cli project in order to use the serve command
  60. How to get current route
  61. Angular4 core.es5.js Uncaught reflect-metadata shim is required when using class decorators
  62. Angular error: Please add a @NgModule annotation
  63. How to enable production mode?
  64. Angular 5: “No provider for ControlContainer”
  65. Getting No provider for NgControl Error after adding ReactiveFormsModule to my angular 4 app
  66. How to use `trackBy` with `ngFor`
  67. Angular routerLink does not navigate to the corresponding component
  68. How to use jQuery with Angular?
  69. Mask for an Input to allow phone numbers?
  70. What is the best way to delete a component with CLI
  71. GET http://localhost:4200/null 404 (Not Found) in angular2 with angular-cli
  72. Angular design pattern: MVC, MVVM or MV*?
  73. Module has no exported member error in angular module
  74. Check if Variable is Empty – Angular 2
  75. Angular 2 multiple modules
  76. Electron – Not allowed to load local resource
  77. How to apply filters to *ngFor?
  78. Select default option value from typescript angular 6
  79. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  80. Angular, image not found (GET 404)
  81. Missing write access in mac to /usr/local/lib/node_modules
  82. (change) vs (ngModelChange) in angular
  83. Angular File Upload
  84. “You seem to not be depending on “@angular/core”.”
  85. Angular: Error no directive with “exportAs” set to “ngForm”
  86. Angular4 – No value accessor for form control
  87. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  88. Angular 2 Cannot find control with unspecified name attribute on formArrays
  89. Repository is not clean. Please commit or stash any changes before updating In Angular 8
  90. How to fix Cannot find module ‘typescript’ in Angular 4?
  91. Angular: Cannot find a differ supporting object ‘[object Object]’
  92. SyntaxError: Unexpected token C in JSON at position 0 – Ionic 2 Http GET request
  93. Crop the image using JavaScript
  94. How to use if-else condition with [ngClass] in angular 7?
  95. Why do i need `typings.json` file in an Angular 2 project?
  96. How do I download a file with Angular2 or greater
  97. What are differences between SystemJS and Webpack?
  98. How to use forEach loop correctly in angular 2?
  99. How do I install Angular 2 using NPM?
  100. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]

Leave a Comment