Browse Source

update: show password directive page

pull/23285/head
sumeyye 1 year ago
parent
commit
9613bfa440
  1. 38
      docs/en/framework/ui/angular/show-password-directive.md

38
docs/en/framework/ui/angular/show-password-directive.md

@ -4,24 +4,20 @@ 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: `ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to your component:
**Importing to NgModule** **Importing to Component**
```ts ```ts
import { ShowPasswordDirective } from '@abp/ng.core'; import { ShowPasswordDirective } from '@abp/ng.core';
@NgModule({ @Component({
//... //...
declarations: [
...,
TestComponent
],
imports: [ imports: [
..., // ...,
ShowPasswordDirective ShowPasswordDirective
], ],
}) })
export class MyFeatureModule {} export class TestComponent {}
``` ```
## Usage ## Usage
@ -30,28 +26,10 @@ The `ShowPasswordDirective` is very easy to use. The directive's selector is **`
See an example usage: See an example usage:
**NgModule Component usage**
```ts
@Component({
selector: 'test-component',
template: `
<div class="d-flex flex-column">
<label>Password</label>
<input [abpShowPassword]="showPassword"/>
<i (click)="showPassword = !showPassword">icon</i>
</div>
`
})
export class TestComponent{
showPassword = false;
}
```
**Standalone Component usage**
```ts ```ts
import { ShowPasswordDirective } from '@abp/ng.core'; import { ShowPasswordDirective } from '@abp/ng.core';
@Component({ @Component({
selector: 'standalone-component', selector: 'sample-component',
standalone: true,
template: ` template: `
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<label>Password</label> <label>Password</label>
@ -59,9 +37,9 @@ import { ShowPasswordDirective } from '@abp/ng.core';
<i (click)="showPassword = !showPassword">icon</i> <i (click)="showPassword = !showPassword">icon</i>
</div> </div>
`, `,
imports: [ShowPasswordDirective] imports: [ ShowPasswordDirective ]
}) })
export class StandaloneComponent{ export class SampleComponent{
showPassword = false; showPassword = false;
} }
``` ```

Loading…
Cancel
Save