Angular ngContainer vs Angular ng Template vs Angular ngContent vs Angular ngTemplateOutlet

in this video you will learn four super important things inside angular and i am talking here about ng template ng container ng content and in g template outlet [Music] first of all let's look on the usage of ng template let's say that we want to render an article inside a div and typically we will write here div class for example article and inside this div we want to render our article dot title but our article is not always there this is where here we want to write in g if and here will be check for our article that it is there else loading at this point we will get an error inside console that property article does not exist inside app component so we must create it here and let's say that our article is by default now and it can be either an object with field title string or it can be now now we are getting another error inside console property loading does not exist on type f component and actually at this moment we will create ng template so we are writing just attack here in g template and we must close it now inside this ng template we will put a hash loading and this is exactly this reference between our ng if else loading and the name of our ng template and what we want to do now here we can write for example a div with the loading text let's check it in browser as you can see we're getting here a loading so what is this at all this is actually not just some tag it is a directive and the main idea is that by default we're not rendering ng template at all it is just there but it does not exist it is not rendered and it is being used inside structural directives both are structural directives for example ngif just like we used here in g switch or for example in g4 now let's check that here we can render an article if it is there which actually means here we are changing it from null for example to object with title full and when we are jumping inside browser you can see here the full stream which actually means this is really a nice approach if you want to render a div and if your condition is false then you are rendering a template which is predefined inside else so the question is when you must use ng template and actually you will never use ng template on your own you will use either with predefined directives like ng4g switch or with your custom structural directive and one more important point is how angular uses this code and transpiles it at all actually this is not the code how angular is reading it actually angular generates ng template just like we wrote on the bottom but inside itself and inside this ng template we have two directives first of all it is in gif and here we are right in our article and second directive is in g if else and here inside we're providing loading which actually means here inside this directive we're providing a reference to our ng template and here we're just checking article like normal and now inside our ng template we will have here div class article where closing here our div and we're rendering here our article.title and actually if we will reload the page you can see that it is working exactly the same but this is how our code within gif is working under the hood and in g-template is a really nice approach but a lot of people don't like to use it because sometimes it is much simpler to write here div class article and we're just checking here ng if article so if we have an article then we render inside this article.title and we have just another case with steve for our loading let's say here we have our div we have loading text inside and here we can simply add our ng if not article in this case we're showing login let's check this out it is working exactly the same and from my perspective this code is much easier to read now it is time to talk about ngcontainer so why do we need it at all sometimes we want to pack several directives inside one div for example here we have div and g if and we're checking here that we have our list of articles and then we want to write here in g4 and we want to loop through these articles and this is not possible you can't use several structural directives inside one div which actually means you must create here one modif and write here first of all in gev articles and then inside you will have one more div with this in g4 and in some cases it won't work for you why is that because inside your code inside css you might have some nesting of styles and you can't really work with such nesting because in this case here we're creating two divs this is why in a lot of cases we want to avoid creating for example this additional div and then we can write here ng container and in this case this div won't be visible inside our html it will be there just inside our markup and angular won't trend it but the main idea is that we can attach these directives inside ngcontainer and now our code can look like this for example we have in gf with ngcontainer and then inside for example we can use one more ngcontainer and write here in g4 directive and let's say that here we want to loop through the array of numbers this is why here we must close our ng container and let's create now our numbers inside component so our numbers will be just an array 1 to 3. the main idea is with this markup we are not creating any dom elements at all we simply render three numbers inside so inside the container we can render our number and obviously we must change here our articles to our numbers let's reload the page we don't have any errors and here is one two three and actually what is more interesting when we will zoom our dom you can see here i have h1 and after this i have just 1 2 3 and comment for ng container because actually ng container does not render any markup at all which in this case is extremely important so when you should use ngcontainer when you have a case that you want to avoid creating additional dom nodes our next directive is in g content and actually we are using content only with child components so here i have an app component and i created already a component child as you can see inside i don't have any markup except fng content and here is my child component yes which is completely empty which actually means this is just a component where inside our html we have ng content and the main idea is that now inside our parent we can render this component app child and here we're closing app child and if we will write it like this it won't render anything on the screen at all because actually inside we just rendered ngcontent and inside ngcontent we're rendering everything which we will provide inside this app child inside parent which actually means here we can write our div and here we want to render for example article dot title in this case here this is the whole markup that we will pack inside our app child as you can see in browser now we are getting an error object as possibly now so we need to put here a question mark and as you can see now it is working we rendered full stream which actually means the whole markup inside our parent will be rendered inside child and it is really needed when you want to write some markup inside your child component but you also want to provide some markup from the parent and last but not least is in g template outlet and why do we need it at all for this i want to uncomment ng template loading and actually here now i want to write loading template just to understand that this is a reference for the template what we want to do now we want to use our ng container and now inside we want to provide a directive in g template outlet now here let's close our ng container and inside this ng template outlet we can provide our loading template which actually means this is the way to run the ng template inside our html just like normal element without using for example ngev or ng4 as you can see here inside browser we successfully rendered our loading component which actually means here we have ngcontainer and we're not creating additional dom node and now inside we're rendering this loading template through ng template outlet which actually means we're using it when we must render a template but it is not all we also can provide properties inside our template let's say here that we want to create a new template to render an article so here let's name this template article template and here now we can write let and for example article equals article and you might ask okay but what is this notation actually this is how we're passing properties to the template now here inside our div we can render our article dot title which actually means our ng template is waiting for the property article and now here we have normal access to article property but don't forget that you must write here let and dash now how we will use this template here instead of loading template i want to write article template after this i want to put semicolon and write context equals and here for example we can provide an object with field article while we are writing it like this because actually inside context we must provide an object and it makes a lot of sense to write for example article as a property inside the subject in this case later we can add more and more properties and now this whole context is available inside this template and we can get properties of this context with let article for example and this is this property that we provided inside context let's reload the page and as you can see here foo is rendered but as you can see here we have just ng template outlet we are not rendering full this is the code which is working this is just stranding of the template with providing our article inside and actually if you are interested to learn how animations are working inside angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 19,742

Keywords: ngcontainer, angular ngcontainer, ngtemplate, angular ng template, ng template, ngTemplateOutlet, angular ngTemplateOutlet, ngcontent, angular ngcontent

Id: Sd9aAVL3Uk8

Length: 10min 52sec (652 seconds)

Published: Tue Jun 21 2022