javascript - 如何在 Angular 中在外部組件旁邊添加自定義標籤

我正在使用 Angular 和 Kendo Grid，我想在 Kendo Grid 欄位選擇器旁邊顯示自訂標籤。預設的元件只顯示一個圖示，我找不到在旁邊添加標籤的方法。

@Component({
    selector: 'my-app',
    template: `
      <kendo-grid [data]="data">
         <ng-template kendoGridToolbarTemplate>
            // I want to add lable like "Choose Columns"
            <kendo-grid-column-chooser></kendo-grid-column-chooser>
         </ng-template>
         <kendo-grid-column field="Field1"></kendo-grid-column>
         <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
      </kendo-grid>
    `
})

class AppComponent {
    public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
}

我想在欄位選擇器按鈕（外部組件）旁邊顯示自訂標籤（例如，“選擇欄位”），以便使用者能更有效地理解其用途。我可以添加標籤，但點擊標籤時無法觸發動作。我該如何在 Angular 應用程式中實現這一點？

任何幫助都將不勝感激！

答案＃1

將 kendo-grid-column-chooser 元件用 label 包起來，如下所示：

<label style="display:flex;align-items:center;cursor:pointer">
   <span>Choose Columns</span>
   <kendo-grid-column-chooser></kendo-grid-column-chooser>
</label>

我從這裡開始在 StackBlitz 上試用了它：https://www.telerik.com/kendo-angular-ui/components/grid/，它可以運作。