Recently, I started working with Angular 8 and faced an issue while trying to pass an array of objects to my component for displaying it in the UI.
parent-component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
options = [
{ key: "type", value: 'Type' },
{ key: "name", value: 'Name' },
{ key: "area", value: 'Area' }
]
constructor() { }
ngOnInit(): void {
}
}
parent.component.html
<app-child [options]='options'></app-child>
child-component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() options: any[]
}
child.component.html
<div id="child-component>
<select id="child-select">
<option id="child-option-{{i}}"
*ngFor="let option of options | keyvalue; let i = index"
[value]="option.value"
> Key: <b>{{option.key}}</b> and Value: <b>{{option.value}}</b>
</option>
</select>
</div>
Currently, the output is:
- Key: 0 Value: [object Object]
- Key: 1 Value: [object Object]
- Key: 2 Value: [object Object]
What I actually want to achieve is:
- Key: type Value: Type
- Key: name Value: Name
- Key: area Value: Area
Although I tried using the pipe keyvalue, it didn't resolve the issue as expected.
If anyone has a solution or suggestion, I would greatly appreciate it. Thanks!