24. Understand View Encapsulation in Angular. Difference between Emulated, None, and Shadow Dom.

hi friends this is leela so if you are coming first time to this video please subscribe to my channel so that i will be posting all the new front-end topics and also the front-end courses in this channel now coming to this video in the previous video we have seen about communication between the components so sending data to the child components and also getting data from the child components we are seeing so the concept input output concept is the important uh concept for the communication of the components and also in this angular so you will be having another another methods also so this is also one of the important method input output uh thing using communication between the components in the angular now in this video what we will try to do is i try to see the styling of these components so styling of this components means for example here this add user this is an h3 and this uses list this is also an h3 now where we are having this h3 so for example here if you go to h3 so here in in this users.html i am having this h3 as a user's list and if i go to this add user.com.html i am having here the h3 component so each h3 each header is different in different components it is placing now what i want to do is i want to color this header h3 h3 element into red color so what can i do for example if i go to user's component.html yeah okay fine what i will try to do is so i will go to the css and i will try to do h3 as color red this is fine so that means i have i have written something like for every header which is for every h3 element so which is h3 element present in the web page please apply the color rate so this is the meaning of this one now if i go here and if i check surprisingly if you see here what it is happening is here you are getting red color for only the element which is present in the users.html only so that means the users users.css for in which we have written so for this one only it has applied the color red but if you go to add user component so it has not applied the color rate why you can also you can tell that why it has not applied means this is a separate component and this is of different component uh that is the reason you have written only the h3 color red in the only the user's component.css so this uses component.css will be applicable only to this users.com.html so that is the reason for this only user's list h3 element the color it is applied but here it is not applied you can say yeah it is it is one side it is correct only but according to the styling and css principles and all those things so you have written here browser principle and all those things you have an h3 color red means h3 wherever it is present in the webpage it has to apply the color rate so what is restricting for the from this applying color rate to the h3 element what is restricting is so angular default browser what it will do is it will apply color red to the whole h3 element but angular uses a special technique something like shadow dom property okay so what it will do is so for example if you see the component here approved component or otherwise if you go here app users component now if you go inside this app user's component here you see h3 this is the h3 where the color red is applying if you see this h3 a a new attribute has been added here ng content hyphen rsm iphone c42 will be able to see this attribute and now i have written only h3 as color rate but what angular has did is h3 which is having of attribute that rsm c42 of which is having that attribute of h3 only applied to that element color rate so angular enforces and the angle changes this dom so that it will apply attribute and it will enforces that one to apply only to that component only for example if you go inside this app life and addifon user here you are having rsm iphone c40 here you are having c42 okay you are having c40 so for that is the reason why h3 is not applying color rate so if you see angular angular what it will do is uh it will apply for every component it will apply unique attribute for example app if an addif and user is the right so for this component it will apply unit component to all the elements in the in that component so for example if you see for this view it has added a rsmc40 for h3 rsm rsmc40 so for every element in this component which is present in this app iphone iphone user only it has applied a unique unique attribute and if you go to here in this app users it has applied ngrsm c42 c42 okay it has applied one unique identifier so it will apply one unique identifier to all the components in the to all the elements in the in that particular component so that is the reason what it will do is so for every class forever for every component css it is having it will automatically changes these all css to applied to that unique id only in that component so that is the reason h3 is applying only to this component okay now what is the reason is so actual actual element and all those things actual dom and all those things it will be having behind angler so angular creates a shadow dom behind that behind the thing so modern browsers and all those things are so these are the things so shadow dom is not supported so that is the reason it creates a shadow shadow dom at the back side and it will show i will add an attribute like this and it will show it here like this in the top okay this is the reason how it will do this one so is there an option for this one to override yes we have an option to override this type of behavior angular's default behavior is this one adding and adding a unique identifier to each and every attribute in that component so that styles will be applied to only to that component only if you want to override that one means so what we can do is we can go here and here i in the user.com.css i have applied h3 color red right so now what i will try to do is here i will try to change this one so encapsulation okay you can see here encapsulation encapsulation is equal to so view encapsulation you can write here view encapsulation that means please remove that encapsulation so it it is encapsulating it is hiding the data it is hiding the data so it is hiding the data to be used to only to that to the thing only so it will it will hide the data to the other components it will not show the data to other components so that it will not apply all the properties analysis to the other component so now what i am doing is so you can capture is i am i am dreaming that one so here you will be having three options okay here you are having none and shadowed up and another one also you will be having pure encapsulation dot you will be having another one something like emulated so that one is a different behavior okay you will be having emulated okay you are having an emulator right so this one is a default via emulated means it will apply each and unique identifier if you don't want to apply means you will apply none so as soon as you apply none here at the very first time if you see here so if i refresh so again this add user also via red color has been applied so now if you see here you go inspect element here here here surprisingly you see the unique identifier has been removed for this user's component remember for this user's comment for this add iphone user so nothing is remote attributes is there like that only okay now here h3 and here also surprisingly if you see here h3 directly it came like that okay without having attribute thing so that is the reason for this if it is having attribute also if it is having attribute also it is directly applying why because h3 that element is matching so it is it is keeping the the unique attribute so that is the reason for this h3 also and for this h3 also it is applying okay here user is applying the red color so this is how we can remove the encapsulation behavior that styles applying only to that company we can remove the behavior of that one uh styles thing so this might be you'll be using not all the places so it is one of the feature available this one so i am telling you if you want to apply total for your total component all this it means you can write it in the global styles.css you'll be having here in the global you will be having here styles.css you can apply here robust stressors here so that that style.cs will be applied everywhere but here if you want to oh if you want to remove that behavior of that unique attribute and all those things encapsulation behavior you can use this uh whatever what i can say very certain yeah encapsulation view encapsulation dot none so the default one is emulated okay emulated means now if you mention this simulated also if you don't mention emulated also it's the same default here is that one only and shadow dom is nothing but it will apply this one to the shadow dump okay so the starter dom doesn't support by the browsers and all the things we will be not using same as this simulated only if you want to use the shadow dom it is uh it is better to use the emulated the same thing does the shadow dome also lands as the emulator only so none is the main thing so if you want to remove that one you can use the none so this is the view encapsulation in the angular so for removing the style signal to apply only for the components if you want to remove the type of behavior you can use this encapsulation okay encapsulation that none you can add like this or otherwise i can use emulated if you mention this one you don't mention this one in the same okay so if you have any doubts or any sections please post the comments below to this video and if you like this video don't forget to subscribe to my channel thank you

Channel: Leela Web Dev

Views: 5,122

Rating: 4.5882354 out of 5

Keywords: angular, angular encapsulation, angular encapsulation viewencapsulation, angular encapsulation shadow dom, shadow dom, angular 4, angular 4 tutorial

Id: bUITojTRMnM

Length: 10min 3sec (603 seconds)

Published: Sun Aug 30 2020