The art of connecting models in Angular 2

Question

The art of connecting models in Angular 2

Hey there! I've got a setup that seems to be giving me some unexpected results. Whenever I make changes to either the Kelvin or Celsius field, I end up with strange outputs like multiplying by 1000 or other inexplicable numbers. I'm new to Angular 2, so I'm thinking it might have something to do with how I set up the binding.

Can anyone lend a hand? Any help would be greatly appreciated!

class Temperature {
  kelvin: number;

  constructor(kelvin: number) {
    this.kelvin = kelvin;
  }

  getKelvin(): number {
    return this.kelvin;
  }

  setKelvin(kelvin: number) {
    this.kelvin = kelvin;
  }

  getCelsius(): number {
    return this.kelvin - 273.15;
  }

  setCelsius(celsius: number) {
    this.kelvin = celsius + 273.15;
  }
}

export class ConverterComponent implements OnInit {
  temperature: Temperature;

  constructor() {
    this.temperature = Temperature.fromKelvin(21);
  }

  onKelvinChange(kelvin: number) {
    this.temperature.setKelvin(kelvin);
  }

  onCelsiusChange(celsius: number) {
    this.temperature.setCelsius(celsius);
  }


<input id="temperature-kelvin" type="number" class="form-control" [ngModel]="temperature.getKelvin()" (input)="onKelvinChange($event.target.value)" />
<input id="temperature-celsius" type="number" class="form-control" [ngModel]="temperature.getCelsius()" (input)="onCelsiusChange($event.target.value)" />

angular typescript angular2-forms

Answer 1

Answer №1

Implement the code below. There's no need for [(ngModel)] as the input value is captured in Onchange.

Temperature Converter

class Temperature {
  kelvin: number;

  constructor() {

  }

  getKelvin(): number {
    return this.kelvin;
  }

  setKelvin(kelvin: number) {
    this.kelvin = kelvin;
  }

  getCelsius(): number {
    return this.kelvin - 273.15;
  }

  setCelsius(celsius: number) {
    this.kelvin = celsius + 273.15;
  }
}

Component File

export class ConverterComponent implements OnInit {
  temperature: Temperature;

  constructor() {
    this.temperature = new Temperature();
  }

  onKelvinChange(event) {
    this.temperature.setKelvin(event.target.value);
  }

  onCelsiusChange(event) {
    this.temperature.setCelsius(event.target.value);
  }

HTML Template

<input id="temperature-kelvin" type="number" class="form-control" (keyup)="onKelvinChange($event)" />
<input id="temperature-celsius" type="number" class="form-control" (keyup)="onCelsiusChange($event)" />

Answer 2

Implement the code below. There's no need for [(ngModel)] as the input value is captured in Onchange.

Temperature Converter

class Temperature {
  kelvin: number;

  constructor() {

  }

  getKelvin(): number {
    return this.kelvin;
  }

  setKelvin(kelvin: number) {
    this.kelvin = kelvin;
  }

  getCelsius(): number {
    return this.kelvin - 273.15;
  }

  setCelsius(celsius: number) {
    this.kelvin = celsius + 273.15;
  }
}

Component File

export class ConverterComponent implements OnInit {
  temperature: Temperature;

  constructor() {
    this.temperature = new Temperature();
  }

  onKelvinChange(event) {
    this.temperature.setKelvin(event.target.value);
  }

  onCelsiusChange(event) {
    this.temperature.setCelsius(event.target.value);
  }

HTML Template

<input id="temperature-kelvin" type="number" class="form-control" (keyup)="onKelvinChange($event)" />
<input id="temperature-celsius" type="number" class="form-control" (keyup)="onCelsiusChange($event)" />

Answer 3

Answer №2

After some investigation, I managed to find the solution to my problem, although it did make me feel a little sheepish. It turns out that Typescript doesn't handle method parameters in a type-safe way when translating to JS. This led to a misunderstanding in the method below, where instead of adding numbers, it was concatenating strings because the celsius parameter was being treated as a string from the input field.

setCelsius(celsius: number) {
  this.kelvin = celsius + 273.15;
}

Fortunately, this issue can be easily rectified by using the unary operator + in front of the variable like so:

setCelsius(celsius: number) {
  this.kelvin = +celsius + 273.15;
}

Answer 4

After some investigation, I managed to find the solution to my problem, although it did make me feel a little sheepish. It turns out that Typescript doesn't handle method parameters in a type-safe way when translating to JS. This led to a misunderstanding in the method below, where instead of adding numbers, it was concatenating strings because the celsius parameter was being treated as a string from the input field.

setCelsius(celsius: number) {
  this.kelvin = celsius + 273.15;
}

Fortunately, this issue can be easily rectified by using the unary operator + in front of the variable like so:

setCelsius(celsius: number) {
  this.kelvin = +celsius + 273.15;
}

The art of connecting models in Angular 2

Answer №1

Answer №2

Similar questions

Mat backspin dialogue spinner

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

How to handle an already initialised array in Angular?

Navigating Timezones with PrimeNG Calendar Component <p-calendar>

What is the reason behind the slight difference between TypeScript's IterableIterator<> and Generator<> generics?

Resolve the issue of text overflow in PrimeNG Turbo Table cells

Ways to incorporate debounce time into an input search field in typescript

Guide to dynamically assigning attribute values in Angular 7 based on specific conditions

Error: ChangeDetectorRef provider is missing from the NullInjector

When using Google Maps, be sure to load it carefully as it may appear gray on the second attempt

What makes using the `@input` decorator more advantageous compared to the usage of `inputs:[]`

Confirm button title by verifying part of the label that contains a space

Angular2 is throwing an error: "NavigationService provider not found! (MenuComponent -> NavigationService)"

Guide to adding Angular 2 components to various locations in the DOM of a vanilla JavaScript webpage

Can you explain the process for accessing a parent function in Angular?

Creating reducers for a unique data type: A step-by-step guide

Angular 2 Aot Issue: CRITICAL ERROR: CALL_AND_RETRY_LAST Allocation unsuccessful - JavaScript heap exhausted

Changing the time in Angular while converting a string to a date object has proven to be

Sharing API types from a NestJs backend to a Vue frontend (or any other frontend) application: Best practices

Tips for avoiding the push method from replacing my items within an array?