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:

<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.

Answer 1

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 {    display: block;  }

<input class="hasDisplay" hidden value="shown" />  <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">