File
Metadata
| encapsulation |
ViewEncapsulation.None |
| selector |
mat-pass-toggle-visibility |
| styleUrls |
./mat-pass-toggle-visibility.component.scss |
| templateUrl |
./mat-pass-toggle-visibility.component.html |
Index
Properties
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
_type
|
Type : Type
|
Default value : 'text'
|
|
|
import {Component, Input, ViewEncapsulation} from '@angular/core';
type Type = 'text' | 'password' ;
@Component({
selector: 'mat-pass-toggle-visibility',
templateUrl: './mat-pass-toggle-visibility.component.html',
styleUrls: ['./mat-pass-toggle-visibility.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MatPassToggleVisibilityComponent {
@Input()
isVisible: boolean;
_type: Type = 'text';
get type() {
return this.isVisible ? 'text' : 'password';
}
}
<button (click)="isVisible = !isVisible"
type="button"
class="mat-icon-button cdk-focused cdk-mouse-focused" mat-icon-button
matRippleCentered="true"
matRipple>
<mat-icon>{{isVisible ? 'visibility' : 'visibility_off' }}</mat-icon>
</button>
Legend
Html element with directive