Textarea
Displays a form textarea or a component that looks like a textarea.
import { Component } from '@angular/core';
import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
@Component({
selector: 'spartan-textarea-preview',
imports: [HlmTextareaImports],
template: `
<textarea hlmTextarea class="w-80" placeholder="Type your message here."></textarea>
`,
})
export class TextareaPreview {}
Installation
npx nx g @spartan-ng/cli:ui textarea
ng g @spartan-ng/cli:ui textarea
Usage
import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
<textarea hlmTextarea placeholder="Type your message here."></textarea>
Helm API
HlmTextarea
Selector: [hlmTextarea]
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
error | TextareaVariants['error'] | auto | - |
Examples
Disabled
import { Component } from '@angular/core';
import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
@Component({
selector: 'spartan-textarea-disabled',
imports: [HlmTextareaImports],
template: `
<textarea hlmTextarea class="w-80" disabled placeholder="Type your message here."></textarea>
`,
})
export class TextareaDisabledPreview {}
With Label
import { Component } from '@angular/core';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
@Component({
selector: 'spartan-textarea-label',
imports: [HlmTextareaImports, HlmLabelImports],
template: `
<div class="grid w-full max-w-sm items-center gap-3">
<label hlmLabel for="message">Your message</label>
<textarea hlmTextarea class="w-80" id="message" placeholder="Type ypur message here."></textarea>
</div>
`,
})
export class TextareaLabelPreview {}
With Button
import { Component } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
@Component({
selector: 'spartan-textarea-button',
imports: [HlmTextareaImports, HlmLabelImports, HlmButton],
template: `
<div class="w-fill grid gap-2">
<textarea hlmTextarea class="w-80" placeholder="Type ypur message here."></textarea>
<button hlmBtn>Send message</button>
</div>
`,
})
export class TextareaButtonPreview {}
Form
import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmFormFieldImports } from '@spartan-ng/helm/form-field';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
@Component({
selector: 'spartan-textarea-form',
imports: [HlmTextareaImports, HlmLabelImports, HlmButtonImports, HlmFormFieldImports, ReactiveFormsModule],
template: `
<form class="space-y-6" [formGroup]="form" (ngSubmit)="submit()">
<div class="grid w-full max-w-sm items-center gap-2">
<label hlmLabel for="username">Bio</label>
<textarea
hlmTextarea
class="w-80"
id="username"
placeholder="Tell us a little bit about yourself"
formControlName="bio"
></textarea>
<hlm-hint>
You can
<span>@mention</span>
other users and organizations.
</hlm-hint>
</div>
<button hlmBtn type="submit">Submit</button>
</form>
`,
})
export class TextareaFormPreview {
private readonly _formBuilder = inject(FormBuilder);
public form = this._formBuilder.group({
bio: [null, Validators.required],
});
submit() {
console.log(this.form.value);
}
}