In Angular 2 how to put array string elements into template element value-attribute?

Question

I have this array called myArray in my Angular 2 component class:

@Component({
    templateUrl: 'my.component.html'
})

export class MyComponent {
    private myArray: Array<string>;
    ...
}

In my.component.html I have a single input element:

<input placeholder='write some tags' value=''>

What I want is to have the string elements of myArray inserted into the value attribute of the input element. The strings should be comma separated. Something like:

<input placeholder='write some tags' value='apple, orange, banana'>

I tried:

<input name='user-tag' placeholder='write some tags' value='*ngFor="let e of myArray"{{e}}'>

But that produced an error.

How can I do this?

Adam · Accepted Answer · 2017-02-15 22:51:26Z

18

No need to use *ngFor, try using Array.join().

<input name='user-tag' placeholder='write some tags' value='{{ myArray.join(', ') }}'>

answered Feb 15, 2017 at 22:51

Adam

4,7221 gold badge35 silver badges50 bronze badges

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

2 Comments

Bruno João Over a year ago

I would suggest you to create a filter to do this kind of thing so you will have a single point of ref and when some improvement is needed you won't need to change more than one place.

Adam Over a year ago

Absolutely, a pipe would be ideal for what you're describing, but I didn't want to over architect the answer.

Collectives™ on Stack Overflow

In Angular 2 how to put array string elements into template element value-attribute?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related