Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 6x 4x 4x 4x 4x 4x | import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
@Component({
selector: 'app-component-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<div>
<h3>Angular Template Demo</h3>
<vg-theme-provider [attr.mode]="theme">
<vg-card heading="Settings" variant="subtle">
<vg-dropdown
label="Theme"
[options]="themeOptions"
[value]="theme"
(vg-change)="onThemeChange($event)"
data-testid="theme-dropdown"
>
<svg slot="prefix" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 2a7 7 0 1 0 10 10"/>
</svg>
</vg-dropdown>
<vg-dropdown
label="Country"
helper-text="Select your country"
[options]="countryOptions"
[value]="country"
(vg-change)="onCountryChange($event)"
data-testid="country-dropdown"
></vg-dropdown>
</vg-card>
<vg-card heading="State" variant="outlined">
<p>Theme: <strong>{{ theme }}</strong></p>
<p>Country: <strong>{{ country }}</strong></p>
<p>Total Changes: <strong data-testid="change-count">{{ changeCount }}</strong></p>
</vg-card>
</vg-theme-provider>
</div>
`,
})
export class ComponentDemoComponent {
public theme = 'dark'
public country = 'us'
public changeCount = 0
public themeOptions = [
{ label: 'Dark', value: 'dark' },
{ label: 'Light', value: 'light' },
{ label: 'Glass', value: 'glass' },
]
public countryOptions = [
{ label: 'United States', value: 'us', description: 'North America' },
{ label: 'United Kingdom', value: 'uk', description: 'Europe' },
{ label: 'Canada', value: 'ca', description: 'North America' },
{ label: 'Australia', value: 'au', description: 'Oceania' },
{ label: 'Germany', value: 'de', description: 'Europe' },
]
onThemeChange(event: Event) {
const customEvent = event as CustomEvent
this.theme = customEvent.detail.value
this.changeCount++
}
onCountryChange(event: Event) {
const customEvent = event as CustomEvent
this.country = customEvent.detail.value
this.changeCount++
}
}
|