When using Angular @Input decorator, Typescript Type 'string' is not assignable to type

Question

My problem is related to Angular @Input() decorator, as when I am using this decorator, typescript throwing error, not when using in regular code.

In my child.component.ts file I am declaring this decorator to get props from parent component :

@Input() customColumns: {
    name: string;
    index: number;
    type: 'icon' | 'image' | 'link' | 'button';
    icon?: any;
    url?: string;
  }[] = [];
  indexList: number[] = [];

And in my parent.component.ts file I am assigning the value for this variable like this :

customColumns = [
    { name: 'permissions', index: 7, type: 'icon', icon: faSave },
    { name: 'price list', index: 6, type: 'link', icon: faArrowDownWideShort },
    { name: 'details', index: 5, type: 'button', icon: faArrowUpWideShort },
  ];

Lastly, in my parent.component.html file I am calling that child component:

<app-child [customColumns]="customColumns">
</app-child>

But I'm getting this error:

Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"button" | "link" | "image" | "icon"'.

But when I am doing same thing in normal typescript or ngOnInit() function it is working, can't figure out why it is happening, help me please, thanks in advance.

    let customColumns: {
      name: string;
      index: number;
      type: 'icon' | 'image' | 'link' | 'button';
      icon?: any;
      url?: string;
    }[] = [];

    customColumns = [
      { name: 'permissions', index: 7, type: 'link', icon: '' },
      {
        name: 'price list',
        index: 6,
        type: 'icon',
        icon: faArrowDownWideShort,
      },
      { name: 'details', index: 5, type: 'icon', icon: faArrowUpWideShort },
    ];

My project dependencies:

"@angular/cli": "~14.2.7",
"typescript": "~4.7.2"

I can, but I want to restrict that , others can only assign 4 options or string values. — Md. Mahadad Hossain
– Md. Mahadad Hossain, Commented Nov 15, 2022 at 4:47

yurzui · Accepted Answer · 2022-11-15 05:02:58Z

2

In order to replicate the same behavior in normal TypeScript you should use this scenario:

let customColumns: {
  name: string;
  index: number;
  type: 'icon' | 'image' | 'link' | 'button';
  icon?: any;
  url?: string;
}[] = [];

const anotherValue =  [
  { name: 'permissions', index: 7, type: 'link', icon: '' },
  {
    name: 'price list',
    index: 6,
    type: 'icon',
  },
  { name: 'details', index: 5, type: 'icon', icon: '' },
];
customColumns = anotherValue;

That's simular to Angular typecheck code.

In order to solve it you can use either predefined enum:

const enum ColumnType {
  icon = 'icon',
  image = 'image',
  link = 'link',
  button = 'button',
}

let customColumns: {
  name: string;
  index: number;
  type: ColumnType;
  icon?: any;
  url?: string;
}[] = [];


...
type: ColumnType.link,

or as const:

type: 'link' as const

answered Nov 15, 2022 at 5:02

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

5 Comments

Md. Mahadad Hossain Over a year ago

type: 'link' as const, I can't do this in angular, I have to declare interface for it . My problem is not normal typescript, but it is angular @Input (), where it is not working. But thanks for your answer anyway.

yurzui Over a year ago

Anyway? I showed behavior in simple ts but gave you Angular solutions. stackblitz.com/edit/…

yurzui Over a year ago

But I prefer enum stackblitz.com/edit/…

Jeff Mercado Over a year ago

The enum isn't strictly necessary, a simple typedef for the column type should be enough. typedef ColumnType = 'icon' | 'image' | 'link' | 'button';

yurzui Over a year ago

@JeffMercado With type ColumnType = 'icon' | 'image' | 'link' | 'button'; you have to use as const or as ColumnType again stackblitz.com/edit/…

Dinuka Silva · Accepted Answer · 2022-11-15 05:25:27Z

1

Please try this

1.create a class like this

export class CustomColumns {
constructor(
public name?: string,
public index?: number,
public type?: 'icon' | 'image' | 'link' | 'button',
public icon?: any,
public url?: string
){}
}

2.and in your child component use like this

@Input() customColumns: CustomColumns;

edited Nov 15, 2022 at 5:25

answered Nov 15, 2022 at 4:55

Dinuka Silva

968 bronze badges

6 Comments

Md. Mahadad Hossain Over a year ago

I already have done same thing, as you mentioned. It is working , as I described in my question, but not working , when I am using @Input () , instead of let.

Dinuka Silva Over a year ago

I edited my answer dr. please check it now.

Dinuka Silva Over a year ago

Happy to hear that. Can you accept my answer dr

Md. Mahadad Hossain Over a year ago

But, he gave me stackbiltz link, so he deserve it more, I think. But you are cool also, happy coding.

Dinuka Silva Over a year ago

Oh yes he deserve that. I just saw his answer.

|

Collectives™ on Stack Overflow

When using Angular @Input decorator, Typescript Type 'string' is not assignable to type

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related