How to Pass data from one search box to another search box in same component without losing input value in angular 13

Question

I need to show the result in second component, the first component is rendered in the second component at the same time i need the user input value to be displayed in the second component for further search

 **1st component .html**


 <form [formGroup]="jobSearchForm" (ngSubmit)="jobSearchSubmit()">
                <div class="input-group job-group">
                    <div class="input-group-btn search-panel">
                        <select class="form-select btn btn-default search-filter-btn" formControlName="versionId">
                            <option *ngFor="let version of versions" value="{{version.code}}">
                                {{version.Name}}
                            </option>
                        </select>
                    </div>
                    <span class="input-group-btn search-lbl">
                        <span>
                            <fa-icon [icon]="briefcase" class="job-title-ico"></fa-icon>Job Title
                        </span>
                    </span>
                    <input type="text" formControlName="name" class="txt-large-search"
                        placeholder="Example: Banking, Insurance and other Financial Clerks">
                    <span class="input-group-btn">
                        <button class="searchbtn-lg" type="submit">Search</button>
                    </span>
                </div>
            </form>


**2nd component .html**

    <app-another-component></app-another-component>

  **1st component typescript**

jobSearchSubmit() {
    this.fetchedJobTitleName = this.jobSearchForm.controls.name.value;
    this.fetchedVersionId = this.jobSearchForm.controls.versionId.value;
    this.fetchedDatas = this.jobSearchForm.controls;
this.router.navigate(['search']);
}