Stencil components duplicate inside angular component when ngIf is used

[sebastien-yoobic]

Stencil version:

 @stencil/core@0.4.3

I'm submitting a:

• [ x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: When a stencil component is inside an Angular component using *ngIf on the angular component leads to the duplication of the stencil component.

Expected behavior: Stencil components do not duplicate.

Steps to reproduce:

This repo replicate the issue: https://github.com/sebastien-yoobic/duplicate You can follow the instruction of the Readme, it contains an Angular and the Stencil app starter project. It compile the Stencil project and then use it inside an Angular application.

Related code:

Angular component html

<div *ngIf="visible">
    I am an Angular component, I contain a Stencil component
    <ng-content></ng-content>
</div>

ts

import { Input, Component } from '@angular/core';

@Component({
  selector: 'angular-component',
  templateUrl: './angular-component.html',
  styleUrls: ['./angular-component.scss']
})
export class AngularComponent {
  @Input() visible: boolean;

  constructor() {}
}

Use of stencil component form Stencil starter.

<div>
  <h2>Stencil Angular Duplicate</h2>
  <button (click)="onClick()">Show/hide Angular component</button>
  <angular-component [visible]="visible">
    <my-app></my-app>
  </angular-component>
</div>

Other information:

The repo is cleaner that the one before and I hope you will be able to reproduce the issue, If you have any trouble reproducing it, let me know.

Thanks,

[ghaiat]

@danbucholtz hey, we created another repo. it s a valid issue. ping me on slack if it s still not clear

[danbucholtz]

I have confirmed this is a real issue.

Thanks, Dan

[adamdbradley]

Awesome issue, thanks for filing this!