Add Dropdown Default Feature

This commit is contained in:
copecone committed 2026-03-17 21:27:47 +09:00
1 parent 88f72e767f
commit f71dc03f67
4 files changed
+25 -6

No files matched your search

+2 -1
View File
@@ -9,7 +9,8 @@ RUN npm install
# 소스 코드 복사 및 빌드
COPY . .
RUN npm run build
RUN npm install -g @angular/cli
RUN ng build
# 2. Production Stage
FROM node:24-alpine AS runner
+4 -3
View File
@@ -3,20 +3,21 @@
<div class="container">
<h1>AEF Component Test</h1>
<section>
<section id="switch-test">
<h2>Switch Component</h2>
<switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
<p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
</section>
<section>
<section id="dropdown-test">
<h2>Dropdown Component</h2>
<div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
<div>
<h3>Object Options</h3>
<h3>Object Options (with defaultIndex="1")</h3>
<dropdown
[options]="dropdownOptions"
[(value)]="selectedDropdownValue"
[defaultIndex]="1"
(selectionChange)="handleDropdownChange($event)"
icon="language">
</dropdown>
+6
View File
@@ -27,3 +27,9 @@ p {
margin-top: 15px;
font-weight: 500;
}
section#dropdown-test {
dropdown {
width: 324px;
}
}
+13 -2
View File
@@ -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<Array<DropdownOption | string>>([]);
placeholder = input<string>('Select an option');
ariaLabel = input<string | undefined>(undefined);
icon = input<string>();
defaultIndex = input<number>();
value = model<any>(null);
selectionChange = output<any>();
@@ -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') {