Is the event emitter contained within the subscription?

I have an issue where I need to update my chart component after inputting values into a form field. However, I am unsure of how to accomplish this task.

This is the code in my start.component.html file:

<input [(ngModel)]="inputValue"/>
<select  (change)="selectedItem($event)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

The data received through ngModel directive is then passed to the chart component as follows:

<app-chart [optionsIncome]="options" [inputValue]="inputValue"></app-chart>

My issue lies in needing to refresh the chart component template after inputting values into the form field. While it works with the dropdown field, I am uncertain how to achieve the same result with the ngModel directive that is passed to another component and subscribed via BehaviorSubject.

Here is an example: Example

angulartypescript

Answer №1

It seems that the example provided may not function properly when there is a change in the dropdown field. To ensure consistent logic after input and dropdown value changes, consider using the ngModelChange function to pass the inputValue.

export class StartComponent implements OnInit {

  selectedItem(data) {
    if (data) {
      this.data.push(data);
      this.reload();
    }
    ...
  }

  changeByInput(inputValue) {
    this.selectedItem(inputValue);
  }

}
// start.component.html
<div><input type="text" [(ngModel)]="inputValue" (ngModelChange)="changeByInput($event)" /></div>

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

Incorporating a JavaScript library into Angular 7

I am looking to add Cleave.js and Rellax.js libraries to my project. Currently, I have successfully imported jQuery. These libraries require specific attributes in the HTML code. What is the best way to import these libraries? angular.json "scripts" ...

node.jsangular

Switching between dark and light mode in Angular Ionic

How do I create a toggle option for users to select between: Light | Dark | Auto Light or dark will change the appearance of the PWA, while 'Auto' will adjust based on the system's dark/light mode. I've attempted to implement this fo ...

angularionic-frameworkcapacitor

Angular Iterate Array Forms

Is there a way to iterate my rows based on user input? For example, if the user enters 2 values, I need to display 2 rows. How can I achieve this using FormArray? setCount(count:any){ console.log(count); this.count = count; this.countArray = Ar ...

angulartypescriptrxjs

Encountered a typing issue with the rowHeight property in Angular Material

Utilizing angular and angular material, I'm creating a mat-grid-list using the following code: template <mat-grid-list cols="2" [rowHeight]="rowHeight | async"> component rowHeight = this.breakpointObserver.observe(Breakp ...

angularangular-material

Error encountered: Unable to locate React Node during FaC testing with Jest and Enzyme

In my React Native app, we recently integrated TypeScript and I'm in charge of migrating the unit tests. One particular test is failing unexpectedly. The app includes a <LoginForm /> component that utilizes Formik. //... imports export inte ...

typescriptreact-nativejestjsenzymeformik

Initiate and terminate server using supertest

I've developed a server class that looks like this: import express, { Request, Response } from 'express'; export default class Server { server: any; exp: any; constructor() { this.exp = express(); this.exp.get('/' ...

javascripttypescriptexpressjestjssupertest

Setting a value to an optional property of an inherited type is a simple task that can

export interface CgiConfiguration { name: string, value?: string } export interface CgiConfigurationsMap { [configurationName: string]: CgiConfiguration } const createCGI = <T extends CgiConfigurationsMap>(configurations: T) => configur ...

typescript

The function to increase the number of days on a date in Angular is experiencing technical issues

I'm facing an issue where I need to add 12 days to a specific date, but the new date is not coming out as expected. Below is the code snippet: addDays(days: number): any { let startDate = new Date(this.selectedDeliveryDate); let endDate = new ...

angulartypescriptdate

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

When working with Angular 9, I am facing an issue where I need to format and send my date in a specific way within the payload. Currently, the code is sending the date in this format: otgStartDate: 2021-07-20T09:56:39.000Z, but I actually want it to be for ...

javascriptangulartypescript

Troubleshooting `TypeError: document.createRange is not a function` error when testing material ui popper using react-testing-library

I am currently working with a material-ui TextField that triggers the opening of a Popper when focused. My challenge now is to test this particular interaction using react-testing-library. Component: import ClickAwayListener from '@material-ui/core/ ...

reactjstypescriptmaterial-uireact-testing-library

What happens when i18next's fallbackLng takes precedence over changeLanguage?

I am currently developing a Node.js app with support for multi-language functionality based on the URL query string. I have implemented the i18next module in my project. Below is a snippet from my main index.ts file: ... import i18next from 'i18next& ...

node.jstypescriptexpressi18next

What is the syntax for invoking a function within a nested function in TypeScript?

Is there a way to call the function func2 from within the sample function of function func1? Any suggestions on how to achieve that? class A { public func1() { let sample = function() { //call func2... but ...

javascripttypescript

The component 'Form' cannot be utilized in JSX because its return type, 'ReactNode', is not a valid JSX element

I'm facing an issue with my Next.js application written in TypeScript after updating react-bootstrap. After the update, I am encountering the following error when attempting to use the Form component from react-bootstrap: react-bootstrap: ^2.10.3 @typ ...

reactjstypescriptnext.jsbootstrap-5

InitAuth0 Auth0 encountering deepPartial error in Next.js with TypeScript setup

Having some trouble setting up auth0 with nextjs using typescript. When I try to initialize Auth0, I encounter an error regarding deep partials, Argument of type '{ clientId: string; clientSecret: string; scope: string; domain: string; redirectUri: st ...

reactjstypescriptnext.jsauth0

The ngOnChanges() function fails to detect changes in the boolean @Input value coming from the parent component

Whenever I try to pass a dropdown toggle value to a child component, it works fine when the toggle is true but not when it's false. Despite using ngOnChanges to detect changes, it only picks up on the true values. ChildComponent export class ChildCom ...

angularparent-childevent-bindingngonchanges

Angular Universal build stuck on rendering page while waiting for API response

I'm currently developing a compact web application using the angular universal starter in combination with pokeapi. To enhance performance and reduce API requests, I intend to implement pre-rendered pages since the data displayed remains mostly static ...

angulartypescriptangular-cliangular-universal

Error encountered: The configuration for "@typescript-eslint/parser" specifies the project option, which does not align with the project settings in the .eslintrc.js file

After using create-react-app to kickstart a fresh typescript react application and then integrating firebase, I proceeded to run firebase init. During this process, I opted for the typescript selection, enabled es lint, and also activated functions. Upon ...

reactjstypescriptfirebasegoogle-cloud-functions

Verify if the date and time in string format is the exact same as noon

In my data collection, there are multiple objects each containing a specific date and time value: [ {dt: "2019-11-29 12:00:00"}, {dt: "2019-11-29 3:00:00"}, {dt: "2019-11-29 6:00:00"}, {dt: "2019-11-30 12:00:00"}, {dt: "2019-11-30 6:00:00"} ] M ...

javascripttypescriptangular7

NGXS State Mutation Event

In my NGXS store, I have an object called obj = { name: 'so-and-so', age: 42, nationality: 'country-name', address: { ... } }. It is essential that whenever any of the properties, including nested ones like 'address', are upda ...

angularrxjsngxs

Styles brought in from external sources do not get applied to components

My goal is to create a separate file specifically for storing styles targeted at IE 9-11. In order to achieve this, I have created a file named InternetExplorer.scss and imported it into my main file styles.scss: @import "scss/InternetExplorer.scss"; The ...

cssangularsass