@anguless/angulux/tag
tag
1 declarations4 demos
import
import { TagModule } from '@anguless/angulux/tag';Basic
The label of a tag is defined with the value property.
<agl-tag value="New" />Severity
Severity defines the colour of the tag.
<agl-tag value="Primary" /><agl-tag severity="secondary" value="Secondary" /><agl-tag severity="success" value="Success" /><agl-tag severity="info" value="Info" /><agl-tag severity="warn" value="Warn" /><agl-tag severity="danger" value="Danger" /><agl-tag severity="contrast" value="Contrast" />Rounded
Rounded tags have fully round corners.
<agl-tag value="Primary" [rounded]="true" /><agl-tag severity="success" value="Success" [rounded]="true" /><agl-tag severity="danger" value="Danger" [rounded]="true" />Icons
An icon is displayed next to the value with the icon property.
<agl-tag icon="pi pi-user" value="Primary" /><agl-tag icon="pi pi-check" severity="success" value="Success" /><agl-tag icon="pi pi-times" severity="danger" value="Danger" />API
Generated from the committed corpus, which check:corpus holds to the built library.
Tag
componentagl-tagTag component is used to categorize content.
| Input | Type | Default | Description |
|---|---|---|---|
| styleClass deprecated — since v20.0.0, use `class` instead. | string | undefined | not documented | Style class of the component. |
| severity | 'success' | 'secondary' | 'info' | 'warn' | 'danger' | 'contrast' | undefined | null | not documented | Severity type of the tag. |
| value | string | undefined | not documented | Value to display inside the tag. |
| icon | string | undefined | not documented | Icon of the tag to display next to the value. |
| rounded | boolean | undefined | not documented | Whether the corners of the tag are rounded. |
| Template slot | Description |
|---|---|
| <ng-template #icon> | Custom icon template. |
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. |