CODEWITHSUNDEEP
angular
John Theoden
John Theoden

Reputation: 325

Add input values to table - Angular 2

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?

Upvotes: 0

Views: 655

Answers (2)

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

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>

Upvotes: 2

Zak
Zak

Reputation: 127

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.

Upvotes: 1

Related Questions