Build Angular Modal Without Libs - Angular Dynamic Component

[@MonsterlessonsAcademy]

WATCH NEXT: Angular Unit Testing Course - All That You Need to Know About Testing - th-cam.com/video/bv9z_UfSqgM/w-d-xo.htmlsi=WVzOWtdQUZWEbqsz

[@ytamb01]

Great tutorial. This highlights the things you need to consider if you write a custom modal. It also helps you understand the implementation in libraries like ng-bootstrap. Thanks.

[@MonsterlessonsAcademy]

Glad to hear that!

[@eduardodavila5213]

Monsterlessons rocks!! 💪

[@MonsterlessonsAcademy]

Thank you!

[@oladipogeorge5282]

Hello. Me again. How do you send dynamic data through the modal? Hardcoded content shows:
TEST
But if I try and send dynamic data from the component, it doesn't show:
{{ heading }}
Would really appreciate your help.

Hard to tell without seeing what you’ve done..
But probably heading is empty or null

[@EduardoMartinez-dm5pp]

You've been saving my ass for the past 6 months at my job hahahaha thank you so much dear friend!

[@MonsterlessonsAcademy]

Glad to hear that!

[@Yarinmimon]

Man,i consider myself a very productive angular developer since im very experienced, but you are literally fluent.
Very nice deep comprehension of this amazing fw, btw are you freelance?

[@MonsterlessonsAcademy]

Thank you! No I'm not.

[@AfolabiJude]

This video is highly recommended

[@MonsterlessonsAcademy]

Thank you!

[@christcp9014]

MonsterLessons👍

[@MonsterlessonsAcademy]

Thanks!

[@shieth314]

Incredible video! I always benefit from your videos, particularly at work. Thank you very much for your hard work! I would like to suggest utilizing diagrams to explain the outline of the process for those whom rely on aids for visualization, such as myself.

[@MonsterlessonsAcademy]

Thanks!

[@shieth314]

@@MonsterlessonsAcademy You are most welcome!

[@MolotovClipes]

Wowww, insane tutorial! Thanks a lot.

[@MonsterlessonsAcademy]

Glad you liked it!

[@rahultej8352]

Thank you, great work. Why dint you cinsider to detach the modal component when closed

[@ARShindouAR]

Deep understanding of Angular

[@MonsterlessonsAcademy]

Thank you!

[@ARShindouAR]

@@MonsterlessonsAcademy Btw, is this way like to create a common modal service? Like dialog component in Angular Material? We can define our own dialog UI. and invoke this service to create Modal component?

[@claudiotorres9138]

it shows ComponentFactoryResolver as deprecated in import, can you tell me how to use it the actual way please?

[@MonsterlessonsAcademy]

I didn't try the newer variant but it looks like this is the correct usage
const component = this.viewContainerRef.createComponent(YourElement);

[@sergeydiachenko1429]

​@@MonsterlessonsAcademyBut, you can't use viewContainerRef inside a service class

[@anirbandas12]

seems formcontrol bindings and dynamic data in the ng template that is to be put in the body is not working

[@donachou2011]

hello great video please i would like to know how to implement this modal open with componentRef instead of templateRef

[@MonsterlessonsAcademy]

The vidoe about it is coming soon. Stay tuned.

[@kol4an721]

Great video.
A have one question. How I can customise these modal?
A want to open these modal, but I don’t want to use static component.
Me need the hand over any component to openModal method and open the modal using component which I hand over in those method. How I can doing this? Thanks for answer

[@MonsterlessonsAcademy]

We provide inside a template. You can render whatever inside it.

[@howdy_suraj]

How can we implement it without using deprecated stuff

[@MonsterlessonsAcademy]

You can check documentation and update your code accordingly. Videos content gets outdated with time.

[@karthikeyan878]

Please make a video on Angular "module" vs "library".

[@MonsterlessonsAcademy]

Thank you for the idea. I will add it to the list.

[@claudiotorres9138]

another question, it is necessary that the openModal method is in the appComponent file? Could it be in the component file of the template which opens the modal?

[@MonsterlessonsAcademy]

You can tune the code like you need

[@tmsmiffs]

Very nice! If your modal content is a form, how would you generically handle the submit with the modal's confirm button?

[@MonsterlessonsAcademy]

Just pass data outside when modal is submitted

[@red2n]

Hi you are doing awesome. can you please let us know what VIM based editor are you using. and please post a full PROD ready ANGULAR Application with DB connection with authentication and authorization ?

[@MonsterlessonsAcademy]

Hi, here is my video about Vim th-cam.com/video/YrLiugDhCuk/w-d-xo.html. The config is in the description.
I already have a course with Socket IO, Angular, Typescript, NodeJS, Express, Mongodb and Deployment
monsterlessons-academy.com/courses/build-fullstack-trello-clone-websocket-socket-io

[@johnhashim2854]

Great Content, Thanks

[@MonsterlessonsAcademy]

Glad to hear that!

[@MolotovClipes]

In open(content: TemplateRef) if i need pass a component, how i get rootNodes to this case ?

[@MonsterlessonsAcademy]

If you want to pass a comp inside you need to tune it for your needs. You can find some examples in internet.

[@MolotovClipes]

@@MonsterlessonsAcademy thanks, i got

[@sameerdas3672]

But componentFactoryResolver is deprecated. How can we achieve the same without it?

[@MonsterlessonsAcademy]

Note: since v13, dynamic component creation via ViewContainerRef.createComponent does not require resolving component factory: component class can be used directly.
angular.io/api/core/ComponentFactoryResolver

[@sergeydiachenko1429]

@@MonsterlessonsAcademy you can't use ViewContainerRef inside Service class. How to make this logic using the service?

[@zangzang4364]

thanks for the video, but i cant use Reactive Form with this

[@MonsterlessonsAcademy]

You are welcome!

[@imarveldesignsolutions9428]

Can you have a custom component inside an ng-template?
For example:
,
I have followed this video and everything works great, but when i add a custom component it doesn't show, but it does if i use normal html.

[@MonsterlessonsAcademy]

Works for me
This is our custom modal content

[@imarveldesignsolutions9428]

@@MonsterlessonsAcademy Thanks for getting back to me. I created an Input component, and added it to the ng-template of that modal, but it doesn't seem to be working.

[@imarveldesignsolutions9428]

@@MonsterlessonsAcademy Hi. I have just done a Foo component and that is working, but just doesn't seem to be working with my custom Input component:
I can see that there is a label and input tag in the console, but nothing is being sent over.

[@_Greenflag_]

@@imarveldesignsolutions9428 @MonsterlessonsAcademy ahah, I think I found the bug. You should not pass 'null' to the createEmbeddedView, because the content will not be projected correctly. Use a modern approach with a ViewContainerRef and project vcr.createEmbeddedView(content);. If you use null and project a mat-icon in your ng-template (or any other 'dependancies' it will not work)

[@pietrocurcio964]

@@imarveldesignsolutions9428 Hi! Did you manage to solve this porblem? I need help passing custom components to it

[@neon_342]

#monsterlessons component factory resolver is deprecated, can you suggest method which works i mean a quickfix please asap

[@MonsterlessonsAcademy]

Note: since v13, dynamic component creation via ViewContainerRef.createComponent does not require resolving component factory: component class can be used directly.
angular.io/api/core/ComponentFactoryResolver

[@neon_342]

#monsterlessons am struggling to fix it in your project. Can you help me out to implement it there only ?

[@_Greenflag_]

The place where you call it :
@ViewChild('view', { static: true, read: ViewContainerRef })
vcr!: ViewContainerRef;
openModal(modalTemplate: TemplateRef) {
this.modalService.open(this.vcr, modalTemplate, {
title: 'Editer',
});
}
The Service :
export class ModalService {
constructor(private injector: Injector, private cdr: ApplicationRef) {}
open(
vcr: ViewContainerRef,
content: TemplateRef,
options?: { title?: string }
) {
vcr.clear();
const innerContent = content.createEmbeddedView(null);
const newComponentRef = vcr.createComponent(ModalComponent, {
injector: this.injector,
projectableNodes: [innerContent.rootNodes],
});
newComponentRef.instance.title = options?.title;
this.cdr.tick();
}
}

[@claudiotorres9138]

where do we define what goes inside ng-content?

[@MonsterlessonsAcademy]

Inside the call of the modal in html

[@skidrow7930]

как закрывать модалку с помощью кнопки которая находится в ngcontent?

[@RazDva-lg4is]

ComponentFactoryResolver and other staff are already deprecated

[@kflo411]

Moh-dal. Like total.

[@sergeydiachenko1429]

WTF? ComponentFactoryResolver is deprecated

[@MonsterlessonsAcademy]

You can check documentation and update your code accordingly. Videos content gets outdated with time.

[@sergeydiachenko1429]

@@MonsterlessonsAcademy this means that your video is already outdated.

[@user-td8eh3fu5w]

1st!

[@testblh]

2nd!!😉

[@himanshubansal6425]

You do not unsubscribe events

[@MonsterlessonsAcademy]

You don't need to unsubscribe from outputs as they are not a custom subscribe.