In the process of developing my Angular Application, I have successfully implemented Login and Logout functionalities. Upon clicking logout, the user's status in the Database is updated using Laravel API. However, I am facing the challenge of handling the browser close event. In case the user closes the browser, I still need to update their status in the Database. I am unsure how to trigger the Laravel API call on browser close. Any assistance would be highly valued.
Give this solution a shot:
Include the window:beforeunload event listener in your code:
import { Component , HostListener } from '@angular/core';
export class AppComponent {
@HostListener('window:beforeunload', ['$event'])
handleBeforeUnload($event) {
// Add your code here
}
constructor() {}
}
Make sure to include the ngOnDestory life cycle hook in your AppComponent (the main component of your application).
export class AppComponent implements OnInit, OnDestory {
...
ngOnDestory() {
// Perform necessary clean up tasks here
}
...
}
As per Angular.io documentation, the ngOnDestory method is a lifecycle hook that gets called when a directive, pipe or service is being destroyed.
For my rxJS practice in Typescript, I wrote the following simple code. import fetch from 'node-fetch'; import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from &apo ...
I've been working on accessing data from my custom REST API, but I'm encountering an issue where the JSON data is not being displayed when I navigate to the endpoints. I have set up server, controller, and data controller classes in order to crea ...
class TemplateController { public function fetchTemplate(string $template): string { return file_get_contents(_DIST . '/resources/templates/' . $template . '.html'); } } Is it safe to use $_GET or a direct argument ...
How can I retrieve images from an API and properly access the specific object within the object? Any tips would be greatly appreciated! API Endpoint: This is how my interface is structured: export interface MovieModel { id: number; name: string; ...
Exploring PouchDB within an Angular5 project is my current focus. The pouchdb plugins I aim to incorporate are: pouchdb-find relational-pouch To begin, importing PouchDB looks like this: import PouchDB from 'pouchdb'; I understand how to impo ...
I am facing an issue with data delivery in a child component through @Input. The data is successfully console.logged, but when I try to work with it, I encounter an error stating that the objects I am trying to access do not exist on type FirebaseObjectObs ...
Currently, I am working with Angular 9 and angular Material Reactive Forms. My goal is to disable certain fields without relying on the disabled status within formControl in the TypeScript file. Instead, I want to achieve this solely through HTML. Here is ...
This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...
Working with IONIC 5 service: import { HttpClient } from '@angular/common/http'; . . . getPlaces(placeId: string) { return this.httpClient.get( `https://test.com/offered-place/${placeId}.json`) } . . . Encountering an issue when tryin ...
Is there a way to import content from a file located in another directory at the same level? For instance, if I am working with file 1 in folder 1 and need to import information from file 2 in folder 2, how can this be achieved? I am encountering an error ...
Utilizing the power of useEffect, I am fetching data from two different APIs to build an array. My goal is to access this array outside of useEffect and utilize it in the return statement below to render points on a map. However, when trying to access it ...
I am facing an issue while trying to dynamically change the type of an icon using state update. The error message I received is: Type 'string' is not assignable to type 'IconPrefix'. Below is a snippet of my code: import { useState } ...
Consider the structure of an array : [ branch_a: { holidays: [] }, branch_b: { holidays: [] }, ] In this structure, branch_a, branch_b, and ... represent dynamic keys. How can this be properly declared in typescript? Here is an attempt: ty ...
I am currently working on developing a straightforward router-based application in Angular2 using typescript. The version of Angular2 I am using is 2.0.0-rc.4, and the router version is 3.0.0-beta.1 Here is my Routes configuration- App.routes.ts import ...
Imagine you have the following data: const dataA = { name: "John", age: 25, attributes: {specificA: "hello", specificA2: 14, nonspecific:"Well"}, } const dataB = { name: "Lisa", age: 38, attributes: {spe ...
My PDF generated using Jspdf is being forced to fit in one page, making it difficult to see all the data because there is a huge amount of information present. To view the issue, please visit this link: https://jsfiddle.net/frost000/04qt7gsm/21/ var pdf ...
We previously utilized the p-table from primeng in our project. Now, our goal is to create a custom table component. I am looking to develop a custom table that resembles the one found at https://www.primefaces.org/primeng/#/table The table needs to incl ...
Having an issue with my angular app. The main page has a background element with a navbar that overlays it. The navbar takes up 100vh of the screen, which usually works fine. However, when I view the page on my iPad or iPhone, I can scroll the page and I d ...
Q) What could be causing the error in my code's syntax? I am attempting to filter a list of items by their name property. However, the following code is resulting in the error: Cannot read property 'toLowerCase' of undefined Please note: ...
Consider the following situation (Angular v7): Retrieve configuration settings (API server URL and Auth server URL) from an external source (JSON), prior to loading the AppModule Provide configuration to the AppModule (OAuth2 module) Compile the applicat ...