-
Object Options
+
Object Options (with defaultIndex="1")
diff --git a/src/app/app.scss b/src/app/app.scss
index 0cc6f1a..1d0e81e 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -27,3 +27,9 @@ p {
margin-top: 15px;
font-weight: 500;
}
+
+section#dropdown-test {
+ dropdown {
+ width: 324px;
+ }
+}
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index 0d10d51..30c4a7f 100644
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -1,4 +1,4 @@
-import { Component, input, model, output, signal, HostListener, ElementRef, computed
+import { Component, input, model, output, signal, HostListener, ElementRef, computed, OnInit
} from '@angular/core'
import { CommonModule } from '@angular/common'
@@ -30,11 +30,12 @@ export interface DropdownOption {
'(keydown.arrowup)': 'onArrowUp($event)'
}
})
-export class Dropdown {
+export class Dropdown implements OnInit {
options = input
>([]);
placeholder = input('Select an option');
ariaLabel = input(undefined);
icon = input();
+ defaultIndex = input();
value = model(null);
selectionChange = output();
@@ -46,6 +47,16 @@ export class Dropdown {
constructor(private el: ElementRef) {}
+ ngOnInit() {
+ const opts = this.normalizedOptions();
+ const dIndex = this.defaultIndex();
+ const currentValue = this.value();
+
+ if (currentValue === null && dIndex !== undefined && dIndex >= 0 && dIndex < opts.length) {
+ this.value.set(opts[dIndex].value);
+ }
+ }
+
normalizedOptions = computed(() => {
return this.options().map(opt => {
if (typeof opt === 'string') {