CODEWITHSUNDEEP
angular
Rebeka Süveges
Rebeka Süveges

Reputation: 47

Can't pass data between sibling componentts

I would like to passing all the receipt data from create component to check component. The service gets all the information from 'create component' ,but I can't subscribe and show it on the 'check component'. This data is the input value from a form in 'create component' and I want to send the values to the table in the 'check component's html'. I know maybe I have to use Observable, Subject, subscribes etc., but I can't do it right.

The check component:

export class CheckComponent implements OnInit {

  subscription: Subscription;
  receipt:any[]=[]
  constructor(private router: Router,private receiptdataService: ReceiptdataService) { 

  // subscribe to home component data
  this.subscription = this.receiptdataService.getData().subscribe(res => {
    if (res) {
      console.log(res)
        this.receipt.push(res);
    }
});
  }

the create component:

import { ReceiptdataService } from 'src/app/receiptdata.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css'],
  providers: [ReceiptdataService]
})
export class CreateComponent implements OnInit {

  cusName:string="";
  buyDate:string="";
  realDate:string="";
  product:string="";
  cusComment:string="";
  prodPrice:number=0;

  inputData(){
    this.receiptdataService.AddNewReceipt(this.cusName, this.buyDate, this.realDate, this.product, this.cusComment, this.prodPrice)
    console.log(this.receiptdataService.receipts)
  }
  constructor(private router: Router,private receiptdataService: ReceiptdataService) { }

the service:

receipts =[
  {cusName:"Barka",buyDate:"2019-01-23",realDate:"2020-12-21",product:"macska",cusComment:"NEm tetszik",prodPrice:233423}
]
addNewReceipt(name:string, date:string,date2:string,item:string,comment:string,price:number){
  this.receipts.push({cusName:name ,buyDate:date,realDate:date2,product:item,cusComment:comment,prodPrice:price});
}

private subject = new Subject<any>();

sendData2(name:string, date:string,date2:string,item:string,comment:string,price:number) {
    this.subject.next({ cusName:name ,buyDate:date,realDate:date2,product:item,cusComment:comment,prodPrice:price});
}

getData(): Observable<any> {
    return this.subject.asObservable();
}
}

Upvotes: 2

Views: 85

Answers (3)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

You have two problems here at the same time:

At First please remove your providers: [ReceiptdataService] and keep your service as singleton(one instance across the project) @Injectable({ providedIn: 'root'}). Currently you have two different instances of ReceiptdataService in your components.

And Second, you don't need to store the initial value of receiptdataService.receipts in your CheckComponent component:

export class CheckComponent implements OnInit {
  // ........ 

  ngOnInit(): void {
    this.receipt = this.receiptdataService.receipts;
  }
}

you need to have a getter.

export class CheckComponent implements OnInit {

  constructor(private router: Router,private receiptdataService: ReceiptdataService) { }

  get receipt() {
     return this.receiptdataService.receipts;
  }
  // ^^^^^^^^^ change to this ^^^^^^^^^^^^^^^

  ngOnInit(): void {
    // remove this.receipt = this.receiptdataService.receipts; from here. 
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  }

Upvotes: 2

Naren Murali
Naren Murali

Reputation: 56054

It could be due to scope of the function AddNewReceipt Can you try with the below change?

I am using bind, to inform JS that the function should be executed on the scope of the service and not on the scope of the component!

Before:

 inputData(){
    this.receiptdataService.AddNewReceipt(this.cusName, this.buyDate, this.realDate, this.product, this.cusComment, this.prodPrice)
    console.log(this.receiptdataService.receipts)
  }

After:

 inputData(){
    this.receiptdataService.AddNewReceipt.bind(this.receiptdataService, this.cusName, this.buyDate, this.realDate, this.product, this.cusComment, this.prodPrice)(); //<- changed line
    console.log(this.receiptdataService.receipts)
  }

Upvotes: 1

Taras
Taras

Reputation: 1145

In check.component.ts you just get receipts once from receiptsdataService in OnInit and they will never be updated, it is not two-way-data binding between components. Instead you need o make an Observable from your receipts in receiptsdataService, so you can send receipts from one component and subscribe to that in another. Here are details in documentation - https://angular.io/guide/component-interaction#parent-and-children-communicate-using-a-service

Upvotes: 1

Related Questions