Build Angular Modal Without Libs - Angular Dynamic Component

in this video you will learn how to implement a model inside angular without any additional libraries [Music] and actually just from the beginning I want to tell you if you just need a library and the model you can take for example NGB bootstrap for angular and here is the really nice model that I used in a lot of projects or you can take a model from angular material both are perfectly fine but if you want to build something yourself which you understand completely and can support better then here you will learn it and the main problem with the models is that we want to render them inside body why inside body because if you will render a model just directly inside your component it might be that you have overflow hidden or difference at index and this model just won't work it will be cutted and then you won't see the whole model this is why if you want to create really reusable model you must Trend it inside body and it is not that trivial to do it inside angular now let's look on the project that I prepared as you can see here is generated project I don't have anything inside app component except of this button open model and here a completely empty app component additionally I created a model module but it is also completely empty here we have just a component and let's look on it inside HTML we have just a plain markup of model model header with close button model content model footer and model backdrop but this is just an HTML markup without any angular logic additionally I have model component CSS with quite a lot of CSS for our model and you can take all this Source codes from the description box below and our TS file is completely empty now let's look how we want to use our model so we want to be able to open it from any place and in order to do that we want to use a service and the main problem here is that inside body of our model we want to render a custom template this is the feature that you need in almost every model this is not just a text but some markup with different components this is by here inside our app component HTML we have a button and we want to make a click event on it so this button must open a model this is where here let's create a function open model and inside I want to provide the markup that we want to render inside our model and we must Define this markup for example here within G template and we're using here in the template because this is something which won't be rendered and we can use it for later rendering this is why here NG template with hash model template and inside we can provide whatever you want some markup components anything I just want to write here a div with text this is our custom model content and now here we can use this model template and we can provide it inside our open model function which actually means we are providing inside NG template and then we can use this in your template to render a model with this content inside now let's open our app component and create this method here it will be open model and inside by getting model template and this is a template reference of any because we don't really know what is the type of our template and what we want to do inside we want to call a model service we will have a service which we can inject anywhere and it must create faster model this is why here bubbledate this dot model service dot open and we're providing inside our model template that we created additionally here we can provide some options that might be useful for example this size of our model or a title let's define here size for example LG and also a title of our model let's say Foo but it is not all we also want to write here subscribe which actually means our function model Service open must return for us something which we can subscribe on why do we need that because we want to know when our model will be closed or submitted this is where here we have subscribe and we will get here an action and action is just a string it is either closed or submitted and here we want to console log what action it was for example model action comma action so this is the usage of our model service and this is exactly how we want to open model from any place this is extremely flexible but don't need to inject here model component at all we just create inside HTML the template that we want we provided inside openmodel and we are good to go now we must create our model service this is by inside model we're creating Services folder and here inside we have our model service dot yes and inside we must add injectable decorator and here we're experts in our class which is model service and we know that inside we have a function open and we're getting inside our content which is a 10 template reference of type any and additionally to that we can get options and actually this options property is optional this is why here is question mark and let's specify its type here we can get size but it is also optional and it is a string and we can also get a title and it is also optional and it is a stream now inside our open model the idea is to create our model component and then inject it inside body and gender additionally to that we must inject inside our component inside NG content the content that we provided here inside our open function and in order to do that we must inject several things inside our Constructor first of all here we must inject resolver and this is component Factory resolver so what we want to do here is create model component Factory and what is model component Factory it's a factory which knows how to create a model component this is why here we're calling this dot resolver dot resolve component Factory and we must provide inside our module and our module is model component after this we want to create a Content view this is where here content view reference and this is content this is what we provided inside dot create embedded View and we're providing inside now and after this we want to create our model component this is where here I will write model component and in order to do that we are using model component Factory dot create and inside our create we first of all must provide an injector and we don't have it here this is by here let's inject here our injector and this is injector now here inside create we're providing this dot injector actually this is completely fine and this is enough but we also want to provide inside NG content the content that we passed inside our open function this is why as the second parameter we must provide an array and inside it will be a Content view ref dot root nodes and actually what is content view ref this is exactly what we created from our content that we provided inside this is exactly what will inject our template inside model inside model body after this Ubuntu call detect changes this is why here model component dot host view dot detect changes and after this we want to inject this Dom element inside our body in order to do that we must access body here inside Constructor and by doing it with the word inject and we're getting here our document and this is our private variable document of type document now here after the text changes we can write this dot document dot body and here we have just a plain HTML append child and we want to provide inside our model component dot location dot native element this will attach our Dom element inside body but now we are missing several things we want somehow to provide stream and title inside our model component and as you can see here on the right I am opening model component yes and we don't have here anything so here I want to create several inputs first of all we need here an input for our size this is where here let's define the size and by default it will be empty then we need an input for our title and by default I will write here model title and now we can set them when we're creating this model component this is why here before detect changes I want to write model component dot instance and here we have access to our size and title so I want to set our size to options dot size with question mark because it is optional and also model component dot instance dot title and here we have options dot title so everything is optional here this is where getting a narrow string or undefine it is not assignable to type stream because here on the right we didn't say that they are optional I want to do this now because anyway we have a default value this is why here's size is optional and title is optional and now we're not getting any errors here we're almost done but we need some outputs for the closing and submitting this is right here on the right I want to Define our outputs so let's create an output and it will be our close event and this is just new event emitter additionally we need an output which is our submit event and this is also new event emitter now here on the left we can subscribe to this event this is by here model component dot instance and we have access to close event and we can just write here subscribe and when it happens we can do something here and what I want to do I want to call this Dot close model and this is just a function and we will create it in a second and additionally to that I want to Define not close event but submit event and hear bubble color with this dot submit model now here on the bottom I want to create close model function and submit model function but just to remind you our open function must return something where we can call subscribe this is exactly how we used our service this is why here after a pen child what I want to do I want to create a subject I want to write here this dot model Notifier and I'm assigning here new subject now I need to create this model Notifier which is a subject here on the top so before our Constructor I will Define a private model Notifier with question mark because by default it will be empty and here we are defining that this is a subject with a string inside and after we created here our new subject we want to return it with this model Notifier Dot as observable so what it does here at the end of our open what we do we're creating new subject and we return it as observable in this case we can subscribe to this subject and when this subject triggers something we will notify all our subscribers and what we want to do here we want to write some logic regarding this subject in the close and submit because in both cases we want to stop our subject this is why here inside closed model I will write this model Notifier dot complete we don't need it anymore this is why we are completing it and inside our submit model I want to write this model Notifier dot next in this case we want to pass a value inside here we want to pass for example confirm and after this Ubuntu complete it this is where this close model is enough here so in this case we will notify all subscribers that were completed and we don't need to listen to new values now let's update our Model A little bit I want to open here our HTML and on the right our model component here we have access to the size and the title and we can use them inside our markup first of all here inside our model we can add a size property in this case inside our class we will have a size and we can apply some styles for it additionally here goes title is really bad we need to render here our title that we will get from the outside or set as default additionally here we must create a click event for our cross and it will be our close also we want exactly the same click event on now a backdrop because when we're clicking outside of the model we want to close it this is why here is also close and last but not least is our submitting inside the footer here is our submit button here is our click event and we want to call a function which will be submit and as you can see the content that I was talking about that we are providing from the outside is go in here inside NG content now let's define this to functions close and submit but in order to do that we must get access to our element this is why inside our Constructor I want to get an element reference and this is our element ref now let's create first of all close here we want to return void and what we want to do we want to remove our element completely this is why here this element shaft dot native element dot remove this is just plain JavaScript to remove a Dom node after the Super bond to call close event this is why this close event emit now let's define our submit function here it returns void and what we want to do inside we want to remove an element exactly like in close and after this we want to call this submit event dot Emit and when not providing anything here so how it is working we have our model component it is rendered at some point by clicking close or submit and this emits are going back to our service just to remind you inside our service we have these subscriptions and when these events are triggered inside our component we are coming here for close and submit and we're coming here to close our Notifier now let's check if it's working I will jump back inside our app component and here is our model service we must inject it this is by Constructor and we're getting here our model service which is our model service that we just created additionally we must register our model service inside our model module this is right here inside our providers I want to register model service so once again what is happening where inside up component we injected here model service and we have our open model function we are calling here this service open and we're providing a template inside and some properties and here we have a subscribe which is exactly a subscribe for our subject to know when we're submitting our model at this moment we are coming to our model service and we're doing all this stuff to create a component inject inside its content and checked its inputs and outputs detect changes and attach it to our body let's look in browser now as you can see here I have an open model button I am clicking on it and voila we see our model here is our backdrop so we can close our model and here we have a title and this title was provided from outside here is our custom content and this can be any content we have submit button and close if I am clicking anywhere our model is just closed we are not notified about it when I am opening a model and I am clicking on submit then as you can see inside console we're getting model action confirmed in this case we know that we successfully submitted our model and actually if you are interested to know what are Standalone components inside angular and how to use them make sure to check this video also

Channel: Monsterlessons Academy

Views: 12,422

Keywords: angular modal, angular dynamic component

Id: MuHpsz7Q3P0

Length: 16min 21sec (981 seconds)

Published: Tue May 02 2023