How To Declare Array Of Objects Globally In Angular

Question

I have an object that I'm using in multiple places in my component.ts file and I want to know how I can declare it globally or somehow turn it into it's own static class.

  calculateStandard(change) {
/* this function calculates the standard change for a transaction (most efficent denominations) */
// TODO make the denominations object a global variable or model
var denominations = [
  {name: "twenty", plural: "twenties", value: 20.00},
  {name: "ten", plural: "tens", value: 10.00},
  {name: "five", plural: "fives", value: 5.00},
  {name: "one", plural: "ones", value: 1.00},
  {name: "quarter", plural: "quarters", value: 0.25},
  {name: "dime", plural: "dimes", value: 0.10},
  {name: "nickle", plural: "nickles", value: 0.05},
  {name: "penny", plural: "pennies", value: 0.01}
];
var result = denominations.reduce(function(accumulator, currentDenomination) {   // iterates through the denomination object from top to bottom
  if (change >= currentDenomination.value) {
    var currentValue = 0.00;    // the amount of coins/bills for each denomination
    while (change >= currentDenomination.value) {
      currentValue ++;
      change -= currentDenomination.value;
      change = Math.round(change * 100) / 100   // prevents nasty decimal issues in TypeScript
    }
    if (currentValue > 1) {   // checks to see if the plural denomination name should be used or not
      accumulator.push({name: currentDenomination.plural, amount: currentValue});
    } else {
      accumulator.push({name: currentDenomination.name, amount: currentValue});
    }
    return accumulator;
  } else {
    return accumulator;
  }
}, []);   // the empty array is the initial accumulator
return result
}

the denominations object is the object I'm trying to declare globally.

check angular.io/tutorial/toh-pt4

Deepak gupta
– Deepak gupta

2018-09-12 04:34:49 +00:00
Commented Sep 12, 2018 at 4:34 — Deepak gupta
– Deepak gupta, Commented Sep 12, 2018 at 4:34

KShewengger · Accepted Answer · 2018-10-18 23:38:46Z

11

If you have a static data and want to use it globally - There is a simplest way to implement it

You can also refer to this Demo link

1.) Create denominations.ts - that exports your static data

export const denominations = [
  {name: "twenty", plural: "twenties", value: 20.00},
  {name: "ten", plural: "tens", value: 10.00},
  {name: "five", plural: "fives", value: 5.00},
  {name: "one", plural: "ones", value: 1.00},
  {name: "quarter", plural: "quarters", value: 0.25},
  {name: "dime", plural: "dimes", value: 0.10},
  {name: "nickle", plural: "nickles", value: 0.05},
  {name: "penny", plural: "pennies", value: 0.01}
];

2.) On your AppModule - import your denomination and specify it to the providers section

// Import the newly create 'denominations.ts' as per step #1
import { denominations } from './denominations';


@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ 
    // Named the provide to 'DENOMINATIONS' which holds the denominations data
    { provide: 'DENOMINATIONS', useValue: denominations }   
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3.) On your AppComponent - Inject the denomination and utilize it on your template

You can perform the @Inject method to any component you wish to utilize your static data

import { Component, Inject } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `{{ denominations | json }}`,  // Or *ngFor to loop the data.
})
export class AppComponent  {

  constructor(@Inject('DENOMINATIONS') public denominations: any[]) {
       // or try to console the denominations here
  }

}

edited Oct 18, 2018 at 23:38

answered Sep 12, 2018 at 4:48

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MelbDev Over a year ago

If I want to write/edit data in denominations.ts, how do i do that?

KShewengger Over a year ago

You may not be able to directly change the data inside the denominations.ts if you are accessing it on another component through the @Inject() but you can use a service like you can name it as DenominationService and there you could perform any data manipulation based on what methods you want it to use that the other components will be able to utilize

Collectives™ on Stack Overflow

How To Declare Array Of Objects Globally In Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related