angularkendo-uikendo-grid

KendoUI Angular 17 - NG0300: Multiple components match node with tagname button


I have different component where I'm using a KendoUI Angular Grid with delete buttons in the command-column:

<kendo-grid-command-column [width]="40">
          <ng-template kendoGridCellTemplate let-dataItem>
            <button
              class="outgoing-delete-button"
              id="gridDeleteButton"
              kendoButton
              themeColor="primary"
              fillMode="clear"
              kendoGridRemoveCommand
              onClick="event.stopPropagation()"
            >
              <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;
            </button>
          </ng-template>
        </kendo-grid-command-column>

I used npm-check-updates to update the @progress components, here is my package.json:

"dependencies": {
    "@angular/animations": "~17.3.7",
    "@angular/common": "~17.3.7",
    "@angular/compiler": "~17.3.7",
    "@angular/core": "~17.3.7",
    "@angular/forms": "~17.3.7",
    "@angular/localize": "~17.3.7",
    "@angular/platform-browser": "~17.3.7",
    "@angular/platform-browser-dynamic": "~17.3.7",
    "@angular/platform-server": "~17.3.7",
    "@angular/router": "~17.3.7",
    "@fortawesome/angular-fontawesome": "^0.14.1",
    "@fortawesome/fontawesome-common-types": "^6.5.2",
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@progress/kendo-angular-buttons": "^15.5.0",
    "@progress/kendo-angular-common": "^15.5.0",
    "@progress/kendo-angular-dateinputs": "^15.5.0",
    "@progress/kendo-angular-dialog": "^15.5.0",
    "@progress/kendo-angular-dropdowns": "^15.5.0",
    "@progress/kendo-angular-excel-export": "^15.5.0",
    "@progress/kendo-angular-grid": "^15.5.0",
    "@progress/kendo-angular-icons": "^15.5.0",
    "@progress/kendo-angular-indicators": "^15.5.0",
    "@progress/kendo-angular-inputs": "^15.5.0",
    "@progress/kendo-angular-intl": "^15.5.0",
    "@progress/kendo-angular-l10n": "^15.5.0",
    "@progress/kendo-angular-label": "^15.5.0",
    "@progress/kendo-angular-layout": "^15.5.0",
    "@progress/kendo-angular-listview": "^15.5.0",
    "@progress/kendo-angular-menu": "^15.5.0",
    "@progress/kendo-angular-navigation": "^15.5.0",
    "@progress/kendo-angular-notification": "^15.5.0",
    "@progress/kendo-angular-pdf-export": "^15.5.0",
    "@progress/kendo-angular-popup": "^15.5.0",
    "@progress/kendo-angular-progressbar": "^15.5.0",
    "@progress/kendo-angular-ripple": "^15.5.0",
    "@progress/kendo-angular-tooltip": "^15.5.0",
    "@progress/kendo-angular-treeview": "^15.5.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.20.1",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^2.3.0",
    "@progress/kendo-theme-default": "^7.2.1",
    "@types/lodash": "^4.17.1",
    "angular-oauth2-oidc": "^17.0.2",
    "bootstrap": "^5.3.3",
    "cldr-core": "^45.0.0",
    "cldr-dates-full": "^45.0.0",
    "cldr-numbers-full": "^45.0.0",
    "jquery": "^3.7.1",
    "kendo-ui-license": "^1.0.1",
    "locale-codes": "^1.3.1",
    "npm-check-updates": "^16.14.20",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.8.1",
    "zone.js": "~0.14.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.6",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/schematics": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "~17.3.6",
    "@angular/compiler-cli": "~17.3.7",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/jquery": "^3.5.29",
    "@types/node": "^20.12.8",
    "@typescript-eslint/eslint-plugin": "^7.8.0",
    "@typescript-eslint/parser": "^7.8.0",
    "eslint": "^9.2.0",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "ngx-translate-testing": "^7.0.0",
    "tslib": "^2.6.2",
    "typescript": "^5.4.5"
  }

I get this error since I upgraded the application to Angular version "17.3.7" and the @progress components to version "15.5.0". I'm struggling to fix the problem, please help.

Error: NG0300: Multiple components match node with tagname button: ButtonComponent and 
RemoveCommandDirective. Find more at https://angular.io/errors/NG0300
at throwMultipleComponentError (core.mjs:9916:11)
at findDirectiveDefMatches (core.mjs:11970:29)
at resolveDirectives (core.mjs:11770:29)
at elementStartFirstCreatePass (core.mjs:22977:5)
at Module.ɵɵelementStart (core.mjs:23013:9)
at Component_ng_template_32_Template (component.html:189:9)
at executeTemplate (core.mjs:11268:9)
at renderView (core.mjs:12470:13)
at createAndRenderEmbeddedLView (core.mjs:12540:9)
at TemplateRef.createEmbeddedViewImpl (core.mjs:13393:31)



  

Solution

  • I fixed the error by removing the command directive kendoGridRemoveCommand that triggers the built-in event remove of the grid and replaced it by a simple button with click event.

     <kendo-grid-command-column [width]="40">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button
            id="gridDeleteButton"
            kendoButton
            themeColor="primary"
            fillMode="clear"
            [disabled]="appUser.hasStatRole"
            (click)="onDelete($event, dataItem.requestId)"
          >
            <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;
          </button>
        </ng-template>
       </kendo-grid-command-column>