Downloading dynamic file with angular

Active Oldest Votes. Improve this answer. Chunbin Li Chunbin Li 1, 1 1 gold badge 12 12 silver badges 27 27 bronze badges. I updated it; you can call dynamicDownload after service got data. I change buttons to anchors, But I don't think it has anything to do with the HtmlElement you want to use. Add a comment. Here is StackBlitz demo Just uncomment the saveAs line if you want to see it download the file.

John Gilmer John Gilmer 1 1 gold badge 8 8 silver badges 16 16 bronze badges. Incase json, it opens a new tab. Any idea how to download json? For Angular 11 , you will find another option to set whether you want to use stricter type or not. Here I am using stricter type and later I will show you how to use stricter type for response and error. Remember the file extension ts service.

Service is one of fundamental blocks of every Angular application. Service is just a TypeScript class with or even without Injectable decorator. Once you create the service class you need to register it under app. Injectable is a decorator that has a property providedIn.

When the service is provided at root level, Angular creates a single, shared instance of service and injects into any class that needs it. Registering the provider in the Injectable metadata also allows Angular to optimize an application by removing the service if it is not used.

If you are not using stricter type then your code should be working fine as it is working for Angular On the homepage of the application, by entering credentials and uploading a picture, we can successfully create a User. When we add a user, the profile picture will also automatically appear in a folder inside our application. For the sake of simplicity, we will show them below the user creation form. Each photo in the list will have an associated download button which will trigger the download for that particular file.

For the realization of the idea of iterating through a list of users, we first need to load the users from the database. Luckily, we already have a method in the app. Here, we also added the selector for the DownloadComponent so its template renders next to each profile picture.

By clicking the download button, we will get a message that we have hit the download end-point:. With this implementation, we are manipulating the user data that we read from the database, selecting image properties, and showing them. But what if we want to read the files directly from a folder? To be able to read from a folder, we need its path.

When we access the desired folder, we pick up the files with specific extensions since we only want pictures. That way we will get paths for each file and render them on the UI as we do now by reading from the database. Firstly, we are going to add a new end-point to our FileController. We will fill it with the necessary logic for reading. Note: If the only photos in the folder are the ones associated with users, try to add more files so that there is a clear difference between these two approaches.

The updated FileController. For using it on the client-side, we need to add the corresponding method to the file. Articles for badass Angular Developers. Written by Netanel Basal Follow. More From Medium. Improve your React skills and create a responsive destination site using the semantic UI template.

William Infante in Nerd For Tech. Ian Marshall. Development tips: create-react-app. You can also create a custom injection token for URL - also see below how we'll do this for FileSaver. By setting the option observe to events while making an HTTP request, we won't just receive the final response body of the request but also get access to intermediate HTTP events.

We also need to explicitly pass the option reportProgress in order to receive HttpProgressEvents. Our HTTP request will eventually look like follows:. Since we don't just want to forward these events to every component, our service has to do some more work.

Otherwise our component would have to deal with HTTP specifics - that's what services are for! Instead let's introduce a data structure representing a download with progress:. A Download can be in one of three states. Either it hasn't started yet, therefore it's pending.

Otherwise it's done or still in progress. We use TypeScript's union types to define the different download states. Additionally, a download has a number indicating the download progress from 1 to Once a download is done, it will contain a Blob as its content - until then this property is not available, therefore null. Now we want to abstract from specific HTTP events to our newly defined data structure. This way our components can be decoupled from the underlying network protocol.

Since we're dealing with multiple events coming in over time, a RxJS operator is well suited here - so let's create one!