Issue with Angular 6: Despite using (change) event in textarea, the content of the textarea remains unchanged

I'm facing an issue with a textarea where modifying its content does not update the textarea when the (change) event is triggered by code.

Here's an example:

app.component.html

<textarea #content (change)="dosomething(content.value)">{{ thecontents | json }}</textarea>

app.component.ts

thecontents;

dosomething(data) {

    // this will overwrite whatever is already in the textarea
    this.thecontents = {  something : 'someother'};
}

The issue lies in the fact that the textarea does not update when the (change) event is triggered.

How can this be fixed? Any suggestions?

angulartypescriptangular6

Answer №1

To link the textarea content, use either [value] or [ngModel]:

<textarea (change)="dosomething($event.target.value)" [value]="thecontents | json"></textarea>

<textarea (change)="dosomething($event.target.value)" [ngModel]="thecontents | json"></textarea>

Check out this stackblitz for a demonstration.

Answer №2

If you prefer not to use ngModel, another option is to utilize the View Child Directive for achieving similar results

@ViewChild('content') con:ElementRef;
  thecontents={something:''};
name='';
  dosomething(data) {

    // this will overwrite whatever is already in the textarea

this.con.nativeElement.value=1;

}

I have made some modifications to your code, you can view them here https://stackblitz.com/edit/angular-xjksed

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Only natural numbers are allowed as input in Angular 2 framework

I am working on a shop component and I want to prevent users from entering negative numbers in my input field. When a user types -3 in the input, I want the value to automatically change to 0. How can I use Angular 2's OnChange event to reset the in ...

angularangular2-forms

Angular CDK drag directive: Revert the standard clicking and dragging functionality for selecting text within an HTML input located within a cdkDrag container

My query: <div cdkDrag> <input id='myInput'> <div>Hello World</div> </div> After a user clicks on the input 'myInput' and attempts to select text, the cursor movement is detected for dragging the cdk ...

angulardragangular-cdk

Using the angular2-cookie library in an Angular 2 project built on the rc5 version

Starting a new angular2 rc5 project, I wanted to import the angular2 cookie module. After installing the module with npm, I made changes to my angular-cli-build.js file : npm install angular2-cookie edited my angular-cli-build.js file : module.exports ...

javascriptnode.jsangulartypescriptangular2-cookie

Using the locale identifier en-GB can lead to date formats being displayed incorrectly

I'm struggling with setting up the correct locales in my Angular application. As per the documentation, I've inserted the following code snippet into my angular.json file. "projects": { "appname": { ..., "i18n&q ...

angularinternationalization

Dynamic side menu change in Ionic 3 allows for flexibility and customization in the app's

Is there a way to automatically change the direction of the side menu when switching between languages (rtl and ltr)? I attempted to implement this functionality in the app.html page using the following code: <ion-menu [side]="isRtl?'right':& ...

angularionic3side-menu

The Angular MSAL Guard has invoked the RenewIdToken method

I am currently utilizing Angular 9 in conjunction with a dotnet core web api, both of which are secured using Azure B2C. While everything appears to be functioning properly, I have noticed that the MsalGuard seems to be requesting a new Id token after eac ...

angularazure-ad-b2cazure-ad-msal

Problem with Clerk's authentication() functionality

Currently facing an issue with the Clerk auth() helper (auth() documentation) while working with react and next 13 (app router). When trying to access both userId and user from auth(), const { userId, user } = auth();, it seems that userId contains a val ...

javascriptreactjstypescriptnext.jsclerk

The issue of resolving NestJs ParseEnumPipe

I'm currently using the NestJs framework (which I absolutely adore) and I need to validate incoming data against an Enum in Typscript. Here's what I have: enum ProductAction { PURCHASE = 'PURCHASE', } @Patch('products/:uuid&apos ...

javascripttypescriptnestjsnestjs-config

Using conditional assignment in TypeScript is similar to using Kotlin's `when` statement

I'm just starting to dabble in TypeScript and exploring its various language features. One thing that I find lacking is a 'when' expression or conditional assignment, similar to the following: const language = "DE"; const test = (language: ...

javascripttypescript

Issue with Angular 2's event emitter malfunctioning

I have a dashboard component and a bottom-nav component. When the setting icon in the bottom-nav component is clicked, I want an alert to appear in the parent dashboard component. Here is the code: dashboard.component.ts ===== html part ====== <div cl ...

angular

Storing multiple fields using LocalStorage in Angular2

After finding inspiration from the example at https://github.com/PillowPillow/ng2-webstorage, I successfully managed to store and retrieve the boundValue. Now, I encounter a new challenge with a list of bots: bot.component.html <tr *ngFor="let bot of ...

angularlocal-storageweb-storage

Verify User for Changing Route without preserving changes during editing in Angular 2

When a user is editing content and attempts to navigate away without saving, the system should prompt them with a message saying 'Your changes have not been saved. Are you sure you want to leave?' Would it be possible to prevent the component fro ...

javascriptangularroutesrouter

Unable to resolve external modules in TypeScript when using node.js

I wanted to integrate moment.js into my node application, so I proceeded by installing it using npm: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adc0c2c0c8c3d9ed9f8399839d">[email protected]</a> J ...

node.jstypescriptmomentjscommonjs

Unable to access attribute of instantiated class

I am relatively new to TypeScript and I recently encountered a problem that's stumping me. I'm working on setting up a REST API using Express. The setup involves a router that calls a controller, which in turn invokes a service method before ret ...

javascriptnode.jstypescriptexpress

Suggestions for resolving this problem when attempting to add an item to an array

I am currently working on a form that allows users to add items into an array list. However, I am facing an issue where if a user chooses to add more devices into the array and changes the model type, the code counts it as part of the previous array if the ...

javascriptangularionic-framework

There is no way for me to view my loader more than once

I am currently utilizing @ng-bootstrap/ng-bootstrap for pagination and ngx-loading to handle loader display. Both of these components are performing well in my application. Here is the code snippet for pagination: {{ loading }} <ngb-pagination [colle ...

angular

Tips on incorporating a child component into a parent component using React and TypeScript

I am trying to conditionally render a child component within a parent component using React and TypeScript. Here is the code I have: const Parent = ({ prop1, prop2 }: { prop1: Prop1, prop2: Prop2; }) => { const isChecked = true; return ( ...

reactjstypescript

Is there any re-rendering optimization feature in Angular 2?

After experimenting with React for a few months, I've noticed that it doesn't just re-render a component entirely. Instead, it identifies the differences and updates only those parts. Does Angular 2 operate in a similar manner? Additionally, whe ...

javascriptangularangular2-template

How should one address high and moderate apparent dependence problems?

After running "npm audit fix" and ignoring the warnings, my Angular project was functioning well. However, it suddenly stopped running. I am using the latest version of Angular and it suggests selecting different dependencies manually since the suggested ...

angularnpmdependenciesfrontend

A TypeScript type that duplicates the structure of another object type, while modifying the property types based on their original conditions

I am in need of a TypeScript type that can duplicate another object type while adjusting the types of properties based on their original conditions. This adjustment should apply to all nested and deeply nested properties as well. For instance, consider a ...

typescript