在菜单栏上显示搜索字段/按钮

Question

在这个StackBlitz中，我有一个用于Angular菜单的Kendo。我需要的是一个搜索栏的右边的按钮。将这两个元素添加到kendo-menu不起作用(见下文)。有没有什么办法让这些东西出现呢？

@Component({
    selector: 'my-app',
    template: `
    <div id='wrapper'>
     <kendo-menu>
        <kendo-menu-item text="Option 1">
           <kendo-menu-item text="Item 1.1"></kendo-menu-item>
           <kendo-menu-item text="Item 1.2"></kendo-menu-item>
        </kendo-menu-item>
        <kendo-menu-item text="Option 2">
           <kendo-menu-item text="Item 2.1"></kendo-menu-item>
           <kendo-menu-item text="Item 2.2"></kendo-menu-item>
        </kendo-menu-item>

        <div style="float:right">
              <input class="k-textbox" style="width:100px;" /> 
              <button class="k-button" (click)="search()">Search</button>
        </div>

    </kendo-menu>
  </div>  
    `,
    styles:[ `
        #wrapper {
            width: 100%;
            background-color: #f0f0f0;
            border: 1px solid #d7d7d7;
        }
   ` ]
})
export class AppComponent {

}

Answer 1

再添加一个项目，并将元素放入项目模板中：

<kendo-menu-item [cssStyle]="{ marginLeft: 'auto' }">
  <ng-template kendoMenuItemTemplate>
       <input class="k-textbox" style="width:100px;" /> 
       <button class="k-button" (click)="search()">Search</button>
  </ng-template>
</kendo-menu-item>

https://stackblitz.com/edit/angular-7fx7f2?file=app%2Fapp.component.ts