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

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:

<div class="container">

  <div class="cont-login">
    <div class="login-pane">

      <div>
        <p class="inner log-labels">Your password</p>
        <input class="txt" type="password" [(ngModel)]="input_pw" ngHide="isHidden">
      </div>

      <div>
        <input class="btn" type="submit" value="Login">
      </div>

    </div>


  </div>

</div>

Am I doing something wrong here?

NOTE: I did not change or add anything related to css.

Try this

 <input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">

If you want to just toggle visibility and still keep the input in DOM:

<input class="txt" type="password" [(ngModel)]="input_pw" 
 [style.visibility]="isHidden? 'hidden': 'visible'">

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.

.hasDisplay {_x000D_
  display: block;_x000D_
}

<input class="hasDisplay" hidden value="shown" />_x000D_
<input hidden value="not shown">

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:

<input [class.is-hidden]="isHidden"/>

.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

<input class="txt" type="password" [(ngModel)]="input_pw" *ngIf="!isHidden">

If you can not use *ngif, [class.hide] works in angular 7. example:

<mat-select (selectionChange)="changeFilter($event.value)" multiple [(ngModel)]="selected">
          <mat-option *ngFor="let filter of gridOptions.columnDefs"
                      [class.hide]="filter.headerName=='Action'"  [value]="filter.field">{{filter.headerName}}</mat-option>
        </mat-select>

If you add [hidden]="true" 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;
}

There is two way for hide a element

1. Use the "hidden" html attribute But in angular you can bind it with one or more fields like this :

   <input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden">

2.Better way of doing this is to use " *ngIf " directive like this :

<input class="txt" type="password" [(ngModel)]="input_pw" *ngIf="!isHidden">

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.

Your [hidden] will work but you need to check the css:

<input class="txt" type="password" [(ngModel)]="input_pw" [hidden]="isHidden" />

And the css:

[hidden] {
  display: none !important;
}

That should work as you want.

Try this:

<button (click)="click()">Click me</button>

<input class="txt" type="password" [(ngModel)]="input_pw" [ngClass]="{'hidden': isHidden}" />

component.ts:

isHidden: boolean = false;
click(){
    this.isHidden = !this.isHidden;
}