HTML5 Download Attribute with TypeScript and Angular 9
In this article, we'll learn by example what's the HTML
download attribute and we'll see how to use it with TypeScript and Angular 9/8 by example for downloading files from a server or REST API endpoint.
HTML 5 provides many features that are less known by developers but can be useful for quickly solving common development problems.
See also how to upload forms with FormData and TypeScript.
What's the Download Attribute in HTML 5?
One of these HTML 5 features is the download attribute which enables developers to use a different file download name other than the name in the URL and even force the downloading of a file by the browser which was only possible via server code before that.
download attribute allows you to instruct the web browser to download the resource specified as the value of the
href attribute. And also use a default file name for the downloaded resource.
Note: The download attribute is restricted by the same origin policy.
The HTML Download Attribute by Example
If you have implemented file downloading before using server-side methods such as the
Content-Disposition header which is used for specifying the default file name in the browser's Save As dialog.
The download attribute which is introduced in HTML 5 can be used for:
- Downloading a resource instead of navigating to the resource,
- Providing a default file name for the downloaded resource.
Let's see an example of the download attribute.
We use the attribute with anchor tags, for example:
<a href="/files/sdsdfasd89asd8f.pdf" download="newname.pdf">Download File</a>
When the user triggers the download link, the file will be downloaded with the filename in the download attribute.
This attribute can be useful when the generated file names are used in the server-side so the download attribute enables the file name to be meaningful to users.
Note: For older web browsers such as Internet Explorer, the
downloadattribute may not be available. In this cas, you can open the downloaded resource in a new browser tab/window with the
targetattribute set to
The Download Attribute in Angular by Example
You can bind the
download attributes in Angular to set the URL and filename dynamically as follows:
<a [href]="url" [download]="filename"> </a>
- Author: Ahmed Bouchefra Follow @ahmedbouchefra
✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also
✋ Want to master Angular 14? Read our angular tutorial and join our
#DailyAngularChallengewhere we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.
✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.
❤️ Like our page and subscribe to our feed for updates!
Find a list of emojis to copy and paste
Hands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!