How to implement Fabricjs Align guidelines in Angular?

The mentioned above steps are right, except they need to be initialized at ngAfterContentInit(). Codes will be like this.

//#region Methods which are defined in the .js files.

declare function initCenteringGuidelines(canvas: fabric.Canvas):void;
declare function initAligningGuidelines(canvas: fabric.Canvas):void;
declare function initKeyBoardMovement (canvas: fabric.Canvas,e:any):void;

//#endregion

@Component({
  selector: 'app-fabric-canvas',
  templateUrl: './fabric-canvas.component.html',
  styleUrls: ['./fabric-canvas.component.scss'],
})


ngAfterContentInit() {
    this.ngZone.runOutsideAngular(() => {
      if (this.eventHandler.canvas) {
        this.eventHandler.canvas.dispose();
      }
      this.canvas = new fabric.Canvas('canvas', {
        selection: true,
        preserveObjectStacking: true,
        backgroundColor:'#2d2d2d', //need to add to Theme,
        fireRightClick: true,  // <-- enable firing of right click events
        fireMiddleClick: true, // <-- enable firing of middle click events
        stopContextMenu: true, // <--  prevent context menu from showing
      });

    
      initCenteringGuidelines(this.canvas);
      initAligningGuidelines(this.canvas);   
    });
  }