Endure the class attribute in Angular 5

Question

Endure the class attribute in Angular 5

My SearchComponent has a route (/search) and SearchDetailComponent has a route (/search-detail:id).

In the SearchComponent, there is a searchbox (input field) where I can type any text to start a search.

After loading the search results and navigating to the SearchDetail page, I want to store the search term I entered into the searchbox. However, this should only happen after returning from the Detail page. This means that when I navigate back from the detail page, the same text I searched for should be displayed in the searchbox.

The searchbox should remain empty while navigating to the search site from any other page.

Does anyone have an example or suggestion on how to implement this?

angular typescript angular5

Answer 1

Answer №1

One way to persist data is by utilizing a Service or localStorage/Session Storage.

localStorage and sessionStorage serve the same purpose and have similar APIs. However, with sessionStorage, the data is only stored until the window or tab is closed, whereas with localStorage, the data remains until cleared manually by the user or by the application.

I recommend using @ngx-pwa/local-storage Async local storage for Angular.

For Angular 5:

npm install @ngx-pwa/local-storage@5

Register it in your RootModule

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
  imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

Inject and utilize

import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

Usage

let user: User = { firstName: 'Henri', lastName: 'Bergson' };

this.localStorage.setItem('user', user).subscribe(() => {});

When navigating back and forth, adjust values using setValue() or patchValue(), both of which update the value in the form control of FormGroup.

Service
Develop a Service and add it to an Angular module instead of a component.

If you need a dependency instance shared globally to maintain state across the application, configure it within NgModule.

You can use either Subject or BehaviorSubject to achieve this.

Using Subject
Using BehaviorSubject

Answer 2

One way to persist data is by utilizing a Service or localStorage/Session Storage.

localStorage and sessionStorage serve the same purpose and have similar APIs. However, with sessionStorage, the data is only stored until the window or tab is closed, whereas with localStorage, the data remains until cleared manually by the user or by the application.

I recommend using @ngx-pwa/local-storage Async local storage for Angular.

For Angular 5:

npm install @ngx-pwa/local-storage@5

Register it in your RootModule

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
  imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

Inject and utilize

import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

Usage

let user: User = { firstName: 'Henri', lastName: 'Bergson' };

this.localStorage.setItem('user', user).subscribe(() => {});

When navigating back and forth, adjust values using setValue() or patchValue(), both of which update the value in the form control of FormGroup.

Service
Develop a Service and add it to an Angular module instead of a component.

If you need a dependency instance shared globally to maintain state across the application, configure it within NgModule.

You can use either Subject or BehaviorSubject to achieve this.

Using Subject
Using BehaviorSubject

Endure the class attribute in Angular 5

Answer №1

For Angular 5:

Similar questions

Getting the mssql output in Protractor using VSCode

Is there a way to dynamically exclude files from the TypeScript compiler?

Failing to retrieve the file instance upon completing the upload process to cloudinary using nestjs

The 'firestore' property is not found within the 'Firebase' type

Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

Checking radios or checkboxes will always result in a null value when retrieving their form values

Tips on providing validation for either " _ " or " . " (select one) in an Angular application

Issue with Next.js hook: Uncaught TypeError - Unable to define properties of undefined (setting 'type')

How to safely add multiple objects to an array in TypeScript & React without replacing existing objects - Creating a Favorites list

Error Encountered in Cypress: "Tried to wrap warn but it is already wrapped"

The NgbTooltip does not activate when hovering over a <td> cell

The Vercel public domain is not functioning as expected

What is the best way to configure Jenkins to exclude or include specific component.spec.ts files from being executed during the build

Add a new item to an array in Angular 2 when a click event occurs

Best practices for incorporating CSS and JS files into an Angular deployment

Combining normal imports with top-level await: A guide

Creating a test scenario for a combineLatest Observable using marbles

The data type 'T' cannot be assigned to type 'T'

The parameter type '(req: Request, res: Response, next: NextFunction) => void' does not match the type of 'Application<Record<string, any>>'