How to access values of one component in another component in Angular

Question

I have a component(say ComponentA) in which I have created two mat-form-fields. I'm using this component inside a form in ComponentB and in other components as well. Now I want to access the values of form-fields of ComponentA on form submission .How to achieve this ??

ComponentA:

<div class="mb-3">
<label for="select" class="form-label " style="font-size: small;">Select 
Fund:</label>
<mat-form-field>
    <mat-label>Select Fund</mat-label>
    <mat-select ngModel>
        <mat-option *ngFor="let item of funds | keyvalue" 
        [value]="item.value">
            <img src='assets/images/logo.png'> {{item.value}}
        </mat-option>
    </mat-select>
</mat-form-field>

<div class="mb-3">
<label for="select" class="form-label " style="font-size: small;">Enter 
Amount PKR:</label>
<mat-form-field class="example-full-width">
    <mat-label>Enter Amount PKR:</mat-label>
    <input type="number" ngModel name="amount" min=1 autocomplete="off" 
 matInput placeholder="Enter Amount PKR:" oninput="validity.valid|| 
 (value='');">
</mat-form-field>

Component B:

  <form #invest="ngForm" (ngSubmit)="onSubmit(invest.value)" class="row g-3">
     <div class="col ms-3 me-2">

            <app-ComponeA></app-ComponenA>
        </div>

Answer 1

I suggest you read this: https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

As the relationship between your components is Child-Parent, that is you want to send the data from your child parent to parent component.

You can use the @Output() and EventEmitter in your ComponentA to send your data to ComponentB when the user selects some option in ComponentA, same for when the user inputs the amount. I've written a sample of what your code should look like when you use the method I mentioned.

Component A HTML will look like this:

<div class="mb-3">
   <label for="select" class="form-label " style="font-size: small;">Select 
   Fund:</label>
   <mat-form-field>
      <mat-label>Select Fund</mat-label>
      <mat-select ngModel (selectionChange)="sendFundToComponentB($event)">
         <mat-option *ngFor="let item of funds | keyvalue" 
           [value]="item.value">
            <img src='assets/images/logo.png'> {{item.value}}
         </mat-option>
      </mat-select>
   </mat-form-field>

<div class="mb-3">
   <label for="select" class="form-label " style="font-size: small;">Enter 
   Amount PKR:</label>
   <mat-form-field class="example-full-width">
      <mat-label>Enter Amount PKR:</mat-label>
      <input type="number" ngModel name="amount" min=1 autocomplete="off" 
       matInput placeholder="Enter Amount PKR:" oninput="validity.valid|| 
       (value='');" (input)="sendAmountToComponentB($event.target.value)">
   </mat-form-field>

Component A .ts will look like this:

@Output()
sendFund: EventEmitter<any> = new EventEmitter();

@Output()
sendAmount: EventEmitter<any> = new EventEmitter();

sendFundToComponentB(temp:any){
this.sendFund.emit(temp);
}

sendAmountToComponentB(temp:any){
this.sendAmount.emit(temp);
}

ComponentB HMTL will look like this:

 <form #invest="ngForm" (ngSubmit)="onSubmit(invest.value)" class="row g-3">
       <div class="col ms-3 me-2">
          <app-ComponeA (sendFund)="getFundFromComponentB($event)" 
          (sendAmount)="getAmountFromComponentB($event)"></app-ComponenA>
       </div>

In ComponentB .ts you will set your values when the event is emitted.

getFundsFromComponentB(temp: any): void{ 
  this.funds = temp;
} 

getAmountFromComponentB(temp: any): void{
  this.amount = temp;
}