[cdk] ComponentPortal(fooCmp) is not attached to selectedPortal despite implemented according test code examples
See original GitHub issueMoved 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (1 by maintainers)
Top GitHub Comments
@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.
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.