The values of reusable components persist across page2 and all other subsequent pages

Question

The values of reusable components persist across page2 and all other subsequent pages

In my component labeled as search-component, the HTML snippet is displayed below:


        <form class="form-horizontal form-material" (ngSubmit)="Search()" id="carsearch" [formGroup]="bookCarForm"
            novalidate>
            <div class="row">
                <div class="col-sm search-input-align">
                    <input [owlDateTime]="dt1" [min]="min" [owlDateTimeTrigger]="dt1" class="form-control"
                        formControlName="start_datetime" placeholder="Start Date & Time">
                    <owl-date-time #dt1></owl-date-time>
                    <span class="input-group-addon"><i class="fa fa-calendar fa-search-align"></i></span>
                </div>

                <div class="col-sm search-input-align">
                    <input [owlDateTime]="dt2" [min]="min" [owlDateTimeTrigger]="dt2" class="form-control"
                        formControlName="end_datetime" placeholder="End Date & Time">
                    <owl-date-time #dt2></owl-date-time>
                    <span class="input-group-addon "><i class="fa fa-calendar "></i></span>
                </div>
                <div class="col-sm search-input-align">
                    <div class="toggle" (click)=toggleTextBox()>
                        <input type="checkbox" class="check" >
                        <b class="b switch"></b>
                        <b class="b track"></b>
                    </div>
                    <h4 id="door-delivery">Door Delivery</h4>
                </div>
                <div class="col-sm search-input-align address">
                    <div *ngIf="!visability">
                        <input class="form-control " formControlName="Enter_address" type="text" placeholder="Enter Address"
                            >
                    </div>
                    <div *ngIf="visability">
                        <select formControlName="p_location" class="form-control selectpicker" id="select-city" >
                            <option data-tokens="" disabled>
                                <h2>select any one </h2>
                            </option>
                            <option data-tokens="Delhi">
                                <h2>Hebbal</h2>
                            </option>
                            <option data-tokens="Mumbai">
                                <h2>Yelahanka</h2>
                            </option>
                            <option data-tokens="hyderabad">
                                <h2>BTM</h2>
                            </option>
                        </select>
                    </div>
                </div>
                <div class="col-sm search-input-align btn-book-now">
                    <button type="submit" [disabled]="bookCarForm.invalid" class="btn btn-primary align-items-center btn-align">Book
                        Now</button>
                </div>
            </div>
        </form>

In the file search-component.ts, the code snippet looks like this:

@Output() searchValues = new EventEmitter(); 
this.storage.set("values", this.Search.value);//storing values in local storage
this.searchValues.emit("values");

This particular search-component can be used multiple times. Currently, I am using this form on Page1 to select values and redirecting to page2. On page2, I am also utilizing the same form. However, the challenge I'm facing is that the values selected on page1 are not carried over to page2 despite attempting to use Event Emitter. I referred to a resource here, but it did not resolve my issue. Could someone suggest the most effective approach to achieve this outcome? Your assistance would be greatly appreciated.

angular typescript

Answer 1

Answer №1

To implement a service called stored-data-service.ts, follow these steps:

import {Component, Injectable} from 'angular2/core'
import {BehaviorSubject, Observable} from 'rxjs';

@Injectable()
export class StoredDataService {
  values:any;
  values$:BehaviorSubject<any> = new BehaviorSubject('');
  constructor(){}

  setValues(values){
   this.values = values;
   this.values$.next(values);
  }
}

Next, include it in your app.modules.ts file by importing it:

import { StoredDataService } from "./stored-data-service.ts";

Then add it to the providers array within the NgModule like so:

@NgModule({
  declarations: [
  ...],
  imports: [
  ...],
  providers: [
  StoredDataService],
  bootstrap: [AppComponent]
})

Now, inject it into your component search-component.ts by including it in the constructor:

constructor (public storedDataService: StoredDataService){}

Use the service to store data using the following method:

this.storedDataService.setValues(this.Search.value);//storing values in local storage

To retrieve the stored data anywhere in your code, you need to subscribe to values$:

 const subscription = this.storedDataService.values$.subscribe( (values) => {
 //set a local variable here storing values in you component
 //...
 this.values = values
 console.log (values);
})

If you plan to use the StoredDataService in another component, remember to inject it in the constructor and subscribe to values$. This way, whenever there is a change in the stored data, all subscribed components will get the updated value.

EDIT

Be sure to use BehaviorSubject and subscriptions as shown in the code for proper functionality

Answer 2

To implement a service called stored-data-service.ts, follow these steps:

import {Component, Injectable} from 'angular2/core'
import {BehaviorSubject, Observable} from 'rxjs';

@Injectable()
export class StoredDataService {
  values:any;
  values$:BehaviorSubject<any> = new BehaviorSubject('');
  constructor(){}

  setValues(values){
   this.values = values;
   this.values$.next(values);
  }
}

Next, include it in your app.modules.ts file by importing it:

import { StoredDataService } from "./stored-data-service.ts";

Then add it to the providers array within the NgModule like so:

@NgModule({
  declarations: [
  ...],
  imports: [
  ...],
  providers: [
  StoredDataService],
  bootstrap: [AppComponent]
})

Now, inject it into your component search-component.ts by including it in the constructor:

constructor (public storedDataService: StoredDataService){}

Use the service to store data using the following method:

this.storedDataService.setValues(this.Search.value);//storing values in local storage

To retrieve the stored data anywhere in your code, you need to subscribe to values$:

 const subscription = this.storedDataService.values$.subscribe( (values) => {
 //set a local variable here storing values in you component
 //...
 this.values = values
 console.log (values);
})

If you plan to use the StoredDataService in another component, remember to inject it in the constructor and subscribe to values$. This way, whenever there is a change in the stored data, all subscribed components will get the updated value.

EDIT

Be sure to use BehaviorSubject and subscriptions as shown in the code for proper functionality

The values of reusable components persist across page2 and all other subsequent pages

Answer №1

Similar questions

Design your own Angular 2 Directive for effortless element dragging!

Accessing dynamic data beyond the subscribe method function

AngularJS: The 'myInputName' property is not defined and cannot be read

Add adhesive dashes to the text box

The 'innerText' property is not present in the 'Element' type. (2339)

Stop the instantiation of type alias

Having trouble with VS Code on my Linux system - npm error popping up?

Angular 9: Implementing a synchronous *ngFor loop within the HTML page

Utilize FieldPath.documentId() from Firestore to access a nested object

What is the correct way to write an asynchronous Express middleware function in Typescript?

TypeScript test framework for testing API calls in VS Code extensions

What is the proper way to implement the coalesce function in my code?

Tips for Simplifying Complex Switch Cases with Object Literals in TypeScript

Securely import TypeScript modules from file paths that are dynamically determined during execution

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

Strategies for resolving the TypeScript error code TS7009?

Looking for a way to convert 24-hour format to minutes in Angular? I'm in need of some TypeScript code to

Problem with Angular input field not updating after making an http request

What is the best way to merge three arrays of data into a single iterable array?

Using TypeScript's .map method to add a new property to an array of objects results in an error stating that the property does not