<mat-menu #settings="matMenu">

    <div *ngFor="let id of arraycolumns; let i = index">

        <div *ngIf="![‘Cashless', 'Borrower', 'options', 'isfavorite', 'Progress', 'Deal Name'].includes(id)" mat-menu-item>

            <mat-checkbox class="chkbx" #singleCheckbox [checked]='fieldcolumnsChecked.indexOf(id) >= 0' (change)="checkcolumnsChanged(id)" (click)="$event.stopPropagation();" [tabIndex]="i">

                {{id}} 

            </mat-checkbox>

        </div> 

    </div> 

</mat-menu>

import { HostListener, QueryList, ViewChildren } from '@angular/core';

import { MatCheckbox } from '@angular/material/checkbox';

// ... (other imports)

export class YourComponent {

    @ViewChildren("singleCheckbox") checkboxes!: QueryList<MatCheckbox>;

    currentFocusIndex = 0;

    // ...

    @HostListener('document:keydown', ['$event'])

    handleKeyboardEvent(event: KeyboardEvent) {

        if (this.checkboxes && this.checkboxes.length) {

            if (event.key === 'ArrowDown') {

                event.preventDefault();

                this.setFocus(true);

            } else if (event.key === 'ArrowUp') {

                event.preventDefault();

                this.setFocus(false);

            }

        }

    }

    setFocus(goDown: boolean) {

        if (goDown && this.currentFocusIndex < this.checkboxes.length - 1) {

            this.currentFocusIndex++;

        } else if (!goDown && this.currentFocusIndex > 0) {

            this.currentFocusIndex--;

        }

        const checkboxArray = this.checkboxes.toArray();

        checkboxArray[this.currentFocusIndex].focus();

    }

    // ... (rest of your code)

}