bug: ViewContainerRef functions do not work as intended on elements which are direct children of ion-content

[garsuga]

Ionic version:

[ ] 4.x [x] 5.x

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior:

Calling ViewContainerRef.createComponent and ViewContainerRef.clear has no effect on the page if the element which owns the ViewContainerRef is a direct child of "ion-content"

Expected behavior:

I am not sure if this is unintended but there is no warning produced and I could not find any mention of this behavior in the documentation.

Steps to reproduce:

Generate a new app from the 'blank' template. Create a new component and declare it in the 'home' module. Make a "div #testElement" tag directly inside the 'home' page template's "ion-content" element and declare a ViewChild to access the "div" element's ViewContainerRef in the 'home' page code. Make a button on the 'home' page that makes the related calls to createComponent or clear. No new elements appear on the page and no elements are cleared when the button is pressed. The intended result works if you surround the "div #testElement" in another "div" element.

Related code: home.page.ts

import { TestComponent } from './test/test.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild("testElement", {read: ViewContainerRef}) testElementViewContainerRef: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

  ngOnInit() {

  }

  ngAfterViewInit() {

  }

  onClickAdd() {
      var testComponentFactory = this.componentFactoryResolver.resolveComponentFactory(TestComponent);
      var testComponent = this.testElementViewContainerRef.createComponent(testComponentFactory);
  }

  onClickClear() {
      this.testElementViewContainerRef.clear();
  }
}

home.page.html that produces bug

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button (click)='onClickAdd()'>Add</ion-button>
  <ion-button (click)='onClickClear()'>Clear</ion-button>
  <div #testElement></div>
</ion-content>

home.page.html that produces the intended result

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div>
    <ion-button (click)='onClickAdd()'>Add</ion-button>
    <ion-button (click)='onClickClear()'>Clear</ion-button>
    <div #testElement></div>
  </div>
</ion-content>

TestComponent is a blank component generated with ionic generate component home/test and declared in the HomeModule

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.11 (C:\Users\Garret\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.4.1
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res : not installed
   native-run  : 1.2.2

System:

   NodeJS : v12.19.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. We are still looking into this, but using ng-template instead of a div should be a safe workaround for now.

[liamdebeasi]

Thanks for the issue. This ended up being a bug in Angular that Mike opened an issue for. The fix has been merged and is available in a pre-release version of Angular 11.1 if you are interested in trying it out.

I am going to close this issue - thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.