Add Dropdown Default Feature
This commit is contained in:
1 parent
88f72e767f
commit
f71dc03f67
4 files changed
+25
-6
No files matched your search
+2
-1
@@ -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
@@ -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>
|
||||
|
||||
@@ -27,3 +27,9 @@ p {
|
||||
margin-top: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
section#dropdown-test {
|
||||
dropdown {
|
||||
width: 324px;
|
||||
}
|
||||
}
|
||||
@@ -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') {
|
||||
|
||||
Reference in new issue
Block a user