Dynamically insert an angular component inside a FlexSheet/FlexGrid UI

Dynamically insert an angular component inside a FlexSheet/FlexGrid UI

Posted by: javier.cintron on 10 August 2018, 7:49 am EST

• 

  javier.cintron

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 August 2018, 7:49 am EST - Updated 3 October 2022, 11:24 am EST

  Hi!

  Is there a way to dynamically insert an angular component inside this area of a flexsheet:

  <div wj-part=“sz”…

  We want to add a drag handler that appears when a group of cells are selected. We have that working but the handler component is outside of the flexsheet. If we scroll inside the flexsheet the handler is not attached to that div. We want the handler to be a child of that div so it will be limit to the div dimensions so we can control where we want to show the handler.

  Thank you.

  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 August 2018, 9:25 pm EST

  Hi,
  
  You can use the initialized event of FlexSheet to get an instance of flexsheet after it is initialized, then run query selector to get the required DOM element you want and attach your component as required.
  
  You may refer to the official angular document for creating angular components dynamically:-
  
  https://angular.io/guide/dynamic-component-loader

  You may also refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/angular-kfcyau?file=app%2Fapp.component.ts

  Inspect the flexsheet to confirm if the component is added to the required div.

  P.S. You may just use the flexSheet.clientSize.height/.width flexSheet.scrollSize.height/width to get the height and width of flexSheet and limit the drag handler based on it.

  ~Sharad