Tips for accessing and modifying local files in Angular 2

Is there a method in Angular 2 to access files from an absolute path?
I have utilized the 'filesaver' library for file saving, storing the files
locally in txt/json formats.
For instance: 

let blob = new Blob([document.getElementById('exportFile').innerHTML],{ 
    type: "text/plain;charset=utf-8"
});
saveAs(blob, "export.json");

Now I am interested in reading and editing the export.json file. How can I reference it for future use?
Are there alternative methods or reputable libraries available for these
tasks?

angulartypescriptfilesystemsangular2-routingangular5

Answer №1

If you want to access the content of your file, you can achieve this by using HttpClient in Angular.

public getFileContent(): Observable<any> {
         return this.http.get("./data.json")
                         .map(response => {var content = response.json(); return content});
}

Unfortunately, performing write operations like put or post directly to the file is not supported. However, I suggest using the 'jsonfile' library for this purpose: https://www.npmjs.com/package/jsonfile

I hope this information proves to be useful to you!

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

In TypeScript, values other than numbers or strings can be accepted as parameters, even when the expected type is a

The issue I am encountering with TypeScript is quite perplexing, especially since I am new to this language and framework. Coming from a Java background, I have never faced such a problem before and it's presenting challenges in my bug-fixing efforts ...

typescriptnestjstype-safety

Interactive feature on Google Maps information window allowing navigation to page's functions

Working on an Angular2 / Ionic 2 mobile App, I am utilizing the google maps JS API to display markers on a map. Upon clicking a marker, an information window pops up containing text and a button that triggers a function when clicked. If this function simpl ...

javascriptangulartypescriptgoogle-maps-api-3

Encountering issues with MatTable functionality in Angular version 10

Could it be that I’m starting this project from scratch using Angular Material 10, a framework I’m not familiar with yet, or am I simply missing something? My mat-table isn’t showing up on the page at all, which is completely new to me. Here’s the ...

angularangular-materialangular-material-table

Encountering difficulty when determining the total cost in the shopping cart

I am currently working on a basic shopping cart application and I am facing an issue when users add multiple quantities of the same product. The total is not being calculated correctly. Here is my current logic: Data structure for Products, product = { ...

javascriptarraysangulartypescript

Loading dynamic components asynchronously in Vue 3 allows for improved performance and enhanced user experience

My goal is to dynamically display components based on their type. Here's how I'm approaching it: I have several similar components that should show different content depending on their type. Using the defineAsyncComponent method, I can easily im ...

typescriptvue.js

Implement static backgrounds on images within an Angular application

I am new to using Angular 7 and I have hit a roadblock. I need help understanding how to resize images so that either the height is 270 and the width is less than 470, or the width is 470 and the height is less than 270. Once resized, I want to place these ...

angularimage

The React component was not able to receive any children as input

My Typescript-written React component is called GradientText.tsx: import React, { ReactNode } from "react" import { cn } from "@/lib/utils" const typeMap = { h1: "h1", h2: "h2", p: "p", } inte ...

reactjstypescript

The Async Validator is currently trapped in a pending state

I've been working on implementing an async validator in my Angular application to validate email input. Everything functions correctly when I create a new form, but I encounter an issue when editing the form with pre-filled values. The problem arises ...

angular

REDUX: The dispatch function is failing to update the store

Working on a project developing a chrome extension that involves dispatching functions in popup.tsx. However, the store does not update when I try to dispatch. Interestingly, the same code works perfectly fine in the background page. Any suggestions on wha ...

typescriptgoogle-chrome-extensionreact-reduxredux-toolkitweb-ext

The data type 'string[]' cannot be assigned to the data type '[{ original: string; }]'

I have encountered an issue while working on the extendedIngredients in my Recipe Interface. Initially, I tried changing it to string[] to align with the API call data structure and resolve the error. However, upon making this change: extendedIngredients: ...

javascriptreactjstypescriptinterface

Tips for integrating Tesseract with Angular 2 and above

I'm currently exploring the use of Tesseract within one of my components for OCR processing on a file. .ts: import * as Tesseract from 'tesseract.js'; fileToUpload: File = null; handleFileInput(files: FileList) { this.fileToUpload = f ...

angulartypescriptimportocrtesseract

Is there a way for me to properly type the OAuthClient coming from googleapis?

Currently, I am developing a nodemailer app using Gmail OAuth2 in TypeScript. With the configuration options set to "noImplicitAny": true and "noImplicitReturns": true, I have to explicitly define return types. Here is a snippet of my code: import { goog ...

typescriptgoogle-api

Encountering Error ENOENT while running Gulp Build Task with SystemJS in Angular 4

UPDATE: 2020.02.13 - It seems like another individual encountered the same issue, but no solution was found. Check out Github for more details. An array of GulpJS errors is emerging when attempting to construct an Angular 4 Web App with SystemJS. The str ...

javascriptangularnpmgulpsystemjs

Can you explain the distinction between employing 'from' and 'of' in switchMap?

Here is my TypeScript code utilizing RxJS: function getParam(val:any):Observable<any> { return from(val).pipe(delay(1000)) } of(1,2,3,4).pipe( switchMap(val => getParam(val)) ).subscribe(val => console.log(val)); ...

typescriptrxjs

When iterating through a list of strings using ngFor, I am unable to directly access or manipulate the individual items

Within my model, I have a list of strings. <span *ngFor="let item of model; let i = index"> <input #inputField type="text" [name]="name + '_' + i" [(ngModel)]="item" /> </span> The code snippet ab ...

angular

Step-by-step guide on importing CSS into TypeScript

I have a global CSS file where I've defined all the colors. I attempted to import that value into TypeScript but it didn't work. This is my latest attempt: get sideWindowStyle(): any { switch (this.windowStyle) { case 'classicStyl ...

angulartypescriptsass

Obtain the ViewContainerRef object from the Component

Looking to create nested components in Angular 4? This is the Chooser Component import {InputComponent} from './input/input.component' import {BlockComponent} from './block/block.component' export const FormChooser = { Block: Block ...

angulartypescript

Sample Angular component showcasing arguments and content within a storybook MDX preview

We showcase our angular components using Storybook and typically utilize the MDX format for this purpose When dealing with an angular component that needs content and accepts properties (via the "Controls" Plugin), I am facing difficulties in implementing ...

angularstorybookmdxjsangular-storybook

What is the best way to integrate JSON:API with Angular and RxJs?

Currently, I have a Laravel API that adheres to the json:api spec and functions smoothly with Postman for making requests on related resources. However, I am facing challenges in understanding how to utilize this API with my Angular front-end. To kickstar ...

jsonangularjson-api

Derive data type details from a string using template literals

Can a specific type be constructed directly from the provided string? I am interested in creating a type similar to the example below: type MyConfig<T> = { elements: T[]; onUpdate: (modified: GeneratedType<T>) => void; } const configur ...

typescripttypescript-typingstypescript-generics