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

Moved from https://github.com/angular/angular/issues/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

[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 https://github.com/angular/angular/issues/24259 since Angular should give an error message in this case.

[angular-automatic-lock-bot[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.}