Angular 5 ngHide ngShow hidden not working

Question

Good day  guys   I am trying to make my Angular 5 app hide elements  or show hidden   However  this seems to not work   I ve tried ngHide  ng-hide  ngShow  ng-show   hidden  methods - none of them works   My login component ts looks like this   import   Component  OnInit   from   angular core     Component     selector   login     templateUrl     login component html     styleUrls      login component css       export class LoginComponent implements OnInit     isHidden  boolean   true    input pw  string    password      constructor          ngOnInit         console log this isHidden     console shows true          And login component html    lt div class  container  gt      lt div class  cont-login  gt       lt div class  login-pane  gt          lt div gt           lt p class  inner log-labels  gt Your password lt  p gt           lt input class  txt  type  password    ngModel    input pw  ngHide  isHidden  gt         lt  div gt          lt div gt           lt input class  btn  type  submit  value  Login  gt         lt  div gt        lt  div gt       lt  div gt    lt  div gt    Am I doing something wrong here   NOTE  I did not change or add anything related to css

User · Answer

If you add  hidden   quot true quot  to div  the actual thing that happens is adding a class  hidden  to this element conditionally with display  none Please check the style of the element in the browser to ensure no other style affect the display property of an element like this   If you found display of  hidden  class is overridden  you need to add this css code to your style   hidden        display  none  important

User · Answer

There is two way for hide a element    Use the  hidden  html attribute But in angular you can bind it with one or more fields like this      lt input class  txt  type  password    ngModel    input pw   hidden   isHidden  gt    2 Better way of doing this is to use    ngIf   directive like this     lt input class  txt  type  password    ngModel    input pw   ngIf   isHidden  gt    Now why this is a better way because it doesn t just hide the element  it will removes it from the html code so this will help your page to render

User · Answer

If you can not use  ngif    class hide   works in angular 7  example    lt mat-select  selectionChange   changeFilter  event value   multiple   ngModel    selected  gt             lt mat-option  ngFor  let filter of gridOptions columnDefs                         class hide   filter headerName   Action     value   filter field  gt   filter headerName   lt  mat-option gt           lt  mat-select gt

User · Answer

Try this    lt input class  txt  type  password    ngModel    input pw   hidden   isHidden  gt

User · Answer

If you want to just toggle visibility and still keep the input in DOM    lt input class  txt  type  password    ngModel    input pw     style visibility   isHidden   hidden    visible   gt    The other way around is as per answer by rrd  which is to use HTML hidden attribute  In an HTML element if hidden attribute is set to true browsers are supposed to hide the element from display  but the problem is that this behavior is overridden if the element has an explicit display style mentioned    x000D   x000D   hasDisplay   x000D    display  block  x000D    x000D   lt input class  hasDisplay  hidden value  shown    gt  x000D   lt input hidden value  not shown  gt  x000D   x000D   x000D    To overcome this you can opt to use an explicit css for  hidden  that overrides the display    hidden      display  none  important      Yet another way is to have a is-hidden class and do    lt input  class is-hidden   isHidden   gt    is-hidden         display  none       If you use display  none the element will be skipped from the static flow and no space will be allocated for the element  if you use visibility  hidden it will be included in the flow and a space will be allocated but it will be blank space   The important thing is to use one way across an application rather than mixing different ways thereby making the code less maintainable   If you want to remove it from DOM   lt input class  txt  type  password    ngModel    input pw   ngIf   isHidden  gt

User · Answer

Try this    lt button  click   click    gt Click me lt  button gt    lt input class  txt  type  password    ngModel    input pw   ngClass     hidden   isHidden     gt    component ts   isHidden  boolean   false  click        this isHidden    this isHidden

User · Answer

Your  hidden  will work but you need to check the css    lt input class  txt  type  password    ngModel    input pw   hidden   isHidden    gt    And the css    hidden      display  none  important      That should work as you want

User · Answer

2019 Update  I realize that this is somewhat bad advice  As the first comment states  this heavily depends on the situation  and it is not a bad practice to use the  hidden  attribute  see the comments for some of the cases where you need to use it and not  ngIf   Original answer   You should always try to use  ngIf instead of  hidden      lt input  ngIf   isHidden  class  txt  type  password    ngModel    input pw   gt    There are several blog posts about that topics  but the bottom line is  that Hidden usually means you do not want the browser to render the object - using angular you still waste resource on rendering it  and it will end up in the DOM anyway  and tricky users can see it with basic browser manipulation

[javascript] Angular 5 ngHide ngShow [hidden] not working

Examples related to javascript

Examples related to angular