CODEWITHSUNDEEP
angular
Moshe M
Moshe M

Reputation: 91

Binding Variable To a Variable In a Service

I got a shopping list service, once user clicks 'submit' all the items chosen are stored in an array in a variable called 'orderReceived'. There is a component called 'order-review' and its purpose is to show the data once 'submit' was clicked, using *ngFor. Problem is I set the array variable in the component to be equal to the service variable on every change (ngDoCheck). It seems kind of unefficient and I'm sure that there is a better way to achieve that. Moreover, I want the component variable to be set only when user clicks 'submit'. Hope I was clear, any suggestions...?

Upvotes: 0

Views: 51

Answers (1)

Hector Mosquera
Hector Mosquera

Reputation: 38

You can use observables for the orders received, so you can add orders to your observable and be suscribed on whatever component you want to wait for a new element, this subscription will react on the observable changes giving you the latest element, which you can assign to your local variable to render it.

You have an example here =)

orders as an observable example

And relevant code here:

service.ts

import {Injectable} from "@angular/core";
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ShoppingListService {
  // Declaring your observable
  orderReceived = new BehaviorSubject([]);

  submitOrder(order) {
    // filling your observable
    this.orderReceived.next(order);
  }
}

submit-component

import { Component } from '@angular/core';
import { ShoppingListService } from '../service/shopping-list.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  orders = ['item1', 'item2', 'item3'];
  constructor(private shoppingList: ShoppingListService) { }

  submit() {
    this.shoppingList.submitOrder(this.orders);
  }
}

orders-review.component

import { Component, OnInit } from '@angular/core';
import { ShoppingListService } from '../service/shopping-list.service';

@Component({
  selector: 'order-review',
  template: `
  <h1>Review you order</h1>
  <ul>
    <li *ngFor="let order of orderReceived">
      {{order}}
    </li>
  </ul>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class OrderReviewComponent implements OnInit  {
  orderReceived = [];

  constructor(private shoppingList: ShoppingListService) { }

  ngOnInit() {
    // Subscribing to your observable to wait for a new value
    this.shoppingList.orderReceived.subscribe(orders => {
      // keep every new value in to a local variable to render your data
      this.orderReceived = orders;
    })
  }
}

Of course you should tie up everything on your module

module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { OrderReviewComponent } from './order-review.component';
import { ShoppingListService } from '../service/shopping-list.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule, CommonModule ],
  declarations: [ AppComponent, OrderReviewComponent ],
  providers:    [ ShoppingListService ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Upvotes: 1

Related Questions