Build Angular Modal Without Libs - Angular Dynamic Component

Learn how to create Angular modal without any libraries. As we want to render our modal in body we must learn how to create Angular dynamic component on the fly.

🛠 Need a video editor?

📌 Social

📚 References

🕒 TIMESTAMPS
0:00 Introduction
1:02 Initial project
1:49 Angular modal architecture
2:11 Angular dynamic component
4:46 Modal service
9:28 Outputs for modal

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[MonsterlessonsAcademy]

🚀 Want to become a senior developer?
My Bootcamp gives you a clear path from mid to senior — practical, structured, and no fluff.

[ytamb]

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.

[EduardoMartinez-dmpp]

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

[MolotovClipes]

Wowww, insane tutorial! Thanks a lot.

[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?

[aleph_fenix]

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.

[rahultej]

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

[oladipogeorge]

Hello. Me again. How do you send dynamic data through the modal? Hardcoded content shows:

<ng-template #modalTemplate>
<p>TEST</p>
</ng-template>

But if I try and send dynamic data from the component, it doesn't show:

<ng-template #modalTemplate>
<p>{{ heading }}</p>
</ng-template>

Would really appreciate your help.

[anirbandas]

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

[claudiotorres]

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

[donachou]

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

[kolan]

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

[howdy_suraj]

How can we implement it without using deprecated stuff

[tmsmiffs]

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

[vivinbro]

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 ?

[sameerdas]

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

[claudiotorres]

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?

[RazDva-lgis]

ComponentFactoryResolver and other staff are already deprecated

[zangzang]

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

[skidrow]

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