Есть ли способ развернуть автозаполнение мата на угловые?

Question

я хочу взять ссылку на класс в html css из встроенного компонента углового материала, например, у меня есть компонент заголовка в панели мониторинга, который имеет тот же класс для всего веб-сайта, теперь на панели управления у меня естьУ меня есть поле ввода, в котором я ищу значение.Теперь мой вопрос: я хочу увеличить размер div, который идет после поиска, означает, что результат поиска div.

, для лучшего понимания вот изображение

Я хочу, чтобы это было сделано только в угловом виде.не могу удалить автозаполнение / начальной загрузки также будет хорошо, пока он работает

<form method="get" class="search_form">
   <select name="location" class="header-select" #supportsearchmodel>
      <option value="client">Clients</option>
      <option value="vendors">Vendors</option>
      <option value="task">Task</option>
      <option value="sale">Sales</option>
      <option value="support">Support</option>
      <option value="hr">HR</option>
      <option value="account">Accounting</option>
   </select>
   <input #supportsearch [matAutocomplete]="auto1" (keyup)="search()" type="text" placeholder="Search" class="mat-elevation-z3 header-search" (click)="close()">
   <mat-autocomplete #auto1="matAutocomplete">
      <div class="details" *ngIf="searchModel === 'support'">
         <div class="details" *ngIf="hideMsgTck">
            <h6 class="header_text"><strong>Tickets </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of halfTicketData" (click)="OnClickNavigateTicket(searchData.tickets_id)">
            <ul>
               {{searchData.ticket_code}} {{searchData.company_name}} {{searchData.company_email}} {{searchData.company_phone}} {{searchData.message}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'support'">
         <div class="details" *ngIf="hideMsgPro">
            <h6 class="header_text"><strong>Projects </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of halfProjectData" (click)="OnClickNavigateProject(searchData.project_id)">
            <ul>
               {{searchData.project_name}} {{searchData.description}} {{searchData.demo_url}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'support'">
         <div class="details" *ngIf="hideMsgBug">
            <h6 class="header_text"><strong>Bugs </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of bugsData" (click)="OnClickNavigateBugs(searchData.bug_id)">
            <ul>
               {{searchData.bug_description}} {{searchData.bug_status}} 
               {{searchData.bug_title}} {{searchData.notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'sale'">
         <div class="details" *ngIf="hideMsgLead">
            <h6 class="header_text"><strong>Lead </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of leadData" (click)="OnClickNavigateLead(searchData.leads_id)">
            <ul>
               {{searchData.contact_name}} {{searchData.email}} {{searchData.phone}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'sale'">
         <div class="details" *ngIf="hideMsgEst">
            <h6 class="header_text"><strong>Estimate </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of estimateData" (click)="OnClickNavigateEstimate(searchData.estimates_id)">
            <ul>
               {{searchData.first_name}} {{searchData.last_name}} {{searchData.notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'sale'">
         <div class="details" *ngIf="hideMsgOppo">
            <h6 class="header_text"><strong>Opportunity </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of oppoData" (click)="OnClickNavigateOppo(searchData.opportunities_id)">
            <ul>
               {{searchData.opportunity_name}} {{searchData.name}} {{searchData.notes}} {{searchData.probability}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'task'">
         <div class="details" *ngIf="hideMsgTask">
            <h6 class="header_text"><strong>Tasks </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of taskData" (click)="OnClickNavigateTask(searchData.task_id)">
            <ul>
               {{searchData.task_name}} {{searchData.task_description}} {{searchData.tasks_notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'client'">
         <div class="details" *ngIf="hideMsgClient">
            <h6 class="header_text"><strong>Clients</strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of clientData" (click)="OnClickNavigateClient(searchData.client_id)">
            <ul>
               {{searchData.name}} {{searchData.email}} {{searchData.website}} {{searchData.phone}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'vendors'">
         <div class="details" *ngIf="hideMsgVendor">
            <h6 class="header_text"><strong>Vendors </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of vendorData" (click)="OnClickNavigateVendor(searchData.vendor_id)">
            <ul>
               {{searchData.name}} {{searchData.email}} {{searchData.short_note}} {{searchData.phone}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'account'">
         <div class="details" *ngIf="hideMsgInvoce">
            <mat-option class="search_result" *ngFor="let searchData of invoiceData" (click)="OnClickNavigateInvoice(searchData.invoices_id)">
            <ul>
               {{searchData.memo}} {{searchData.currency}} {{searchData.notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'account'">
         <div class="details" *ngIf="hideMsgOrd">
            <h6 class="header_text"><strong>Purchase Order </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of purchaseOrderData" (click)="OnClickNavigateOrd(searchData.purchase_order_id)">
            <ul>
               {{searchData.notes}} {{searchData.memo}} {{searchData.status}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'account'">
         <div class="details" *ngIf="hideMsgPay">
            <h6 class="header_text"><strong>Payment</strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of paymentData" (click)="OnClickNavigatePay(searchData.payments_id)">
            <ul>
               {{searchData.message}} {{searchData.payer_email}} {{searchData.status}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="showMsg">
         <mat-option class="search_result">
            No Search Result Found!
         </mat-option>
      </div>
   </mat-autocomplete>
   <button mat-icon-button (click)="toggleSearchBar = !toggleSearchBar" type="button">
      <mat-icon class="header-icon">search</mat-icon>
   </button>
</form>