How can I send a specific property of an object to a function in Angular?

Question

How can I send a specific property of an object to a function in Angular?

I currently have a interface set up for employees that looks like this:

export interface IEmployee {
    name: string;
    id: number;
    annualSalary: number;
    calculateMonthlySalary(annualSalary: number): number;
}

Now, I have a component that is implementing the above interface:

import { Component, OnInit } from '@angular/core';
import { IEmployee } from './../employee';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit, IEmployee {

  employees: IEmployee[];

  constructor() {
    this.employees = [
      {name: 'john', id: 1, annualSalary: 90000, calculateMonthlySalary: this.calculateMonthlySalary(annualSalary) }
    ];
  }

  calculateMonthlySalary(annualSalary: number): any {
    return annualSalary / 12;
  }

}

While trying to compute the monthly salary using the calculateMonthlySalary method from the interface and displaying it in the view using *ngFor, I encountered the following error:

ERROR ReferenceError: annualSalary is not defined

Please help correct me where I might be going wrong

angular typescript

Answer 1

Answer №1

Consider trying the following approach:

See Working Demo 1 Here

this.employees = [
  {name: 'john', id: 1, annualSalary: 90000, calculateMonthlySalary: this.calculateMonthlySalary(90000) }
];

When adding objects of Type IEmployee to the array, the object itself doesn't understand annualSalary, so it should be added in the calculateMonthlySalary() function

To make it more dynamic, you can create an Employee Class:

Check out Working Demo 2 Here

export class Employee {
  name: string;
  id: number;
  annualSalary: number;
  monthlySalary:number
  constructor(name: string, id: number, annualSalary: number) {
    this.name = name,
    this.id = id,
    this.annualSalary = annualSalary,
    this.monthlySalary = this.calculateMonthlySalary(annualSalary)

 }

 calculateMonthlySalary(annualSalary: number): any {
    return annualSalary / 12;
 }
}

and use it like this:

employees: Employee[];

  constructor() {
    this.employees = [
      new Employee('John',1,90000)
    ];
  }

Template:

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>MonthlySalary</th>
    </tr>
    <tr *ngFor="let item of employees">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.monthlySalary}}</td>
    </tr>
</table>

Answer 2

Consider trying the following approach:

See Working Demo 1 Here

this.employees = [
  {name: 'john', id: 1, annualSalary: 90000, calculateMonthlySalary: this.calculateMonthlySalary(90000) }
];

When adding objects of Type IEmployee to the array, the object itself doesn't understand annualSalary, so it should be added in the calculateMonthlySalary() function

To make it more dynamic, you can create an Employee Class:

Check out Working Demo 2 Here

export class Employee {
  name: string;
  id: number;
  annualSalary: number;
  monthlySalary:number
  constructor(name: string, id: number, annualSalary: number) {
    this.name = name,
    this.id = id,
    this.annualSalary = annualSalary,
    this.monthlySalary = this.calculateMonthlySalary(annualSalary)

 }

 calculateMonthlySalary(annualSalary: number): any {
    return annualSalary / 12;
 }
}

and use it like this:

employees: Employee[];

  constructor() {
    this.employees = [
      new Employee('John',1,90000)
    ];
  }

Template:

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>MonthlySalary</th>
    </tr>
    <tr *ngFor="let item of employees">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.monthlySalary}}</td>
    </tr>
</table>

Answer 3

Answer №2

The reason is that annualSalary functions as a key rather than a value within this specific object.

Consider implementing the following solution:

const salary = 9000;
this.people = [
      {name: 'john', id: 1, annualSalary: salary, calculateMonthlyIncome: this.calculateMonthlyIncome(salary) }
    ];

Answer 4

The reason is that annualSalary functions as a key rather than a value within this specific object.

Consider implementing the following solution:

const salary = 9000;
this.people = [
      {name: 'john', id: 1, annualSalary: salary, calculateMonthlyIncome: this.calculateMonthlyIncome(salary) }
    ];

How can I send a specific property of an object to a function in Angular?

Answer №1

Answer №2

Similar questions

HTML/Angular tutorial: Sharing an On-Click value with a different HTML element within the same component

Bring in the SCSS directory from the overarching SCSS program

Standardize API response using NgRX Entity

tsc will automatically incorporate additional files

Typescript offers a feature where we can return the proper type from a generic function that is constrained by a lookup type,

Avoid unwanted typeof warnings in TypeScript and WebStorm combination

Incorporating CSS classes conditionally in an Angular child component using input values

There was an error in parsing the module: an unexpected token was encountered during the rendering

I'm having trouble locating a declaration file for the module 'vue-prism-component'

Angular. The MatSelectionListChange event is returning an undefined value

Error: The token 'export' in d3zoom is causing a syntax issue

Trouble displaying data from rest api in Angular Material's mat-table

There are no markers or popups currently displayed on the map

What type is the appropriate choice for this handler?

Generate a configuration file that allows for the reading and storage of modifications

Ways to bypass browser pop-up blockers when using the window.open function

Angular2: Utilizing filter and search functionalities for an unordered list

Modifying the nginx configuration file for an Angular application: a step-by-step guide

Tips for extracting IDs from multiple checkboxes that have been selected upon submission in an Ionic 2+/Angular 2+ environment

When utilizing *ngIf in Angular 2, the issue of #elmentRef remaining undefined still persists