In the first approach you say that there is unwanted coupling due to the component needing to know about the component being injected inside. I have been able to add an Input that accepts a component class, and then I pass that input to the ComponentFactoryResolver and it all works fine. Any issues w/ this approach?
Thanks Nir for your excellent tutorial. I'm using Angular 17 and meet some problems: 1/ document.querySelector('#action') throw an error as this function may return a null 2/ @ViewChild(CdkPortal) portal!: CdkPortal; return undefined and the host cannot attach portal Here is my solution: import PortalModule (solve the undefined portal) ngAfterViewInit(): void { const el = document.querySelector('#action') this.host = new DomPortalHost( el || new HTMLElement, this.componentFactoryResolver, this.applicationRef, this.injector ); this.host.attach(this.portal) } ngOnDestroy(): void { if (this.host){this.host.detach() } }
Great talk and nice job. The only thing I don't like is the use of document.querySelector, but since you are in a child, you cannot access it as it is at an upper level.
![Digital Circus Episode 4 [TRAILER]](http://i.ytimg.com/vi/abZtsmMUbJo/mqdefault.jpg)
Oh man... I am crying with happiness. Such concious lecture on the CDK portal.
can you do it in the latest version. cause i am getting deprecated message. 🙃
Thanks Nir, well explained and sprinkeld with great humor :-)
The Php joke was nice. Great talk
Great stuff, thank you so much, that changes from the basic todo list tutorials 😅
Amazing talk! Thank you Nir!
Thank you!
amazing
Great talk !!!! where could we find the code attached for this? Thx !!!
Great talk! thx!!
Thank you!
In the first approach you say that there is unwanted coupling due to the component needing to know about the component being injected inside. I have been able to add an Input that accepts a component class, and then I pass that input to the ComponentFactoryResolver and it all works fine. Any issues w/ this approach?
Thanks Nir for your excellent tutorial.
I'm using Angular 17 and meet some problems:
1/ document.querySelector('#action') throw an error as this function may return a null
2/ @ViewChild(CdkPortal) portal!: CdkPortal; return undefined and the host cannot attach portal
Here is my solution:
import PortalModule (solve the undefined portal)
ngAfterViewInit(): void {
const el = document.querySelector('#action')
this.host = new DomPortalHost(
el || new HTMLElement,
this.componentFactoryResolver,
this.applicationRef,
this.injector
);
this.host.attach(this.portal)
}
ngOnDestroy(): void {
if (this.host){this.host.detach() }
}
תותח
Great talk and nice job. The only thing I don't like is the use of document.querySelector, but since you are in a child, you cannot access it as it is at an upper level.
21:57 You're Welcome
אחלה הרצאה :)
תודה!
05:15 I would say the talk starts here!
I mean yes, but you don't really want to skip the first couple of minutes... it's gold
👍👍👍
its strange, they (angular) do everything to encapsulate everything, only so you can boilerplate stuff from component-a into component-b. :D
ComponentFucktoryResolver
Overcomplicated as usually. Someone has to fire these guys from google.