passing parameter between HTML pages in Angular

I am brand new to Angular, so forgive me if I use the wrong terms. An existing Component.HTML page includes a custom tag that is a menu. Depending on where the tag is placed I want to pass a parameter that will be treated as a query parameter. Ultimately, I'm passing that parameter to an API endpoint. The parameter is optional so I don't want to (can't) use a router parameter.

The code below shows part of the component.html which contains the tag <home-loan-submenu style="display: contents;" [loanId]="loan.loanHeaderId" [source]=source ></home-loan-submenu>

in this tag I am trying to pass a "source" parameter

        <h3 *ngIf="history.length > 0">Previous Loans</h3>
    <mat-expansion-panel *ngIf="history.length > 0">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Previous Loan History
            </mat-panel-title>
        </mat-expansion-panel-header>
        <div fxLayout="column">
            <mat-card class="loan-history-item" *ngFor="let loan of history"  fxFlex="grow" fxLayout="column center" fxLayoutGap="0px">
                <mat-card-content fxLayout="column">
                    <div fxLayout="row" fxFlex fxLayoutAlign="space-evenly center" fxLayoutGap="10px">
                        <div>
                            {{ loan.publicLoanId }}
                        </div>
                        <div>
                            Orig. Date: {{ loan.originationDate | date: 'M/d/yy' }}
                        </div>
                        <div>
                            Status: {{ loan.loanStatus }}
                        </div>
                        <home-loan-submenu style="display: contents;" [loanId]="loan.loanHeaderId" [source]="history" ></home-loan-submenu>
                    </div>
                </mat-card-content>
            </mat-card>
        </div>
    </mat-expansion-panel>

In the home-loan-submenu.component.html I am creating the query parameter:

    <mat-menu #menu="matMenu">
    <a mat-menu-item *ngIf="showMenuOption(MenuOption.ContractsReceipts)" [routerLink]="['/', loanId, 'contracts-receipts']" [queryParams]="{source: source}" ><span>Contracts & Receipts</span></a>
    <!-- <a mat-menu-item *ngIf="showMenuOption(MenuOption.TransactionHistory)" [routerLink]="['/transaction-history/loan', loanId]" ><span>Transaction History</span></a> -->
</mat-menu>

In the home-loan-submenu.component.ts I am subscribing to an observable to get query params:

    ngOnInit()
{
     this.route
    .queryParams
    .subscribe(params => {
        this.source = params['source'] || '';
    })

but it's not passing the value.

Note: if I hard code a string in the query parameter in loan-submenu.component.html, as in [queryParams]="{source: 'history'}" the parameter is passed correctly. The issue is getting it from the containing page that holds the tag.

I appreciate any suggestions

Update Based on the link ashwinlagji sent me, I confirmed I was using @input in my parent component. However, the one change I did make was in the parent html, where the custom tag is used, i added the parameter name instead of a string as such:<home-loan-submenu [loanId]="loan.loanHeaderId" [source] = source></home-loan-submenu>

in the component file I assigned a value to "source" parameter and it is passed through as a query parameter as expected <yea!> However, there is one important point I didn't communicate. there are two section to the HTML page, one is Active loans and the other is Loan History. Both sections are identical in code structure. I need to know which section the user clicked from, hence the name "source". by hardcoding the value of "source" in the HTML, I was hoping it would pass that value back to the child page as the source value.