CODEWITHSUNDEEP
javascriptangular
user13361393
user13361393

Reputation:

How to send data parent component to child component when click the button which is in outside both parent and child?

I dont know that this way is right. But this is my try......So will explain step by step what i want to do. As a well as these are differant component but last two (Bank-Data.componen.ts/Bank-Data.componen.html) is not different component. Button/DB-data/Bank-Data different component

Button.componen.html

   <button>Click here</button>

DB-Data.componen.ts

@Output() accNo= new EventEmitter<any>();

async onSubmit(cusData): Promise<any>{
 //Here is some data come from database......
   this.accountNo = '008974629'; //This value want to send to another component!
   this.accNo.emit(this.accountNo );
}

Bank-Data.componen.ts

class LectureHallComponent implements OnInit {
 public showaccountNo; //bind the accountNo with this variable

 //execute the function and show the accountNo
 getLectureID(event){
 debugger;
 this.showaccountNo= event;
 }
}

Bank-Data.componen.html

 AccountNo: <span *ngIf="showaccountNo"><b>{{showaccountNo}}</b></span> //show the AccountNo

I could get the accountNo & emit the account to Bank-data.component.ts if button had located in Bank-data.component.html. But i didn't understand it to do when click the button in another component. Then want to get AccountNo and show it in a another component.

  1. This this thing that i want to do............
  2. when i click the button i want get account no from DB-Data.componen.ts
  3. Then that account number want to display Bank-Data.componen.html here

Upvotes: 0

Views: 157

Answers (3)

Robert_Robert_Robert
Robert_Robert_Robert

Reputation: 1

You specified an @Output event emitter. Does these components have a parent child relationship? If they do then you can have a look here https://angular.io/guide/component-interaction. If they don't, then as the posts above suggest, perhaps you can use behaviour subject to pass the data.

Upvotes: 0

Minal Shah
Minal Shah

Reputation: 1486

to transmit data from one component to another component which don't share child parent relation, you can use the service to update the data and fetch the data.

So here you create one service call it DataService: The code in your data service would have the following lines:

setData: BehaviorSubject<any> = new BehaviorSubject(false);
data:BehaviourSubject<any>=new behaviourSubject({})
 constructor(){}
  setDataFlag(){
   this.setData.next(true);
  }
  setData(number:any){
      this.data.next(number);
  }

Now in when you click the button call.

this.dataService.setDataFlag();

The componet of DB-Data would subscribe to the flag.

So add the following line in that component.

this.dataService.setDataFlag.subscribe((data)=>{
   if(data)
   this.dataService.setData(this.AccNo)
    })

And in the bankData component you just subscribe the data.

this.dataService.data.subscribe((data)=>{this.accNo= data})

Upvotes: 0

hadimbj
hadimbj

Reputation: 1727

if you want to share a variable between multiple components, the best way is via Services. put the 'account no' in a service and inject it into each component that needs it, this way all of them share the same variable.

Upvotes: 1

Related Questions