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?