Angular-dart: Automatic conversion of Component's @input fields from attributes

Question

suppose

<component list-attribute="a b c" bool-attribute></component>

Whats is the best way of having the component state like this:

@Component(...

class Component{

  List<String> listAttribute; // Should automatically contain [a,b,c]

  bool boolAttribute; // Should automatically contain true

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

There is nothing un Angular to automatically transform values.

This kind of binding

 list-attribute="a b c"

will always pass a string.

Possible solutions

At first the property needs an annotation

@Input()List<String> listAttribute;

Passing a list explicitely

 [list-attribute]="['a', 'b', 'c']"

Make a setter that does the conversion

List<String> _listAttribute
@Input() set listAttribute(String value) {
  _listAttribute = value?.split(' ');
}

with

list-attribute="a b c"

or

[list-attribute]="'a b c'"

or a custom pipe to do the splitting like

[list-attribute]="a b c | split"

Angular-dart: Automatic conversion of Component's @input fields from attributes

Possible solutions

Sign up