All files / stories/NativeFrameworkRendering/angular-components attribute-binding.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
2x
2x
2x
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 
@Component({
  selector: 'app-attribute-binding',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <div>
      <h3>Angular Attribute Binding</h3>
      <vg-dropdown
        label="Dynamic Attributes"
        placeholder="Select an option"
        [options]="sampleOptions"
        [value]="value"
        (vg-change)="onChange($event)"
        [attr.required]="isRequired ? '' : null"
        [attr.error]="errorMessage || null"
        data-testid="attribute-dropdown"
      ></vg-dropdown>
      <p style="margin-top: 12px;">
        Value: <strong>{{ value || '(empty)' }}</strong>
      </p>
      <p *ngIf="errorMessage" style="color: red;">
        Error: <span>{{ errorMessage }}</span>
      </p>
    </div>
  `,
})
export class AttributeBindingComponent {
  public value = ''
  public isRequired = true
  public isDisabled = false
  public errorMessage = 'This field is required'
  public sampleOptions = [
    { label: 'Option 1', value: 'option1', description: 'First option' },
    { label: 'Option 2', value: 'option2', description: 'Second option' },
    { label: 'Option 3', value: 'option3', description: 'Third option' },
    { label: 'Disabled Option', value: 'disabled', description: 'This option is disabled', disabled: true },
  ]
 
  onChange(event: Event) {
    const customEvent = event as CustomEvent
    this.value = customEvent.detail.value
    this.errorMessage = this.value ? '' : 'This field is required'
  }
}