This method instantiate a component and add it to the viewContainerRef ( entry).
#Angular popup window how to
The question here is how to create a modal component, and add it to the modal container ? 😳Įntry ( viewContainerRef ) has a magic method called, createComponent. ViewContainerRef represents a container where one or more views can be attached to a component. OpenModal method will receive 3 parameters:Įntry: which is the modal container (where the modal is going to appear) of type viewContainerRef. it is responsible for sending events to the component holding the modal. Our service will hold 2 private attributes:ĬomponentRef : which keeps track of the modal created.ĬomponentSubscriber : which is a subject returned after the modal created. OpenModal : which is responsible for creating modal and add it to a specific component (hosting component).ĬloseModal : which is responsible for destroying modal, after the user clicks on the close button.Ĭonfirm : which is the event triggered when the user clicks on confirm button, it emits "confirm" to hosting component. NB: At the end of each section, you find the code associated with. Modal service, Modal component, Home component interaction overview It does not know anything about the modal. Hosting component contains a reference to where the modal is going to appear and listen to modalService events. Modal component containing modal information ( body, title, buttons ) and, it sends events to modalService ( confirm/ close ).
Modal service which is responsible for creating/destroying modal. To build this modal we need 3 main elements In this quick tutorial, we will try to build a custom reusable modal with angular, which makes it easy to maintain and reuse.
As you may notice, modal interaction is a great choice since it offers a nice user experience. Modal is simply an interactive window that hides the principal page to provide the user options according to his action.įor example, given a list of items with a delete button for each row, when the user clicks the delete button, a modal appears requiring the user to either confirm his choice (delete item) or close the modal.
0 kommentar(er)
