Angular function for downloading table cells

I'm working with a table containing objects and I need to download each one by clicking on a download button. Download Img

<wb-button
        name="submitButton"
        variant="primary"
        size="s"
        style="width:100%"
        (click)="downloadSdo(sdo)"
        i18n >Download</wb-button
      >

My question is, what should the function in my file.ts look like?

 downloadSdo(sdo: SoftwareDataObject)
  {
    return sdo.id;
  }

Another approach could be placing the download buttons above the table so that users can choose which table to download when clicked. But how can this be implemented? I am new to this and would appreciate guidance.

angulartypescriptangular-material

Answer №1

If you need to convert your object into a string and then download it, you can achieve this by following these steps in JavaScript:

var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(sdo)));
element.setAttribute('download', filename);

element.style.display = 'none';
document.body.appendChild(element);

element.click();

document.body.removeChild(element);

If you only want to download the ID, simply modify the setAttribute() line from stringify(sdo) to stringify(sdo.id)

For more information on creating a downloadable file with JavaScript in the browser without a server, check out this article:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to effectively implement a function type specified in an interface

Consider the following interface: interface MyProps { onEvent: (name: string, data: any) => void; } Is there a way to utilize the function type in order to avoid unused parameter errors during compilation? eventHandler = (name: string, data: any) = ...

typescript

The Angular5 code is unable to execute the POST request, while it functions properly when triggered from Postman

Frontend: Angular5 Backend: Java (Operates on a Wildfly 8.x server) When sending an HTTP POST request from my Angular application to the server with content-type: 'application/json', I encounter the following error: Failed to load http://loc ...

angularcorshttp-postpostman

Incorporate an external JS file (File A) that is dependent on another JS file (File B) into a TypeScript file within the context of Angular 4

Working on an Angular 4 project, I recently installed two external JS libraries using npm. They are now in the node_modules folder and usable in another TS file within my project. The issue arises because import B requires import A, preventing me from effe ...

angulartypescriptnpm

Retrieving the value of an object using an array of keys

Consider the following object: const obj = { A:{ a1:'vala1', a2:'vala2' }, B:{ b1: 'valb1', b2: 'valb2' }, C:{ c1:{ c11:'valc11' }, c2:'valc2' } } We also have an array: const ...

angulartypescript

Error message displayed: "There was an issue locating (undefined) and (undefined) while attempting to run Angular-CLI command 'ng g c my-new-component'."

Issue: I'm experiencing a problem in my Angular 5+ app project. When I try to generate a new component in one of my subfolders using the command ng g c my-component, nothing is being generated. Instead, I am encountering some unknown errors. I have a ...

angularterminalcommand-line-interfaceangular-cli

The system couldn't locate the module: Issue: Unable to find module 'fs' within the directory

I am currently working on integrating the ADAL JS sample code from this link into a SharePoint framework client web part. My code is fairly straightforward, as I have already installed packages like adal, fs, and node-fs using NPM. However, when running t ...

javascriptnode.jstypescriptadaladal.js

Issue with locating module 'swiper_angular' during Jest unit testing following upgrade from Swiper 6 to 7

Encountering an issue with my unit tests post upgrading from Swiper 6 to 7. My setup includes Angular 12 and Swiper 7.3.1. The unit tests were functioning properly before the upgrade (Swiper version 6.5.9). Incorporating the SwiperModule in my tests like ...

angularjestjsswiper.js

Angular 6 - Resolving the Issue of 'Function calls are not supported in decorators' in Production Builds

Currently, I'm in the process of developing a cutting-edge Angular 6 application. However, as I was progressing with the development phase and tried to create a prod build using the following command: ng build --prod To my dismay, I encountered a pe ...

angularangular2-aotaot

Setting up a custom PrimeNG theme to match our unique style is a great way to

I am currently using the most recent version of "primeng": "^12.2.0", and I am looking to implement my own custom theme for primeng. Despite searching through numerous blogs, I have yet to find a solution. In an attempt to create my cu ...

cssangulartypescriptsassprimeng

I encountered an unexpected obstacle while reloading my Next.js application with animejs. The error message reads: "SyntaxError: Unexpected token 'export'." This unwelcome occurrence took place during the

Encountering an error with animejs when reloading my Next.js app: An unexpected token 'export' is causing a SyntaxError. This issue occurred during the page generation process. The error originates from file:///Users/.../node_modules/animejs/lib ...

javascripttypescriptnext.jses6-modulesanimejs

Guide on sending JSON object to Angular custom components

I have implemented a custom element in Angular 7 using the CUSTOM_ELEMENTS_SCHEMA. My app.module.ts code is as follows: export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { this.registerCustomElements( ...

javascriptangulartypescriptangular7custom-element

Creating a TypeScript NPM package that provides JSX property suggestions and autocomplete functionality for Intellisense

I developed a compact UI toolkit and released it on the NPM registry. The library is built using strongly typed styled-components (TypeScript) and can be easily integrated into React applications. It functions perfectly after installation with npm install ...

reactjstypescriptnpmstyled-components

React: The Material-UI autocomplete input, controlled with the React Hook Form `<controller>` component, experiences issues when the `multiple` prop is set to `true`

Currently facing challenges with managing an autocomplete MUI component using the <controller> component in react-hook-form. Take a look at the code snippet below: <Controller control={control} name="rooms" render={({ field }) =&g ...

reactjstypescriptmaterial-uiautocompletereact-hook-form

Retrieve the data from multiple forms effortlessly with a single click

I'm currently working on getting the results for multiple forms simultaneously. I have a structure in place to retrieve the result one by one, but now I need to send the results of all of them together. Here is my HTML code snippet: <form (ngSubmi ...

angularforms

Customizing the Material UI v5 theme with Typescript is impossible

I'm attempting to customize the color scheme of my theme, but I am encountering issues with accessing the colors from the palette using theme.palette. Here is a snippet of my theme section: import { createTheme } from "@mui/material/styles&qu ...

reactjstypescriptmaterial-ui

Facing difficulty in accessing mongoose schema static method in TypeScript

I am currently facing an issue where I have a method called "findByToken()" defined in the model and implemented as a static method in the userSchema. However, in another part of my application, I am unable to access the method using: User.findByToken(tok ...

node.jsmongodbtypescriptexpressmongoose

Mocking multiple services and their constructors in an Angular 2 TypeScript Jasmine test component

I've got this login component code snippet that I need help testing in Angular. import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { FormBuilder, FormGroup, Validators } from '@ ...

angulartypescriptunit-testingkarma-jasmine

Is there a way to merge TypeScript code with C++ during compilation?

Currently, I have a project written entirely in C++. However, there is an additional file written in typescript because I couldn't find equivalent libraries in C++. This typescript file performs the following actions: It contains a typescript CLI cod ...

c++typescriptgcclinkerts-morph

Types of Axios responses vary depending on their status codes

I am looking to create a specific type for axios responses based on the status code: types: type SuccessfulResponseData = { users: .... }; interface SuccessfulResponse extends AxiosResponse<SuccessfulResponseData, any> { status: 200; } ty ...

node.jstypescriptaxios

How to iterate through the elements of an object within an array using Vue.js and TypeScript

There was an issue with rendering the form due to a TypeError: Cannot read properties of undefined (reading '0'). This error occurred at line 190 in the code for form1.vue. The error is also caught as a promise rejection. Error Occurred <inpu ...

javascripttypescriptvue.js