Having an issue with calling a function that listens to the event onBeforeUnload() and trying to post data using an httpClient request. However, the request is not being sent correctly. Here's the code snippet:
@HostListener('window:beforeunload', ['$event'])
onBeforeUnload(): void {
this._httpClient.post(`${localhost:8080/apiRest}`, infoIWantToSent).subscribe();
}
Seeking guidance on whether this approach is correct. Any help would be appreciated. Thank you.
What is the purpose of not utilizing ngOnDestroy?
export class UpdatedComponent implements OnDestroy{
ngOnDestroy() {
this._httpClient.post(${localhost:8080/apiRest}, dataToSend).subscribe();
}
}
Appreciate your response. I encountered an issue where the OnDestroy method wasn't being called in my scenario. However, I managed to find a solution by implementing the following:
@HostListener('window:beforeunload', ['$event'])
onBeforeUnload(): void {
const xhr = new XMLHttpRequest();
xhr.open('POST',, false);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
return xhr.send(JSON.stringify(infoIWantToSent));
}Currently utilizing the nebular ngx-admin template, I have encountered some challenges with the nebular stepper. Within one component, I have implemented four steps. In the component file, I have utilized Nebular API's methods: @ViewChild("stepp ...
Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...
Currently grappling with creating a TypeScript declaration file for HtmlWebpackPlugin, but struggling to make it functional. The default export of HtmlWebpackPlugin is the constructor for the class HtmlWebpackPlugin, which I aim to use as shown below: so ...
Having trouble with the type of Object properties in Vue Single File Components using TypeScript (created with Vue CLI 3)? Check out the example below to see the issue. The type of this.product is currently showing as (() => any) | ComputedOptions<a ...
I'm encountering a strange error that I can't seem to figure out. I've selected PUT on my postman and using route.put. Here's the error message I'm getting in Postman: Image link -> https://ibb.co/dzvAKc Looking at all the mus ...
Imagine I have an array of objects structured like this: myArr = [ { "id": "aaa.bbb" }, { "id": "aaa.ccc" }, { "id": "111.222" }, { "id": "111.333" }, ] I aim t ...
I'm attempting to send data to an Items API, like this: "data": { "title": "stack", "notes": "asdsad", "time": "19:02", "meridian": "PM", "type": "Education", "_id": "5a2f02d3bba3640337bc92c9", ...
I'm encountering an issue where the image previews are overlapping with the text in another div. Here are the screenshots: the first one shows how it looks before the preview, and the second one shows what happens when images are added: https://i.sst ...
Currently, I am in the process of structuring an AngularJS (Angular 1) project using TypeScript. To compile TypeScript & ES6 to JavaScript, I have set up webpack. In my webpack configuration, I only compile the "app.ts" file and any other files it imports ...
When using angular primeng multiselect, it sometimes displays [object][object] in the header instead of the optional label when in edit/on focus state. Here is my code snippet <p-multiSelect(onFocus)="insertOptions(row,itemProperty.options,itemPropert ...
I have embarked on creating a recipe application where users can search for recipes by ingredients. I want to enhance the functionality of the search feature so that when users press the spacebar to enter the next input, it appears as a label below with an ...
In my current project setup, the configuration in my .angular-cli.json file is structured as follows: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "suman-chrome-extension" }, "apps": [ { "r ...
Currently in the process of developing a custom Angular library using Angular v 8.1.0, I am interested in figuring out how to organize it into different sub-libraries. For instance, the Angular core is divided into separate parts like: @angular/common @ ...
Task: My goal is to take an HTML string, make changes to certain attributes of image tags within it, and then return the modified HTML string. The function I have developed follows these steps: private resolveImagesInHTML (body: string): string { le ...
After spending some time learning React with TypeScript, I encountered a problem. The prop onChangeHandler in my code takes a function to modify properties in formik values. <Formik<FormModel> initialValues={{ favorite: ...
Here is the code snippet I have in my index.tsx file. import Clock from "./utility/clock"; And this is my tsconfig setup. { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "es6", "target": "es5", ...
Upon building my Angular app with a Node.js API and deploying it on Heroku, I encountered an error. Despite this, the app runs smoothly with no errors when tested on my local server. Below are the logs from Heroku: C:\Users\PC>heroku logs -a= ...
This JSON file contains information about various moods and music playlists. {mood: [ { "id":"1", "text": "Annoyed", "cols": 1, "rows": 2, "color": "lightgree ...
Encountering issues displaying data from my local express.js REST API, organized as follows: people: [{ surname: 'testsurname', name: 'testname', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...
export class VendorHttpService { result = '0'; constructor(private http: HttpClient, private global: GlobalService) { } getProfileStatus(uid: String): string { this.http.get(this.global.getUrl()+"/vendor/profile-status/"+uid) ...