ng-if or ng-repeat in angularjs remove web-components from DOM

Question

I have 14.2 angular and I need to reuse components from angular in the legacy project in angular js (1.8.3) using web components.

I have two examples:

1. https://stackblitz.com/edit/angularjs-with-angular-elements-r7vmwp?file=home%2Fhome.controller.js

Here if you click on the click button - you will see that everything works as it should. Our web components work and everything is fine.

if you check this example https://stackblitz.com/edit/typescript-q4cchm?file=index.ts

after you click on "ADD" button - ng-repeat for some reason remove web components from the DOM. And I have this behavior in my actual project and do not understand how to fix this problem. I spent a lot of time investigating this problem but I have no idea what to do to fix this. I notice if I change my array in the init method a lot of times - everything works perfectly. Even if I change the array with setTimeout with 0 delays. But when I change it in Promise or in $timout or setTimeout - I have this strange behavior.

In that two projects, I have real web components in the wc.js file. But actually, it could be any web component.

I tried changing the tsconfig.json property "compilerOptions.target" in angular for all possible values: https://www.typescriptlang.org/tsconfig#target.

I create a new angular project and used web components from there. I download a lot of boilerplate code for angularjs and try to use my web component there and I have this problem there too.

I expect that angularjs directive ng-repeat and ng-if should not remove my web component from the DOM

Could somebody help me with this?

Answer 1

I found a solution. Just need to add a component wrapper for the web component. And you need to use ng-repeat only for angular component and not for the web component.

 angular.module('app')
.component('customComponent', {
        
template: `
<web-component ng-prop-user="$ctrl.user"></web-component>`,
    
    bindings: {
    
        user: '<',
        
    },
    
    controller: function () {
    
        this.user = {};
    
    

        this.$onChanges = function(changes) {
    
            if(changes.user) {
    
            }
            
}
        },
    });

Answer 2

Same issue. You can create a CustomNgElementStrategyFactory to avoid disconnection, the problem is described here:

https://github.com/angular/angular/issues/38778