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

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>

Continue reading...