Angular 2 pass array into directive via attribute not variable

Issue

Working my own custom component and stuck with how to make it use both attributes and variables. I'm using @Input attribute directives and this works when I pass in correctly scoped variables.

component (this works)

<mycomp [arrayValue]= "someArrayVar">html</mycomp>

but I'm not sure what I need to do to make this work??

component (not working)

<mycomp arrayValue= "[1,2,3,4,5]">html</mycomp>

my directive looks something like this...

directive

    export class MyComp implements DoCheck, OnInit {

      @Input() arrayValue: number[];

Would appreciate anyone who can explain how I'd implement both input alias and attributes for passing in when no variable is used and a string is passed like "[1,2,3,4,5]"

Solution

arrayValue="[1,2,3,4,5]" will pass the value you give it as a string. If you really want to make it possible to pass the array this way, you'll have to parse it yourself (for example, using JSON.parse), probably in the setter (not getter) for arrayValue.

@Input() set arrayValue(value: string | number[]) {
  if (typeof value == 'string') {
    this._arrayValue = JSON.parse(value)
  } else {
    this._arrayValue = value
  }
}

But the question is, why you want to do this? It's not recommended.

Answered By - Lazar Ljubenović