0
 <div>
            <app-dropdown [Title]="productTitleName" (sorting)="triggerSorting($event)" (filtering)="triggerfiltering($event)" [filtersStatusData]="statusFitler" (filteringChangeStatus)="statusChanged($event)" *ngIf="productTitleName=='status'">
            </app-dropdown>
            <mat-icon class="icon_class" style="transform: rotate(21deg);">
                <img style="width: 13px; opacity: 0.7;" src="assets/svgIcons/status.svg">
            </mat-icon>
            <span class="fs-12">Status</span>
            <button mat-button (click)="changeType('status')">
                <mat-icon *ngIf="arrow">arrow_drop_down</mat-icon>
                <mat-icon *ngIf="!arrow">arrow_drop_up</mat-icon>
            </button>
        </div>

The Above is in home component.

    <div class="product-dels row-col flex align-middle " *ngIf="Title !== 'tagslist' && Title !== 'ExtrasTag' && Title !== 'collectionsList' && Title !== 'productList'" [matMenuTriggerFor]="menu" #clickHoverMenuTrigger="matMenuTrigger">
        </div>
        
        <mat-menu #menu="matMenu"  class="prefer_bg mt-20" [overlapTrigger]="false">
<div style="padding: 0 10px 10px 10px" *ngIf="Title == 'status'">
                <mat-form-field class="search_form" style="width: 100%" appearance="outline" (click)="$event.stopPropagation();">
                    <mat-icon matSuffix>search</mat-icon>
                    <input type="text" autocomplete="off" matInput autofocus="true" (keyup)="applyFilter($event, Title)"
                        [(ngModel)]="search">
                </mat-form-field>
                <!-- <input type="text" style="height: 30px; width: 100%; border-radius: 5px;border: 1px solid #4d4d4d;
                padding: 10px;" autofocus="true" placeholder="Search.." (keyup)="applyFilter($event, Title)" (click)="$event.stopPropagation();"> -->
                <div class="dropmenustyle">
                    <div class="pl-10 flex  wper-90  mt-1 mbi-5 list-name" *ngFor="let drop of filtersStatusData, let i = index" (click)="$event.stopPropagation();">
                        <div class="wper-95 fs-12">{{drop?.name}}</div>
                        <div class=" wper-10 flex align-right">
                            <mat-checkbox (change)="onChangeStatus($event,drop, i)" id="checkbox-{{drop.id}}" value={{drop.name}} [checked]="drop.isChecked"></mat-checkbox>
                        </div>
                    </div>
                </div> 
            </div>
</mat-menu>

The above is in the dropdown component.

In home.ts

 changeType(name: string) {
this.productTitleName = name;
if (this.menuData?.clickHoverMenuTrigger) {
  this.menuData?.clickHoverMenuTrigger.openMenu();
}

}

@ViewChild(dropdowncomponent) menuData:dropdowncomponent

When first click the button in the home component, the dropdown components get loaded but not the mat-menu. On second click the mat menu gets opened. How to make it open in one click.

Kumaravel A
  • 57
  • 8
  • Please provide example, and add whats inside your components typescript files. Also i think here is the answer your looking for: https://stackoverflow.com/questions/47118412/how-to-open-mat-menu-programmatically – Jacek Ratajewski Sep 28 '21 at 08:49
  • *ngIf="productTitleName=='status'" when i remove this condition i am able to open in one click but the alignment is not in the right place. how i can open in one click without disturbing the if – Kumaravel A Sep 28 '21 at 12:28

0 Answers0