Textarea
Gives a textarea field or a component a distinct look that indicates its input capabilities.
import { Component } from '@angular/core';
import { HlmInput } from '@spartan-ng/helm/input';
@Component({
selector: 'spartan-textarea-preview',
host: {
class: 'w-full',
},
imports: [HlmInput],
template: `
<textarea class="min-h-[80px] w-full" hlmInput placeholder="Type your message here."></textarea>
`,
})
export class TextAreaPreview {}Note
To get that same distinct look of a spartan/ui input we can simply apply the same hlmInput directive we would apply to other input elements.
Installation
npx nx g @spartan-ng/cli:ui input
ng g @spartan-ng/cli:ui input
Usage
import { HlmInputDirective } from '@spartan-ng/helm/input';<textarea hlmInput placeholder="Type your message here."></textarea>Helm API
HlmInputError
Selector: [hlmInputError]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmInputMock
Selector: hlm-input-mock
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| error | 'auto' | true | - | - |
| userClass | string | - | - |
| required | boolean | - | - |
HlmInput
Selector: [hlmInput]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| error | InputVariants['error'] | auto | - |
| class | ClassValue | - | - |