After successfully incorporating lazy loading into my Angular application, I noticed that when I switch pages, the previously loaded page reverts back to its initial state (ngOnInit being triggered again).
{ path: '/posts', loadChildren: () => import('./posts/main.module').then(m => m.MainModule) }
The behavior you are observing is not related to lazy loading at all.
When a component is no longer being used in the DOM, Angular initiates the cleanup process by executing the "ngOnDestroy" method of the component (if it exists). This allows the component to perform any necessary cleanups or data saving before it is destroyed.
Therefore, when the same component is added back to the DOM, it is treated as a new instance and the "ngOnInit" method is executed again.
You can test this yourself using a simple "*ngIf". The ngIf directive will add or remove a component from the DOM based on the if-statement. However, if you use "hide", the component will remain in the DOM but simply be hidden, keeping the instance intact.
In your specific scenario, it seems that the router is responsible for adding and removing the component...
OIDC offers multiple authentication flows, with Implicit and Auth Code flow being the two primary options available for SPAs. Recent discussions in the ietf mailing list suggest that Auth code flow is preferable to implicit flow due to security concerns su ...
I am currently working on a dashboard application that includes a treeview component listing various content nodes, along with a dashboard-edit component that displays editable content based on the selected branch of the tree. For example, the tree struct ...
After hardcoding the value in component.ts, I am able to see the pre-selected radio button. However, when attempting to retrieve the value from sessionStorage, it does not work as expected. The value is visible in the console though. Could someone please ...
I've been hearing a lot about reusable components. What does this actually mean? For instance, if I want to showcase basic user information like ID, name, age, etc. Does it imply that the component is "plug and play," where you simply write the sele ...
When attempting to use the storage get method to fill the array storedArr = [], I encounter the error message .push is not a function: storedArr = this.storage.get('stored') ? this.storage.get('stored').then((e) => {e}) : []; The c ...
Imagine having a list like the one shown below: <ion-list radio-group [(ngModel)]="autoManufacturers"> <ion-list-header> Auto Manufacturers </ion-list-header> <ion-item> <ion-label>Cord</ion-label> &l ...
My backend server is sending back data in this format: { firstName: "Joe", lastName: "Smith", phoneNum: "212-222-2222" } I'm looking to display this information in the frontend (using Angular 2+) with *ngFor, but I want to customize the key ...
I attempted the code below, but it only works for angular material 11. My requirement is to use only angular material 10. providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ] There a ...
Currently, I am utilizing Angular 7 in combination with SignalR on the backend for push notifications. At certain times, an overwhelming amount of notifications flood in, causing my application to become completely unresponsive. The SignalR service compon ...
After implementing angular universal, I was able to render the static part of HTML via server-side rendering. However, I encountered an issue where API calls were being made and the server rendered the HTML without waiting for the HTTP call to complete. As ...
I have a file uploader component that requires a dimensions validator to be added. Below is the code for the validator: export const filesDimensionValidator = (maxWidth: number, maxHeight: number): ValidatorFn => (control: AbstractControl): Vali ...
I am attempting to retrieve information from this specific URL. The data obtained from this URL is in JSON format. This particular file is named data.services.ts: import { Injectable } from '@angular/core'; import { HttpClient } from '@an ...
I need to create a form where users can select their branch of study. Here is the form I have designed- <form method="post" [formGroup]="formData" (click)="dataSubmit()" > <div class="form-group"> <label for="branch">Selec ...
When I first encountered Angular2, I was introduced to TypeScript, npm, and more for the very first time. I was amazed by their power, but I know I've only scratched the surface. While I can navigate through the "development mode," my ultimate goal i ...
I've been considering implementing a data provider that could store a duplicate of the backend data locally for quick access. I believe this concept is referred to as mirroring or something similar. Nevertheless, it must be synchronized and updated r ...
I'm currently facing an issue with setting up a search functionality for the data obtained from an API. The data is being displayed in an Angular Material table, and I have 8 different inputs that serve as filters. Is there a way to add one or more s ...
With the abundance of CORS posts already out there, I find myself adding to them in search of a solution. My dilemma involves building an angular 4 application that interacts with my php api. Locally, everything works seamlessly. However, once I upload the ...
I am looking to loop through several input fields that are defined in two different ways: <input placeholder="Name" name="name" value="x.y"> <input placeholder="Description" name="description" value"x.z"> <!-- And more fields --> or lik ...
Currently, I am facing an issue while attempting to utilize the image-to-image API provided by stabilityAI. The task at hand involves sending an image as a binary string through my express server to the stability AI API. However, when I make the POST reque ...
Looking to add some metadata annotations to a simple data model export class Certification { title: string; certificationType?: CertificationType; validTo?: number; description?: string; externalIdentifier: Guid; constructor() { ...