Skip to content
Advertisement

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.

Advertisement

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

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

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

Advertisement