Last active
April 21, 2017 09:05
-
-
Save osahner/9c868ddc6c8213c9cc0763cc9f27ae54 to your computer and use it in GitHub Desktop.
angular2 bootstrap4 show/hide password input wrapper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Component, ElementRef, Input, OnInit, Renderer2 | |
} from '@angular/core'; | |
/** | |
* @whatItDoes Add show hide button to text/password input fields. | |
* | |
* @howToUse | |
* <show-hide-password size="sm|lg"> | |
* <input type="password" name=... /> | |
* </show-hide-password> | |
* | |
* @description Add split input button to password or text input. Toggles input type between "text" and "password". | |
*/ | |
@Component({ | |
selector: 'show-hide-password', | |
template: ` | |
<ng-content></ng-content> | |
<span class="input-group-btn"> | |
<button class="btn btn-secondary py-0" type="button" (click)="toggleShow($event)"> | |
<span class="icon" [ngClass]="{'icon-eye-with-line': !isHidden, 'icon-eye': isHidden}" | |
[style.font-size]="size === 'lg' ? '1.75rem' : ''"></span> | |
</button> | |
</span>`, | |
}) | |
export class ShowHidePasswordComponent implements OnInit { | |
@Input() | |
public size: 'sm' | 'lg'; | |
public input: any; | |
public isHidden: boolean; | |
constructor(private elem: ElementRef, | |
private renderer: Renderer2) { | |
} | |
ngOnInit(): void { | |
this.input = this.elem.nativeElement.querySelector('input'); | |
this.renderer.addClass(this.elem.nativeElement, 'input-group'); | |
if (this.size === 'sm') { | |
this.renderer.addClass(this.elem.nativeElement, 'input-group-sm'); | |
} else if (this.size === 'lg') { | |
this.renderer.addClass(this.elem.nativeElement, 'input-group-lg'); | |
} | |
this.isHidden = this.input.type === 'password'; | |
} | |
public toggleShow($event: any) { | |
this.isHidden = !this.isHidden; | |
this.renderer.setAttribute(this.input, 'type', this.isHidden ? 'password' : 'text'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
aot fix