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. If the hidden attribute on an HTML element 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 rule 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 it. 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">