Tips on modifying the information from the "ngModel" directive prior to it being shown in two-way binding

    <textarea #hello class="form-control" name="Input" type="text" rows="10" cols="40" [(ngModel)]="answer">
    </textarea>
    
    <div class="message">
      {{ answer }}
    </div>
    transform(value: string): string {
        return value.replace(/\\n/g, '<br />');
      }
    answer = '';

My goal is to allow users to input data, save it in a variable, manipulate it (e.g. replace certain characters), maintain its formatting, and then display it.

I am exploring the possibility of intercepting the data from ngModel before displaying it, making modifications, and then displaying it as intended by using normal ngModel functionality.

If this approach is not feasible, I would appreciate any advice on alternative methods to achieve my requirement. Any guidance would be helpful.

Answer №1

<textarea #hello class="form-control" name="Input" type="text" 
 rows="10" cols="40" [(ngModel)]="answer" (keyup) 
  ="onKeyUp($event)">
  </textarea>

  <div class="message">
 {{ formated }}
  </div>

typescript

onKeyUp(event: any)
{
This.formated = event.target.value.replace(/\\n/g, '<br />');
 }
 answer = '';
 formated: string

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

What are some ways to get Angular2 up and running in a newly created distribution directory?

Trying to setup my own Angular2+Typescript (+SystemJS+Gulp4) starter project has hit a roadblock for me. I encountered issues when transitioning from compiling TypeScript in the same folder as JavaScript with access to the node_modules folder, to organizin ...

Preventing duplicate namespace declarations in TypeScript

Let's say I have a variety of objects with the following data structure: { namespace: 'first'|'second'|'third' } Now, I need to include another object with the same data structure, but its namespace cannot be assigned ...

The process of sequentially sending independent HTTP requests in Angular

I need to send 10 requests sequentially, one after the other, and gather all the results in an array. I attempted to use the forkJoin method, but it executed all the requests simultaneously. For parallel requests search(queryUrls) { queryUrls.forEach ...

How does Typescript handle dependency injection compared to the JSDoc typedef module import for defining types?

Currently, I am facing an issue with defining dependency injection in Typescript. In my experience with JSDoc, I have used typedef import('./classModule.js').default myClass. To illustrate, let's consider multiple classes stored in their o ...

Utilizing Electron API within an Angular Component

I'm hoping to utilize a locally stored video file in electron and play it within my angular component. Despite exposing the loadLocalFile function to prevent the need for setting nodeIntegration to true, I keep receiving a Security Warning : This re ...

Setting property values in Typescript by initializing them from other properties when reading objects from a subscription response

I have created a basic class structure export class SampleObj{ item1: string; item2: string; item3: string; } I am fetching data from the backend and populating this class using HttpClient: this.httpClient.get<SampleObj[]>(`backendUrl`).subscr ...

Angular view not showing dates retrieved from MySQL database

Currently, I am experimenting with Angularjs alongside TypeScript to create a simple to-do list as a web page for practice and fun. Below is my controller that interacts with the database and stores the objects: module app.ToDo { class ToDoCtrl { ...

Error message: While running in JEST, the airtable code encountered a TypeError stating that it cannot read the 'bind' property of an

Encountered an error while running my Jest tests where there was an issue with importing Airtable TypeError: Cannot read property 'bind' of undefined > 1 | import AirtableAPI from 'airtable' | ^ at Object.&l ...

Incorporating a TypeScript module into a JavaScript module within a React application

I'm encountering an issue with my React app that was created using create-react-app. I recently added a Typescript module to the project, which is necessary for functionality reasons. Although it will remain in Typescript, I made sure to install all t ...

component is receiving an incompatible argument in its props

I am facing a situation where I have a component that works with a list of items, each with an ID, and a filtering function. The generic type for the items includes an ID property that all items share. Specific types of items may have additional properti ...

What is the proper way to declare and utilize a constant list within a component template in NuxtJs?

Can someone help me with using itemList in a template? The itemlist is a static list, but I am unsure of where to declare it and how to export it to the template. <template> <table class="table table is-striped is-narrow is-fullwidth" ...

The module 'LoginModule' encountered an error when importing the unexpected value 'LoginRoutingModule'

Greetings! I am currently working on a learning project with Angular 2, where I am developing a test application. While attempting to eagerly load the LoginModule module, I encountered an error message that states: Unexpected value 'LoginRoutingModul ...

Is there a way to verify the presence of a collection in firestore?

Is there a way to check if a collection exists in Firestore or not? There is a method to check if a document exists, like so: this.afs.doc('users/' + userId).ref.get().then((doc) => { if (doc.exists) { console.log("User already e ...

In Typescript, issues arise when trying to assign types with inheritance in Generics - Type mismatch detected

As I work on creating a generic parent class to handle multiple children, I have encountered a challenge. My goal is to define an abstract function in the parent class that will take in a child object and return that same class. Here's my initial atte ...

Update the CSS variables in Angular Material version 15 to reflect new changes

Angular Material 15 introduces some significant changes to colors and spacing. As a result, I find myself needing to override the default CSS variable values in my styles.scss file. :root { --mdc-typography-button-letter-spacing: 'normal'; ...

What could be causing the countdown timer to speed up unexpectedly?

Currently, I am developing a quiz application. At the moment, I need to implement the following features: Countdown timer Questions Question Choices The countdown timer for each question functions properly as long as the answer button is not clicked or ...

"Encountering a blank page in React Router when transitioning between separate projects

I've come across some discussions about a similar issue like this one, but I haven't been able to resolve my problem. In my initial project, I can smoothly navigate between its pages. However, when I created a second project hosted in a subdirec ...

Angular - The argument provided is not compatible with the parameter

I encountered the following TypeScript errors in app.component.ts: Issue: Argument of type '(events: Event[]) => void' is not assignable to parameter of type '(value: Event[]) => void'. Description: Types of parameters 'e ...

Disconnecting a Metamask Wallet in an Angular application: A Step-by-

I need assistance with disconnecting a Metamask wallet using web3 in Angular. //this is my wallet connection code async connectWallet() { const accounts = await this.ethereum.request({ method: 'eth_requestAccounts', }); this.selectedAddress ...

What causes an array to accumulate duplicate objects when they are added in a loop?

I am currently developing a calendar application using ExpressJS and TypeScript. Within this project, I have implemented a function that manages recurring events and returns an array of events for a specific month upon request. let response: TEventResponse ...