Creating Custom ToolBarToolComponent not showing

2 posts, 1 answers
  1. Cody
    Cody avatar
    4 posts
    Member since:
    Mar 2020

    Posted 10 Apr Link to this post

    I'm trying to use the following component in toolbar but it will now show up in the tool bar.

    import {Component, ElementRef, forwardRef, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
    import {ToolBarToolComponent} from "@progress/kendo-angular-toolbar";
     
    export function outerWidth(element: any): number {
      let width = element.offsetWidth;
      const style = getComputedStyle(element);
     
      width += (parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0);
      return width;
    }
     
    @Component({
      providers: [{provide: ToolBarToolComponent, useExisting: forwardRef(() => LogoComponent)}],
      selector: 'app-logo',
      template: `
        <ng-template #d>
          <p #toolbarElement>weeee</p>
        </ng-template>
      `,
      styleUrls: ['./logo.component.css']
    })
    export class LogoComponent extends ToolBarToolComponent implements OnInit  {
     
      @ViewChild('d') public toolbarTemplate: TemplateRef<any>;
      @ViewChild('toolbarElement') public toolbarElement: ElementRef;
     
      constructor() {
        super();
      }
     
      ngOnInit(): void {
      }
     
      public get outerWidth(): number {
        if (this.toolbarElement) {
          return outerWidth(this.toolbarElement.nativeElement);
        }
      }
     
    }

     

    in the component that is using kendo-toolbar loos like this

    <kendo-toolbar>
      <app-logo></app-logo>
    </kendo-toolbar>

     

    module looks like this

    import {forwardRef, NgModule} from '@angular/core';
    import { CommonModule } from '@angular/common';
    import {NavBarComponent} from './nav-bar.component';
    import {RouterModule} from '@angular/router';
    import { FlexLayoutModule } from '@angular/flex-layout';
    import {ToolBarModule, ToolBarToolComponent} from "@progress/kendo-angular-toolbar";
    import { LogoComponent } from './logo/logo.component';
    import {BrowserModule} from "@angular/platform-browser";
    import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
    import {CustomToolComponent} from "./custom-tool.component";
     
     
    @NgModule({
      declarations: [
        NavBarComponent,
        LogoComponent,
        CustomToolComponent
      ],
      exports: [
        NavBarComponent
      ],
      imports: [
        CommonModule,
        RouterModule,
        FlexLayoutModule,
        ToolBarModule,
        BrowserModule,
        BrowserAnimationsModule,
      ]
    })
    export class NavbarModule { }

     

    i did the ng add when i install toolbar stuff as instructed in the docs.

     

    any ideas on what i'm missing?

     

     

  2. Answer
    Petar
    Admin
    Petar avatar
    20 posts

    Posted 13 Apr Link to this post

    Hello Cody,

    Thanks for the provided code and details. Everything seems to be ok except one thing - since Angular 8, it is mandatory for @ViewChild to be provided a second parameter - { static: boolean } More info can be found here - https://angular.io/guide/static-query-migration#static-query-migration-guide.

    Having said that, I have created a sample app with the provided code and updated LogoComponent. Everything seems to be fine - https://stackblitz.com/edit/angular-vywzeh?file=app%2Flogo.component.ts

    Not having the second parameter of @ViewChild in the docs is an omission on our side and I am sorry for that. On our develop site we have an updated version of the docs on adding custom tools to the ToolBarComponent - https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/custom-control-types/

    I hope this helps. Please let me know if further clarification on the topic is needed.

    Regards,
    Petar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top