Issue
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.
Solution
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).
Answered By - ForestG
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.