Це відео не доступне.
Перепрошуємо.
Build Angular Modal Without Libs - Angular Dynamic Component
Вставка
- Опубліковано 26 лип 2024
- 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.
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
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...
Monsterlessons rocks!! 💪
Thank you!
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.
Glad to hear that!
Wowww, insane tutorial! Thanks a lot.
Glad you liked it!
Great Content, Thanks
Glad to hear that!
MonsterLessons👍
Thanks!
This video is highly recommended
Thank you!
Thank you, great work. Why dint you cinsider to detach the modal component when closed
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.
Thanks!
@@MonsterlessonsAcademy You are most welcome!
You've been saving my ass for the past 6 months at my job hahahaha thank you so much dear friend!
Glad to hear that!
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?
Thank you! No I'm not.
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.
Deep understanding of Angular
Thank you!
@@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?
seems formcontrol bindings and dynamic data in the ng template that is to be put in the body is not working
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 ?
Hi, here is my video about Vim ua-cam.com/video/YrLiugDhCuk/v-deo.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
Very nice! If your modal content is a form, how would you generically handle the submit with the modal's confirm button?
Just pass data outside when modal is submitted
how do it?@@MonsterlessonsAcademy
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
We provide inside a template. You can render whatever inside it.
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?
You can tune the code like you need
hello great video please i would like to know how to implement this modal open with componentRef instead of templateRef
The vidoe about it is coming soon. Stay tuned.
1st!
Please make a video on Angular "module" vs "library".
Thank you for the idea. I will add it to the list.
In open(content: TemplateRef) if i need pass a component, how i get rootNodes to this case ?
If you want to pass a comp inside you need to tune it for your needs. You can find some examples in internet.
@@MonsterlessonsAcademy thanks, i got
it shows ComponentFactoryResolver as deprecated in import, can you tell me how to use it the actual way please?
I didn't try the newer variant but it looks like this is the correct usage
const component = this.viewContainerRef.createComponent(YourElement);
@@MonsterlessonsAcademyBut, you can't use viewContainerRef inside a service class
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.
Works for me
This is our custom modal content
@@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.
@@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.
@@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)
@@imarveldesignsolutions9428 Hi! Did you manage to solve this porblem? I need help passing custom components to it
как закрывать модалку с помощью кнопки которая находится в ngcontent?
How can we implement it without using deprecated stuff
You can check documentation and update your code accordingly. Videos content gets outdated with time.
2nd!!😉
where do we define what goes inside ng-content?
Inside the call of the modal in html
#monsterlessons component factory resolver is deprecated, can you suggest method which works i mean a quickfix please asap
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
#monsterlessons am struggling to fix it in your project. Can you help me out to implement it there only ?
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();
}
}
But componentFactoryResolver is deprecated. How can we achieve the same without it?
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
@@MonsterlessonsAcademy you can't use ViewContainerRef inside Service class. How to make this logic using the service?
ComponentFactoryResolver and other staff are already deprecated
Moh-dal. Like total.
You do not unsubscribe events
You don't need to unsubscribe from outputs as they are not a custom subscribe.
WTF? ComponentFactoryResolver is deprecated
You can check documentation and update your code accordingly. Videos content gets outdated with time.
@@MonsterlessonsAcademy this means that your video is already outdated.