@anguless/angulux/password

password

2 declarations3 demos

import

import { PasswordModule } from '@anguless/angulux/password';

Basic

A plain password field, with the strength meter turned off.

<agl-password [(ngModel)]="value" [feedback]="false" placeholder="Password" />

Strength meter

Feedback is on by default and rates what is typed as it is typed.

<agl-password [(ngModel)]="value" placeholder="Type to see the meter" />

Toggle mask

toggleMask adds the control that reveals what was typed.

<agl-password [(ngModel)]="value" [toggleMask]="true" placeholder="Password" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

PasswordDirective

directive[aglPassword]

Password directive.

Input	Type	Default	Description
pPasswordPT	PasswordPassThrough \| undefined	undefined	Used to pass attributes to DOM elements inside the Password component.
pPasswordUnstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
promptLabel	string	not documented	Text to prompt password entry. Defaults to AnguluxConfig I18N API configuration.
weakLabel	string	not documented	Text for a weak password. Defaults to AnguluxConfig I18N API configuration.
mediumLabel	string	not documented	Text for a medium password. Defaults to AnguluxConfig I18N API configuration.
strongLabel	string	not documented	Text for a strong password. Defaults to AnguluxConfig I18N API configuration.
feedback	boolean	not documented	Whether to show the strength indicator or not.
showPassword		false	Sets the visibility of the password field.
variant	'filled' \| 'outlined' \| undefined	'outlined'	Specifies the input variant of the component.
fluid		false	Spans 100% width of the container when enabled.
aglSize property size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.

Inherited from BaseEditableHolder

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

Password

componentagl-password

Password displays strength indicator for password fields.

Input	Type	Default	Description
ariaLabel	string \| undefined	not documented	Defines a string that labels the input for accessibility.
ariaLabelledBy	string \| undefined	not documented	Specifies one or more IDs in the DOM that labels the input field.
label	string \| undefined	not documented	Label of the input for accessibility.
promptLabel	string \| undefined	not documented	Text to prompt password entry. Defaults to AnguluxConfig I18N API configuration.
mediumRegex	string	not documented	Regex value for medium regex.
strongRegex	string	not documented	Regex value for strong regex.
weakLabel	string \| undefined	not documented	Text for a weak password. Defaults to AnguluxConfig I18N API configuration.
mediumLabel	string \| undefined	not documented	Text for a medium password. Defaults to AnguluxConfig I18N API configuration.
maxLength deprecated — since v20.0.0, use maxlength instead.	number \| undefined	not documented	specifies the maximum number of characters allowed in the input element.
strongLabel	string \| undefined	not documented	Text for a strong password. Defaults to AnguluxConfig I18N API configuration.
inputId	string \| undefined	not documented	Identifier of the accessible input element.
feedback	boolean	not documented	Whether to show the strength indicator or not.
toggleMask	boolean \| undefined	not documented	Whether to show an icon to display the password as plain text.
inputStyleClass	string \| undefined	not documented	Style class of the input field.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the element.
inputStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the input field.
showTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead.	string	not documented	Transition options of the show animation.
hideTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead.	string	not documented	Transition options of the hide animation.
autocomplete	string \| undefined	not documented	Specify automated assistance in filling out password by browser.
placeholder	string \| undefined	not documented	Advisory information to display on input.
showClear	boolean	not documented	When enabled, a clear icon is displayed to clear the value.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
tabindex	number	not documented	Index of the element in tabbing order.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
motionOptions	MotionOptions \| undefined	not documented	The motion options.
overlayOptions	OverlayOptions \| undefined	not documented	Whether to use overlay API feature. The properties of overlay API can be used like an object in it.

Output	Type	Description
onFocus	EventEmitter<Event>	Callback to invoke when the component receives focus.
onBlur	EventEmitter<Event>	Callback to invoke when the component loses focus.
onClear	EventEmitter<any>	Callback to invoke when clear button is clicked.

Template slot	Description
<ng-template #content>	Custom template of content.
<ng-template #footer>	Custom template of footer.
<ng-template #header>	Custom template of header.
<ng-template #clearicon>	Custom template of clear icon.
<ng-template #hideicon>	Custom template of hide icon.
<ng-template #showicon>	Custom template of show icon.

Inherited from BaseInput

inherited

Input	Type	Default	Description
fluid		false	Spans 100% width of the container when enabled.
variant	'filled' \| 'outlined' \| undefined	'outlined'	Specifies the input variant of the component.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
inputSize	number \| null \| undefined	undefined	Specifies the visible width of the input element in characters.
pattern	string \| null \| undefined	undefined	Specifies the value must match the pattern. A list of regular expressions — what Signal Forms binds through `[formField]` — is ignored, because the form validates those itself.
min	number \| null \| undefined	undefined	The value must be greater than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
max	number \| null \| undefined	undefined	The value must be less than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
step	number \| null \| undefined	undefined	Unless the step is set to the any literal, the value must be min + an integral multiple of the step.
minlength	number \| null \| undefined	undefined	The number of characters (code points) must not be less than the value of the attribute, if non-empty.
maxlength	number \| null \| undefined	undefined	The number of characters (code points) must not exceed the value of the attribute.

Inherited from BaseEditableHolder

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.