Re-usable component values carry forward to page2/ any other page

user_10187097 0
Viewed 79

I have component search-component like below html snippet

 <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>

and in search-component.ts like below

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

this search-component is reusable. Currently I'm this form in Page1 selecting values in page1 and redirecting to page2. In the page2 also I'm using this form. What are all the values given in page1 this is should be carry forward to page2. So that I tried Event Emitter but it is not carry forward values. I tried this link, but it is not help me out. What is the best way to achieve this output. Could any one help me out.

angular typescript
1 Answers

Create the following service stored-data-service.ts:

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);
  }
}

Then add it to your app.modules.ts by importing it

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

and then adding it to the providers array in the NgModule

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

Now inject it in your component search-component.ts by adding it to the constructor like this:

constructor (public storedDataService: StoredDataService){}

and finally use it to add data by doing

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

and to retrieve the data anywhere in your code (even in other components or services, thats the trick) you will 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 are going to use service StoredDataService again in another component remember to inject it in the constructor as before and to subscribe to the values$. Every time any part of your code invokes storedDataService.changeValues(...), anywere where you subscribed the callback of your subscriptor will be executed giving you the new value.

EDIT

I changed the code to add BehaviorSubject and subscriptions, otherwise it will not work

user_70413930
Related