Add input values to table - Angular 2

Question

How can I input file name in table for each time when I import some file?

I have input and button that actualy start event on that input on click.

<button class="btn-main" (click)="ElementFileInput.click()">Import </button> <input #ElementFileInput (change)="importElement($event)" type="file" " style="width: 0px; height: 0px; overflow: hidden;" />

Also, in my ts I have defined that function, and extracted name value from file.

TS function:

importElement(event: any) {

    this.values = event.target.files[0].name;

And html part where I show my file name:

<label style="color: blue">{{values}}</label>

Function is working and when I input file, i get name written in label.

But I want to make table that will list file names for every file that I import, not just once. How can I do that?

will this list of files be available on refresh coz if yes u'll need some kind of storage — Isaac Obella
– Isaac Obella, Commented Sep 28, 2017 at 15:27
I plan to user array to store files, but since that this component is actualy a popup modal, refresh will erase all data anyway ;) I need array solution just for that case when user import files in one take — John Theoden
– John Theoden, Commented Sep 28, 2017 at 15:43

Maximilian Riegler · Accepted Answer · 2017-09-28 15:32:25Z

2

You could add a member variable in your component class to push the values to:

files: Array<string> = [];

And in your import method just call push on the array:

importSeabed(event: any) {

    this.files.push(event.target.files[0].name);

This way the file name will be added to the array instead of replacing your variable.

To display the list you need the ngFor directive:

<label style="color: blue" *ngFor="let file of files">{{file}}</label>

answered Sep 28, 2017 at 15:32

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

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

1 Comment

John Theoden Over a year ago

Great, that is just what I needed. Thanks :)

Zak · Accepted Answer · 2017-09-28 15:31:11Z

1

Your importSeabed() function could add the file name to an array each time it is executed. You could then use the *ngFor expression within your component's template to add a new table element for each value within the array.

See the Angular documentation for further information.

answered Sep 28, 2017 at 15:31

Zak

1271 silver badge10 bronze badges

Collectives™ on Stack Overflow

Add input values to table - Angular 2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related