Angular 6 - ngModel Value Reveals Itself upon User Interaction

Question

Angular 6 - ngModel Value Reveals Itself upon User Interaction

I am currently working on a component that lists items with a dropdown option to change values. However, I have noticed a small issue where the selected item in the dropdown appears empty upon component creation. The selection only becomes visible after clicking elsewhere on the page.

Typescript

export class Component {

    @Input() files: ProductFile[];

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

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

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

}

HTML

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

P.S.: dy-dropdown refers to a custom Form Control designed to update the value whenever an item is selected from the dropdown list.

angular typescript dropdown angular6 ngmodel

Answer 1

Answer №1

To manually trigger detection changes, you can utilize the ChangeDetectorRef in Angular.

import { ChangeDetectorRef } from 'angular/core';

constructor(private cdRef: ChangeDetectorRef){

}

You can then call this within your onUpdate function:

this.cdRef.detectChanges();

Answer 2

To manually trigger detection changes, you can utilize the ChangeDetectorRef in Angular.

import { ChangeDetectorRef } from 'angular/core';

constructor(private cdRef: ChangeDetectorRef){

}

You can then call this within your onUpdate function:

this.cdRef.detectChanges();

Answer 3

Answer №2

Perhaps you may require to manually initiate the change detection process. Below is the code snippet that demonstrates how to do so.

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

constructor(private cdr: ChangeDetectorRef)

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

Answer 4

Perhaps you may require to manually initiate the change detection process. Below is the code snippet that demonstrates how to do so.

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

constructor(private cdr: ChangeDetectorRef)

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

Angular 6 - ngModel Value Reveals Itself upon User Interaction

Answer №1

Answer №2

Similar questions

Can Angular PWA service worker be updated even when the browser is closed?

The element event does not trigger an update on the view

Unknown Angular component identified

Implementing routing for page navigation within an angular tree structure

Subject fails to subscribe to the change

Creating a date format for a REST API using Typegoose and Mongoose

Launch a TypeScript Node.js server on Heroku deployment platform

Struggling with the incorporation of Typescript Augmentation into my customized MUI theme

Utilizing nested observables for advanced data handling

Typescript: Declaring object properties with interfaces

Utilizing Angular 2's ViewChild within the <router-outlet> Tag

Insert data into Typeorm even if it already exists

What is the process for accessing my PayPal Sandbox account?

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

Remove the unnecessary space at the bottom of the Mat Dialog

Using @emotion/styled alongside esbuild has caused an issue where importing styled11 as default.div is not functioning as expected

Troubleshooting Nested Handlebars Problem

The hierarchy of precedence when using the TypeScript Type Assertion operator

Can you explain the exact function of --legacy-peer-deps?

Activate the download upon clicking in Angular 2