This is a migrated thread and some comments may be shown as answers.
Creating Custom ToolBarToolComponent not showing
1 Answer 8 Views
This is a migrated thread and some comments may be shown as answers.
Cody
Top achievements
Rank 1
Cody asked on 10 Apr 2020, 10:22 PM

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?

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 13 Apr 2020, 02:11 PM

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.
Asked by
Cody
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or