Dynamically form Input, to a function in Service, from Input from Template- Angular

Issue

Let’s say a service has a Subject, whose value you want to dynamically set from a component.

A.service.ts:

    //ChartTools: zoom?: boolean, pan?: boolean 
    public ChartConfig$: BehaviorSubject<ChartTools> = new BehaviorSubject(this.defaultValues);
    
    public changeChartConfig(config: ChartTools):void{
    const currentValues = this.ptChartToolsConfig$.value;
    
        this.ptChartToolsConfig$.next({
          ...currentValues,
          pan: config.pan,
          zoom: config.zoom
        })
      }

Now in component A,we want to set this subject dynamically through a function:

A.component.html:

<mat-checkbox
   value="zoom"
   [checked]= "ToolsConfig$.zoom"
   (change) = changeChartConfig($event.value, $event.source._checked)
 >

A.component.ts

   ngOnInit():void{
    private ToolsConfig$ = this.A_Service.ChartConfig$.subscribe();
  }

  //cTask['constant']= "zoom" | "pan"
  changeChartConfig(component: cTask['constant'], checked: boolean):void{
    
    this.A_Service.changeChartConfig({
      component : checked
    })
}

But, the input ‘component’ in changeChartConfig() is not even used and I get the error:

Argument of type '{ component: boolean; }' is not assignable to parameter of type 'ChartTools'.
  Object literal may only specify known properties, and 'component' does not exist in type 'ChartTools'.

I understand It’s saying ‘component’ doesn’t exist in interface ChartTools, but the values of component exist in ChartTools, and I want to use them.

Can someone please help me with what can be done to resolve this?

Solution

You have a typescript issue here.

What your error is saying is that you are expecting params to be ChartTools, but you are sending in something that looks different. Check your interface to make sure everything fits in properly. Also if in interface you are lacking component property add it. If everything is fine reset your VScode

So lets say your ChartTools interface looks like this:

interface ChartTools {
 property1: string;
 property2: number;
 component: boolean;
}

The error prevents you to send in a value that lacks property1 and property2, because it is not a ChartTool.

How to fix it:
either make property1 and property2 opitonal:

interface ChartTools {
 property1?: string;
 property2?: number;
 component: boolean;
}

use TS Partials, or add the missing params to you component when you are sending data:

changeChartConfig(component: cTask['constant'], checked: boolean):void{
    
    this.A_Service.changeChartConfig({
      component : checked
      missingProp1: 'Some value'
      missingProp2: 'Another value'
    })
}

EDIT
If you are trying to achieve dynamic property name do it this way:

this.A_Service.changeChartConfig({
      [component] : checked
    // [component] will be parsed instead of being sent in as a string

    })

Answered By – Filas Siuma

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.