[cdk] ComponentPortal(fooCmp) is not attached to selectedPortal despite implemented according test code examples

[SerkanSipahi]

Moved from angular/angular#24111

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation/Test issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

The component which is created by ComponentPortal will not attached despite implemented according the test code example see: https://github.com/angular/material2/blob/master/src/cdk/portal/portal.spec.ts#L37-L52

Expected behavior

It should attach the created portal component to the selectedPortal!

Side notes:

The reason why i did it according the test examples is because the official documentation (https://material.angular.io/cdk/portal/overview) was not really helpful for me as a relative new user of angular and the examples on some blogs what i found were outdated because their examples were built top of angular v5 (https://blog.angularindepth.com/angular-cdk-portals-b02f66dd020c).

Additionals: The this.portalOutlet is also not accessible via @ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet! I have implemented something like this many times but it seems that is not working with CdkPortalOutlet directive.

Minimal reproduction of the problem with instructions

Stackblitz:

https://stackblitz.com/edit/angular-gitter-hm6egs?file=app%2Fapp.component.ts

Preview stackblitz code:

@Component({
  selector: 'com-foo',
  template: `
      <div>
        <ng-content [cdkPortalOutlet]="selectedPortal"></ng-content>
      </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MainComponent implements OnInit, AfterViewInit {
  selectedPortal: Portal<any>;
  @ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet;

  ngOnInit() {
    this.selectedPortal = new ComponentPortal(BarComponent);
    console.log(this.selectedPortal);
    // log message:
    // {
    //   injector: undefined,
    //   isAttached: false,
    //   viewContainerRef: undefined
    // }
  }

  ngAfterViewInit() {
    console.log(this.portalOutlet);
    // log message:
    // undefined
  }
}

Environment

Angular version: v6.0.1

Browser:
- [x] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX
 
For Tooling issues:
- Node version: v9.3.0
- Platform:  mac

[SerkanSipahi]

I think i missed something because I found following statement in https://material.angular.io/cdk/portal/overview#portals-in-practice

ComponentPortal:
Used to create a portal from a component type. When a component 
is dynamically created using portals, it must be included in the 
entryComponents of its NgModule.

and the same in testcode example https://github.com/angular/material2/blob/master/src/cdk/portal/portal.spec.ts#L574-L587

const TEST_COMPONENTS = [
  PortalTestApp,
  UnboundPortalTestApp,
  ArbitraryViewContainerRefComponent,
  PizzaMsg
];

@NgModule({
  imports: [CommonModule, PortalModule],
  exports: TEST_COMPONENTS,
  declarations: TEST_COMPONENTS,
  entryComponents: TEST_COMPONENTS,
})
class PortalTestModule { }

After adjusting the stackblitz code according https://github.com/angular/material2/blob/master/src/cdk/portal/portal.spec.ts#L37-L52 and https://material.angular.io/cdk/portal/overview it still does not work!
https://stackblitz.com/edit/angular-gitter-hm6egs?file=app%2Fapp.module.ts

@NgModule({
  imports:         [ BrowserModule, FormsModule, PortalModule ],
  declarations:    [ AppComponent, AppFoo ],
  exports:         [ AppComponent, AppFoo ],
  entryComponents: [ AppComponent, AppFoo ],
  bootstrap:       [ AppComponent ],
  providers:       []
})
export class AppModule { }

Whats wrong here? Is something else missing?

[SerkanSipahi]

@crisbeto @jelbourn This is really weird, i dont know what happening wrong. There is no error message, nothing! Out there except the testcode (material repo) blog (material) are few tutorials/examples which is based on material2/ckd/portal v6 ! That videos which i found are developed imperative and not how i want to do it in the declarative way ([cdkPortalOutlet]="selectedPortal").

I tried really many things, read the documentation (over and over again), read the testcode (over and over again), tried many uses cases, create stackblitz example. I dont know what can i do anymore?

Can anyone look of that issue please, thank you.

[SerkanSipahi]

1.) any updates here (see above)?
2.) Do you guys planning stackblitz examples for portals? (as i said, i followed the testcode examples and it doesnt work!)

[jelbourn]

@SerkanSipahi just took a look

You can't put directives on <ng-content>. Angular treats <ng-content> as a special compiler primitive that's unrolled into its projected content, so it's not turned into real element and can't have directives applied.

I filed angular/angular#24259 since Angular should give an error message in this case.

[SerkanSipahi]

@jelbourn sorry. I was so stupid. Something goes wrong while i read the example code over and over again! Yes you are right, there is nothing about <ng-content>. All examples use <ng-template> (embarrassing).

Thank you for angular/angular#24259. This make sense because it doesnt throw an error in my example.

BTW: the test code examples helped me o lot to understand how the portals are working (expect that i read someting wrong)

P.S. now it works well.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}