How to read data attribute value in angular 6

Question

I have file control and I am setting data attribute using jquery. But when I submit the form the I am getting null value of data attribute.

ad.html

<div class="field" align="left">
    <span>
        <h3>Upload your images</h3>
        <input type="file" id="files" data-filedata="" name="files[]"  multiple (change)="preview($event)" />
    </span>
</div>

Jquery code to set data attribute

$("#files").on("change", function(e) {      
    e.target.setAttribute('data-filedata', 'abc');
})

ad.ts

preview(event) {     
    console.log(event.target.getAttribute('data-filedata'))
}

Angular and JQuery don't mix well. You should try to make this a 100% Angular solution. — ShamPooSham, Oct 08 '18 at 15:26
actually many other things are also based on the above jquery code — , Oct 08 '18 at 15:39
Why are you trying to mix Angular and jquery? Is this an old jquery project that you're trying to port to Angular? Or are you starting from scratch? — ShamPooSham, Oct 08 '18 at 15:42
Does this answer your question? [How can I write data attributes using Angular?](https://stackoverflow.com/questions/34542619/how-can-i-write-data-attributes-using-angular) — Vega, Jan 07 '22 at 11:13

score 6 · Answer 1 · answered Oct 08 '18 at 15:38

You should probably not mix jquery and Angular, so here's a solution without jquery:

ad.html:

<div class="field" align="left">
    <span>
        <h3>Upload your images</h3>
        <input type="file" id="files" [attr.data-filedata]="filedata" name="files[]"  multiple (change)="preview($event)" />
    </span>
</div>

ad.ts:

class Ad {
   filedata = '';

    preview(event) {
        this.filedata = 'abc';
        console.log(event.target.getAttribute('data-filedata'))
    }
}

Because of the Angular's change detection cycle, you won't see the new value until you change the file a second time. But if you use your browser's dev tools you'll see that data-filedata is updated just after you upload a file.

Here's a stackblitz

How to read data attribute value in angular 6

1 Answers1