Parent module:
import {NgModule} from '@angular/core';
import {SharedModule} from "app/shared/shared.module.ts";
import {HeaderComponent} from './header.component';
import {UserinfoComponent} from './userinfo.component';
import {SearchComponent} from './search.component';
import {DropdownComponent, DropdownValue} from '../../forms/dropdown.component';
@NgModule({
declarations: [
HeaderComponent,
UserinfoComponent,
SearchComponent,
DropdownComponent,
],
imports : [SharedModule],
exports : [HeaderComponent],
})
export class HeaderModule {
items: DropdownValue[] = [
{value: '1', label: 'test 1'},
{value: '2', label: 'test 2'}
];
}
Module html:
<div class="navbar dark-bg remove-bottom-margin flex-container">
<search></search>
<div class="flex-item">
<dropdown [items] = "items"></dropdown>
</div>
<userinfo></userinfo>
</div>
Component:
import { Component, Input, Output, EventEmitter } from '@angular/core';
export class DropdownValue {
value: string;
label: string;
constructor(value: string, label: string) {
this.value = value;
this.label = label;
}
}
@Component({
selector: 'dropdown',
template: `
<select class="form-control" [(ngModel)]="selectedValue.value" (change)="onChange($event)">
<option *ngFor="let item of items" [value]=item.value>{{item.label}}</option>
</select>
`,
})
export class DropdownComponent {
selectedValue: DropdownValue = new DropdownValue('2', '');
@Input()
items: DropdownValue[];
@Input()
value: string[];
@Output()
valueChange: EventEmitter<any> = new EventEmitter();
onChange(event: any) {
console.log(event.target.value);
this.valueChange.emit(event.target.value);
}
}
If I populate the test data within the component and eliminate data binding - it functions correctly.
I also attempted a simple approach like @input items: string and displayed it as plain text in the template. However, it remains undefined.
What could I be overlooking? I've reviewed examples but am unable to spot any discrepancies.
Is there a specific import required in the module for the data binding to operate?