Intercept add new Component (Angular test)

[ricardojlrufino]

In my case I'm trying to integrate with Angular, and when my container(field-group) is rendered, this will create : fieldset > div.child-container.
I would like to intercept when a new component is dragged, end add to div.child-container.
In my case I need to add the component in a child container. But getChildrenContainer is not called.

How i can interncep addChildNode ?? to add to child container !

Ex.

Source

<field-group title="Dados Pessoais" layout="v">
   <form-field type="text" name="nome" label="Nome" required="true" layout="h" help="Texto de Ajuda">
   </form-field>
   <form-field type="text" name="default-name" label="New" required>
   </form-field>
   <form-field type="email" name="email" label="Email" required="true" layout="v" help="Nao esqueca o @">
   </form-field>
</field-group>

Html...

<field-group id="ivwl" data-gjs-type="field-group" draggable="true" data-highlightable="1" title="Dados Pessoais" layout="v" _nghost-ccn-c10="" ng-version="13.1.2" class="">
   <fieldset _ngcontent-ccn-c10="" class="form-group border p-2">
      <legend _ngcontent-ccn-c10="" class="w-auto">Dados Pessoais</legend>
      <div _ngcontent-ccn-c10="" class="child-container">
         <form-field id="ihlq" data-gjs-type="form-field" draggable="true" data-highlightable="1" type="text" name="nome" label="Nome" required="true" layout="h" help="Texto de Ajuda" _nghost-ccn-c9="" ng-version="13.1.2" class="">
            <div _ngcontent-ccn-c9="" class="form-group form-inline row">
               <label _ngcontent-ccn-c9="" for="nome">
                  Nome <span _ngcontent-ccn-c9="">**</span><!---->:
               </label>
               <input _ngcontent-ccn-c9="" type="type" class="form-control" name="nome" placeholder="" id="nome" required="required"><small _ngcontent-ccn-c9="" class="form-text text-muted" id="nomeHelp">Texto de Ajuda</small>
            </div>
         </form-field>
         <form-field id="in11" data-gjs-type="form-field" draggable="true" data-highlightable="1" type="email" name="email" label="Email" required="true" layout="v" help="Nao esqueca o @" _nghost-ccn-c9="" ng-version="13.1.2" class="gjs-hovered">
            <div _ngcontent-ccn-c9="" class="form-group row">
               <label _ngcontent-ccn-c9="" for="email">
                  Email <span _ngcontent-ccn-c9="">**</span><!---->:
               </label>
               <input _ngcontent-ccn-c9="" type="type" class="form-control" name="email" placeholder="" id="email" required="required"><small _ngcontent-ccn-c9="" class="form-text text-muted" id="emailHelp">Nao esqueca o @</small>
            </div>
         </form-field>
      </div>
   </fieldset>
   <form-field id="ik1g1" data-gjs-type="form-field" draggable="true" data-highlightable="1" type="text" name="default-name" label="New" required="true" _nghost-ccn-c9="" ng-version="13.1.2" class="">
      <div _ngcontent-ccn-c9="" class="row">
         <label _ngcontent-ccn-c9="" for="default-name">
            New <span _ngcontent-ccn-c9="">**</span><!---->:
         </label>
         <input _ngcontent-ccn-c9="" type="type" class="form-control" name="default-name" placeholder="" id="default-name" required="required"><small _ngcontent-ccn-c9="" class="form-text text-muted" id="default-nameHelp"></small>
      </div>
   </form-field>
</field-group>

[ricardojlrufino]

Note: I tried to render all the children, but it ended up giving an error, because then the events stop working.

[ricardojlrufino]

I need trigger a event and move component manualy.

this.listenTo(model.components(), 'add remove reset', this.onChildsChange);

    onChildsChange(p1, p2, event) {
        clearTimeout(this._upr);
        this._upr = setTimeout(() => this.fixChildren(event), 100);
      }

and triggers after some time

      /**
       * Move component to  getChildrenContainer, after added
       */
      fixChildren(event) {
        // Angular ja foi inicializado
        if (this.el._ngElementStrategy) {
          var components = this.model.get('components');
          const container = this.getChildrenContainer();
          console.log('Insert at: ' + event.at);
          var newElement = components.models[event.at].view.el;
          container.insertBefore(newElement, container.children[event.at]);
        }

not an elegant solution but ...