Angular 7 : Changed object in the component is not reflecting in the view

Question

I have implemented a drop down control in angular 7 application and on value change, I am filtering the collection and assigning it to the object that is bound to the view. The collection object that I am filtering on is called FundTerms and Object that I am assigning that is bound to the view is called Fund. I have implemented the value change event in the component where the filtering logic is written.

I can see the valueChanged event is getting triggered and logic executed, but the UI is not reflecting the changed value in the VehicleType field.

I am having two controls in the view. One is drop down control Which is the Name and the other is the VehicleType field that displays the VehicleType based on what is selected in the dropdown of the Name control.

Component

import { Component, OnInit, AfterViewInit,AfterViewChecked, AfterContentInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { TermsService } from '../../services/terms.service';
import { NotifyService } from '../../utilities/notify.service';



@Component({
    selector: 'app-fund-terms',
    templateUrl: './fundTerms.component.html'
})

export class FundTermsComponent implements OnInit {


    @Input() Funds: any;
    public Fund: any;
    _fundTerms: any;

    get FundTerms(): any {
        return this._fundTerms;
    }

     @Input('FundTerms')
    set FundTerms(value: any) {
        this._fundTerms = value;
        if (this._fundTerms) {
        this.Fund = this._fundTerms[0];
        }
    }

    public EditMode = false;

    ngOnInit() {
    }


    public fundChanged(value: any): void {
       this.Fund  =  this.FundTerms.filter(x => x.Id === value.Id);
    }
}

View

<div *ngIf="Fund">
        <div class="card-body">

            <div class="form-group row" style="width: 100%;">
                <div class="col-md-4">
                    <label for="inputName" class="col-form-label modal-label">Name</label>
                    <div *ngIf="!EditMode">{{Fund.Name}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundClass"
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="false" valueField="Id" (valueChange)="fundChanged($event)">
                    </kendo-dropdownlist>
                </div>


                 <div class="col-md-4">
                    <label for="inputTitle" class="col-md-2  col-form-label ">Vehicle Type</label>
                    <div>{{Fund.VehicleTypeName}}</div>
                </div>
            </div>
        </div>  
    </div>

JSON

[
{
    "Id": 5508,
    "Name": "Sylebra Capital Partners (Offshore) Ltd",
    "VehicleTypeId": 5,
    "VehicleTypeName": "Offshore Fund",
    "InvestmentManager": null,
    "NavReportingCycleId": null,
    "NavReportingCycleName": "",
    "CurrencyId": null,
    "CurrencyName": "",
    "SideLetterAgreement": false,
    "SideLetterText": null,
    "PlanAssetFund": null,
    "AuditYearEnd": null,
    "AuditYearEndString": ""
},
{
    "Id": 237146,
    "Name": "P Sylebra Ltd.",
    "VehicleTypeId": 7,
    "VehicleTypeName": "EnTrustPermal SPF - Standard",
    "InvestmentManager": null,
    "NavReportingCycleId": null,
    "NavReportingCycleName": "",
    "CurrencyId": null,
    "CurrencyName": "",
    "SideLetterAgreement": false,
    "SideLetterText": null,
    "PlanAssetFund": null,
    "AuditYearEnd": null,
    "AuditYearEndString": ""
},
{
    "Id": 237147,
    "Name": "Sylebra Capital Partners (Onshore), Ltd",
    "VehicleTypeId": 9,
    "VehicleTypeName": "",
    "InvestmentManager": null,
    "NavReportingCycleId": null,
    "NavReportingCycleName": "",
    "CurrencyId": null,
    "CurrencyName": "",
    "SideLetterAgreement": false,
    "SideLetterText": null,
    "PlanAssetFund": null,
    "AuditYearEnd": null,
    "AuditYearEndString": ""
  }
]

Answer 1

filter returns an array try to get a first element of it. this.FundTerms.filter(x => x.Id === value.Id)[0];