I am currently working with a nebular stepper component and I have implemented lazy loading for the final step. Within this component, there is a need to target an element by its id and make some modifications to it.
Below is the structure of the stepper component where lazy loading is applied:
Html-
<nb-step [label]="labelFour">
<ng-template #labelFour>Fourth step</ng-template>
<h3>Edit Your Image</h3>
<div class="container step-container">
<ng-template #canvasContainer ></ng-template>
</div>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
TS-
@ViewChild('canvasContainer', {read: ViewContainerRef}) canvasContainer: ViewContainerRef;
canvasInitialized = false;
async createCanvas() {
await this.lazyLoadCanvas();
this.canvasInitialized = true;
}
private async lazyLoadCanvas() {
const {CanvasComponent} = await import('../../single/canvas/canvas.component');
const canvasFactory = this.cfr.resolveComponentFactory(CanvasComponent);
const {instance} = this.canvasContainer.createComponent(canvasFactory, null, this.injector);
}
noDesignSelected:boolean;
thirdStepNext(){ //Third step is clicked
if(this.postDesignService.designID != -1){
this.stepper.next();
this.noDesignSelected = false;
this.createCanvas();
} else {
this.noDesignSelected = true;
}
}
Here is the component that gets loaded in:
Html-
<div class="canvas-bg">
<div id="container" ></div>
</div>
TS-
ngAfterViewChecked() {
document.getElementById('container').classList.add('test'); //error here
this.stage = new Konva.Stage({
container: 'container', //error here
width: this.stageWidth,
height: this.stageHeight,
});
}
The error message indicates that the element with id 'container' cannot be located.
I have tried using ngOninit, ngAfterViewInit, and ngAfterViewChecked (as shown above). Additionally, I attempted assigning the element to a ViewChild and modifying the style of that viewchild without success.