I have been trying to implement Custom toolbar with Kendo Buttons using the below document from kendo.
I am getting "Cannot read properties of undefined (reading 'nativeElement')" error.
Below is my implementation.
<ng-container *ngIf="stepsState$ | async as stepsState">
<kendo-toolbar *ngIf="isToolbarEnabled$ | async">
<aog-step-toolbar-button buttonId='reset-button' text="Reset" themeColor="error" (click)='reset()'>
</aog-step-toolbar-button>
<kendo-toolbar-separator></kendo-toolbar-separator>
<aog-step-toolbar-button *ngIf='stepsState.currentStep!==0' buttonId='back-button' text="Back"
themeColor="primary" (click)='backStep()'>
</aog-step-toolbar-button>
<aog-step-toolbar-button *ngIf='stepsState.currentStep!==3' buttonId='next-button' text="Next"
themeColor="primary" (click)='nextStep()' [disabled]='isStepInvalid(stepsState)'>
</aog-step-toolbar-button>
<kendo-toolbar-separator *ngIf='stepsState.currentStep===3'></kendo-toolbar-separator>
<aog-step-toolbar-button *ngIf='stepsState.currentStep===3' buttonId='save-button' text="Save"
themeColor="primary" (click)='save()' [disabled]='isStepperInvalid(stepsState)'>
</aog-step-toolbar-button>
</kendo-toolbar>
</ng-container>
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import {
goToNextStep,
goToPreviousStep,
resetStepper,
} from '../../state/operational-structure-creation-step/operational-structure-creation-step.actions';
import { AggregatedStepState } from '../../state/operational-structure-creation-step/step';
import { submitOperationalStructureCreation } from '../../state/operational-structure-creation/operational-structure-creation.actions';
import { StepsStateFacadeService } from '../../services/steps-state-facade.service';
import { selectIsToolbarEnabled } from '../../state/operational-structure-creation/operational-structure-creation.selectors';
// TODO: rename to toolbar instead of navigation as it holds reset and save now
@Component({
selector: 'aog-operational-structure-step-navigation',
templateUrl: './operational-structure-step-navigation.component.html',
styleUrls: ['./operational-structure-step-navigation.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OperationalStructureStepNavigationComponent {
public readonly stepsState$: Observable<AggregatedStepState>
= this.stepsStateFacade.stepsState$;
public readonly isToolbarEnabled$: Observable<boolean> = this.store
.select(selectIsToolbarEnabled);
public isStepInvalid(state: AggregatedStepState): boolean {
const stepState = state.steps[state.currentStep];
if (!stepState) {
throw new Error(`Unknown step state for index: ${state.currentStep}`);
}
return !stepState.isValid;
}
public isStepperInvalid(state: AggregatedStepState): boolean {
return state.steps.filter((s) => s.isValid).length !== 4;
}
public constructor(
private readonly stepsStateFacade: StepsStateFacadeService,
private readonly store: Store,
) { }
public nextStep(): void {
this.store.dispatch(goToNextStep());
}
public backStep(): void {
this.store.dispatch(goToPreviousStep());
}
public reset(): void {
this.store.dispatch(resetStepper());
}
public save(): void {
this.store.dispatch(submitOperationalStructureCreation());
}
}
<ng-template #toolbarTemplate>
<button [id]='buttonId' [aogTestId]="buttonId" kendoButton [themeColor]="themeColor"
[disabled]='disabled' (click)='onClick($event)'>
{{ text }}
</button>
</ng-template>
@Component({
providers: [{
provide: ToolBarToolComponent,
useExisting: forwardRef(() => OperationalStructureStepToolbarButtonComponent),
}],
selector: 'aog-step-toolbar-button',
templateUrl: './operational-structure-step-toolbar-button.component.html',
})
export class OperationalStructureStepToolbarButtonComponent extends ToolBarButtonComponent {
@Input()
public buttonId = uuid();
@ViewChild('toolbarTemplate', { static: true })
public override toolbarTemplate!: TemplateRef<Element>;
public onClick($event: Event) {
this.click.emit($event);
}
public constructor(element: ElementRef, zone: NgZone) {
super(element, zone);
}
}