Browse Source

Update Show-Password-Directive.md

pull/17267/head
Sinan Öztürk 3 years ago
committed by Sinan997
parent
commit
00c41f5669
  1. 17
      docs/en/UI/Angular/Show-Password-Directive.md

17
docs/en/UI/Angular/Show-Password-Directive.md

@ -4,16 +4,17 @@ In password input, text can be shown easily via changing input type attribute to
## Getting Started ## Getting Started
`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component:
In order to use the `ShowPasswordDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this:
```ts ```ts
// ... import { ShowPasswordDirective } from '@abp/ng.core';
import { CoreModule } from '@abp/ng.core';
@NgModule({ @NgModule({
//... //...
imports: [..., CoreModule], imports: [
...,
ShowPasswordDirective
],
}) })
export class MyFeatureModule {} export class MyFeatureModule {}
``` ```
@ -25,6 +26,7 @@ The `ShowPasswordDirective` is very easy to use. The directive's selector is **`
See an example usage: See an example usage:
```ts ```ts
import { ShowPasswordDirective } from '@abp/ng.core';
@Component({ @Component({
selector: 'test-component', selector: 'test-component',
standalone: true, standalone: true,
@ -34,7 +36,8 @@ See an example usage:
<input [abpShowPassword]="showPassword"/> <input [abpShowPassword]="showPassword"/>
<i (click)="showPassword = !showPassword">icon</i> <i (click)="showPassword = !showPassword">icon</i>
</div> </div>
` `,
imports: [ShowPasswordDirective]
}) })
export class TestComponent{ export class TestComponent{
showPassword = false; showPassword = false;
@ -49,4 +52,4 @@ See the result:
To see password input click icon. To see password input click icon.
![Show Password directive](./images/showPasswordDirective2.png) ![Show Password directive](./images/showPasswordDirective2.png)

Loading…
Cancel
Save