CODEWITHSUNDEEP
javascriptnode.jsangulartypescriptrxjs
Malik Rizwan
Malik Rizwan

Reputation: 123

How to pass data from One component to other

I am new in angular working on a project.My problem is that i want to transfer data from one component to other. Actually i want to show data in text field from database and then have to update it. I have one component name ricerca.component.ts in which data in table is showing. now when i click on specific line(row) then data for that specific record i have to show in my other component name as generatecontract.comonent.ts. I don't know how to perform this.

I made a model name ContractDblist assign all these value to that model but unfortunatelly not solved the problem in other component

this is my ricercacomponnet code

    if(tag === 'Item1'){      
 this.router.navigate(['/workflow/rigester' ]);
}
}
  public lstContractRecordDbValue :any[];
  getContractRecordbyParameter(selecteditem: any, index: number) {    this.workFlowService.getContractRecordbyParameter(selecteditem).subscribe(data => {      
      this.lstContractRecordDbValue = data;     
      this.contractdblist.cnt_num=this.lstContractRecordDbValue[0].CNT_NUM;
      this.contractdblist.contract=this.lstContractRecordDbValue[0].CONTRACT;      this.contractdblist.contacttype=this.lstContractRecordDbValue[0].CONTRACT_TYPE;      this.contractdblist.contractno=this.lstContractRecordDbValue[0].CONTRACT_NO;     
      this.loading = false;
    }, error => {
      console.error('getAllTickets', error);
      this.loading = false;
    })
  }

Upvotes: 0

Views: 94

Answers (2)

Tuhin Das
Tuhin Das

Reputation: 499

There are many ways to do so some of them are

  1. using input decorator when passing data from parent to child component.
  2. using output decorator with event emitter when passing data from child to parent component.
  3. using subjects for components not related to each other.
  4. using a service to set and get data to be passed.

you can refer their official website for all the above ways.

Upvotes: 0

Tony
Tony

Reputation: 20082

You can use Subject to do that

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

@Injectable()
export class MessageService {
    private subject = new Subject<any>();

    constructor() {}

    sendMessage(message: any) {
        this.subject.next(message);
    }

    getData() {
        return this.subject.asObservable();
    }
}

So you can call MessageService class method sendMessage() to send data

I defined 2 method here. The first method using next() to send message to the next subcriber. So in your component you just need to simply subscribe like this to get the data

private subscription$: Subscription;

public ngOnInit(): void {
  this.subscription$ = this.messageervice
            .getData()
            .subscribe(data => { console.log(data); })
}

public ngOnDestroy(): void {
    this.subscription$.unsubscribe();
}

Upvotes: 1

Related Questions