Angular 6 - Value of ngModel Appears only when clicked somewhere

Question

I have a component, that displays a list of items. On every item, there is a dropdown with which you can change a value. The only issue is, that when creating the component, the selected item in the dropdown is empty. It appears only if I click anywhere on the page.

Typescript

export class Component {

    @Input() files: ProductFile[];

    contentTypes: { [id: string]: string } = {};

    ngOnInit(): void {
        this.files.forEach(f => this.contentTypes[f._id] = f.contentType);
    }

    public fileTypes: string[] = [/* items in the dropdown */];

}

HTML

<div
    *ngFor="let f of files"
    class="file shadow"
>
    <dy-dropdown
        [items]="fileTypes"
        [ngModel]="contentTypes[f._id]"
        (ngModelChange)="onUpdate($event, f)"
    ></dy-dropdown>
</div>

P.S.: dy-dropdown is a custom Form Control which simply changes the value when the user selects an item in the dropdown list.

have you tried using a select instead of your custom form control, could be the issue is in there. — BlackICE, Aug 11 '18 at 16:31
I would definitely try the above suggestion to see if the problem is this control before spending a lot more time on this. — DeborahK, Aug 11 '18 at 17:12
It worked! I now have to figure out where the problem with the dropdown is — Florian Ludewig, Aug 12 '18 at 06:27

score 1 · Answer 1 · answered Aug 11 '18 at 14:05

1

Try calling detection changes manually using ChangeDetectorRef

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){

}

and call inside your onUpdate function

this.chRef.detectChanges();

answered Aug 11 '18 at 14:05

Sajeetharan

216,225
63
350
396

score 0 · Answer 2 · answered Aug 11 '18 at 14:07

0

Might be, you need to trigger change detection manually.Here is the code.

import {ChangeDetectorRef} from '@angular/core';

constructor(private cdr: ChangeDetectorRef)

ngOnInit(): void {
  this.files.forEach(f => this.contentTypes[f._id] = f.contentType);
  this.cdr.detectChanges();
}

answered Aug 11 '18 at 14:07

Suresh Kumar Ariya

9,516
1
18
27

why are you posting same answer again? – Sajeetharan Aug 11 '18 at 14:14
It might happen parallely both may be submit at same time. Can you please create stackblitz. – Suresh Kumar Ariya Aug 11 '18 at 14:15

Angular 6 - Value of ngModel Appears only when clicked somewhere

2 Answers2