I currently store a session variable as a JSON value in my home.component.ts. This variable needs to be accessed in various locations within the application.
This is my code snippet:
.do(data => sessionStorage.setItem('homes', JSON.stringify(data)))
var session = sessionStorage.getItem('homes');
What is the best way to access the session variable across the entire application?
Create a service and utilize it within your components. Include methods to set and get sessionStorage data in this service.
For instance:
import { Injectable } from '@angular/core';
@Injectable()
export class HomeService {
constructor() { }
public setData(data: any){
sessionStorage.setItem('homes', JSON.stringify(data));
}
public getData(){
return JSON.parse(sessionStorage.getItem('homes'));
}
}
Next, in your home.component.ts file
constructor(private homeService: HomeService){}
ngOnInit(){
this.homeService.setData(data...); //pseudocode
}
To retrieve the data, simply call homeService.getData().
Trying to enhance the Material-UI theme with the Typescript typings of Material-UI-Pickers for the latest versions listed here: "@material-ui/core": "^3.9.2", "material-ui-pickers": "^2.2.1", A note on the bottom of the Material UI picker page mentions t ...
I have a problem with my app's delete feature. It successfully deletes items from the database, but there seems to be an issue in the front-end where I can't remove the correct items from the list. Check out this demo: You'll notice that al ...
Given the example below, the second parameter of the fn function requires a class with a static attribute controle and an instance attribute controle, both of type number. interface Base { controle: number new(...args: any[]): { controle: n ...
After declaring an interface as shown below interface Base { required: string; } I proceeded to implement the interface in a class like this class MyClass implements Base{ method(): void { console.log(this.required); } } However, I ...
Imagine having a growing Angular2 typescript solution with numerous small classes and objects. Following the best practice, each class is placed in its own file. However, manipulating these objects leads to long lists of imports like: import {Object1} f ...
I'm currently working on a template-driven form that includes a group of inputs generated through an ngFor. My goal is to separate this repeating 'sub-group' into its own child component. However, I'm encountering difficulties in ensur ...
I created an Angular 2 application and now I am looking to deploy it. Currently, my root folder contains: HTML files JS files (compiled from TypeScript) CSS files (compiled from SCSS) /node_modules/ directory /bower_components/ directory The last two d ...
I'm currently working on a laravel-angular application that requires a password reset feature. However, the default password-reset in Laravel relies on email verification, which is not necessary for this particular application. I tried setting $confir ...
When I receive a sorting object with a columnName and direction, I want to convert it into a key-value object for mongoose sorting. The return values are not matching up and I can't seem to figure out what I'm missing. These are the interfaces ...
Within my enum, I have defined multiple keys: export enum MyTypeEnum { one = 'one', two = 'two', three = 'three', four = 'four' } To ensure certain types must contain these keys, I use the following ...
I am struggling to display a div based on the selection I make. Unfortunately, it's not working as expected. Can anyone offer guidance on how to tackle this issue? <div class ="row"> <div class="form-group col-md-6"> <label for= ...
I need help with setting form data in local storage upon form submission and displaying a message in the console if the form has already been submitted when the page is refreshed. I am struggling to write the reload condition for this functionality. Here ...
I'm having trouble assigning types to the Item object that is being returned from unitedStates.map((item: Item) => {}. Despite my efforts, I am unable to correctly define the types. Although I have specified the unitedStates array of objects as un ...
Recently, I incorporated Material-UI Slide into my project and I'm curious about why the code functions correctly when written in this manner: {selectedItem && selectedItem.modal && selectedItem.modal.body ? ( selectedItem.modal.body.map((section ...
I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...
Below is the content of my app.component.html: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class='container'> <ul class="nav navbar-nav"> <li class='nav-item'> <a clas ...
My project is being built using angular-cli (ng build --prod), but I am encountering three issues in my production build: The rendering blocking style-sheet is 74 kb The vendor.bundle.js is extremely large at 1.1 MB The main.bundle.js is also quite large ...
Whenever a qlist item is clicked by the user, it redirects to another page. However, the scrolled position from the previous page is retained and not set to the top. This means that the user has to manually scroll back to the top to view the contents of th ...
Trying to implement this: let selections = list.filter(obj => obj.type === "myType"); An issue arises with the filter function displaying an error message which states 'filter' does not exist on type 'NodeType' I attempted to ...
Having two arrays of objects, I attempted to compare them and display the matching values in a table. While looping through both arrays and comparing them by Id, I was able to find three matches. However, when trying to display these values in a table, onl ...