Angular Challenges #16 Dependency Injection

To successfully complete this challenge, you will need to have a good understanding of how Dependency Injection works inside Angular.

The goal is to provide the CurrencyService at the row level, so that each row displays the correct currency. Currently, the CurrencyService is only provided at the table level, which results in an error as the same currency is displayed for each row, despite each product having a different currency.

One way to achieve this is by adding a second argument to the pipe, but this is not allowed.

Your task is to display the correct currency for each row.

You cannot modify the pipe. You cannot wrap the row inside a component, as this will break the layout.

• If you wrap each row inside another component, then you can initialize a store for each wrapper component.
• I modified the pipe just to see what it would take to achieve the result.
• I passed currencyCode to the pipe. I was able to display the currencyCode but displaying the symbol doesn't seem possible without a dictionary / lookup object.
• I tried to use patchState inside the transform pipe but you get Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '1000 US$'. Current value: '1000 €'.
• Also, "Writing to signals is not allowed in a computed or an effect by default. Use allowSignalWrites in the CreateEffectOptions to enable this inside effects."
• The currency object is already exported so I imported it and used the find method to get the symbol in the html.

• Stack Overflow - how do I call angular pipe with multiple arguments
• Stack Overflow - inheritance and dependency injection
• Stack Overflow - angular extending services and passing parameters
• NgJournal - component store meets facade pattern
• Angular University - angular redux ngrx rxjs
• Stack Overflow - how can i call a service from a directive in angular 2
• Stack Overflow - how to inject a service into a directive in angular 13
• Stack Overflow - inject a service into a directive
• Dev.to - Superpowers with Directives and Dependency Injection Series' Articles
• Angular Snippets - stateful directive with output
• Stack Overflow - how to pass values to directive in angular
• YouTube - Custom Directive in Angular - Attribute Directive | Structural Directive | Component Directive