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

- "Is it possible to extract values from an optional variable?"

Incorporate a fresh attribute to the JSON data in an Angular API response

The error "Uncaught ReferenceError: google is not defined" has been encountered in the Angular2 bundle.js

The issue of excessive recursion in Typescript

The dropdown feature in Materialize does not function properly when used within a dynamically generated card

The module named "tapable" does not contain an export for the item "Tapable"

Is there a way to automatically scroll to the bottom of a div when it first

Access route information external to the router outlet

To utilize the range-datepicker package, make sure to first include it in your package.json

Can you provide input to the reducer function?

The module 'AppModule' is importing an unexpected value 'AppAsideModule'. To resolve this issue, make sure to include an @NgModule annotation

Distribute your SolidJS Typescript components on npm

Is it possible to invoke JavaScript code from TypeScript?

angular contains vulnerabilities of a moderate severity level

How to Run an Angular2 Project Locally Without a Server

Error encountered in typescript when trying to implement the Material UI theme.palette.type

Error: Attempting to access a property called 'sign' on an undefined value

Attempting to establish a connection with MongoDB through Realm

Best Practices for Angular 4 Modules

When the request's credentials mode is set to 'include', the 'Access-Control-Allow-Origin' header value in the response should not be the wildcard character '*'