Creating Custom ToolBarToolComponent not showing

[Cody]

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?

 

 

[Petar]

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