Angular 2 pass array into directive via attribute not variable

Question

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]"

Are you really expecting to hard code an array in the template? — R. Richards
– R. Richards, Commented Jul 24, 2017 at 23:00

stryba · Accepted Answer · 2019-06-22 10:10:32Z

4

What you want is similar to your first version:

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

Just use this:

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

That is keep the brackets around your directive name in order to instruct angular to treat the value as expression.

answered Jun 22, 2019 at 10:10

stryba

2,02514 silver badges19 bronze badges

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

Comments

ArsTV · Accepted Answer · 2023-12-23 09:20:53Z

0

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.

edited Dec 23, 2023 at 9:20

ArsTV

3233 silver badges7 bronze badges

answered Jul 24, 2017 at 23:00

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

1 Comment

stryba Over a year ago

-1 granted this answer provides a solution to the OPs problem, however the solution implements functionality that angular already has built-in. And I feel this answer is misleading on how to address this kinds of problems and it should in no way be the accepted answer IMHO, hence -1.

Collectives™ on Stack Overflow

Angular 2 pass array into directive via attribute not variable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related