How to create structural directive in Angular to manage permission based display.

hey guys and welcome to this brand new episode on angular in today's video we are going to look at how to create a structural directory consider this particular application i am showing a list of projects along with that there are some buttons to either edit a project or to view the project now assume a scenario wherein i want to control the display of the edit button based upon certain condition let's assume that if a user has a specific role only in that case he is supposed to edit this particular project otherwise you can only view the project contents let's see how we can achieve this requirement using the angular structure derivative so i'm inside visual studio code and i created a directive using the angular cli command right now you'll see that there are no contents inside it let's go ahead and start implementing our logic so i'm going to first begin with the input i'm going to name this input as app permission then i'm going to name the variable as role to check the type of this variable is going to be string and inside the constructor we require certain dependencies so the very first dependency is the element ref this is the element reference on which we are going to apply the derivative then we will require another special service called as template ref the variable name is template ref the type is template ref and the generic type is any the next thing that we require is the view container the type of this is view container ref and finally since i am using key clock as a service to manage the user permissions user roles i am going to also include that as a service okay so key clock service okay i need to rename the variable that's fine so i imported all the required dependencies so inside ng on in it i'm going to apply my logic so let's go ahead and create a variable as is role valid and i'm going to query it against a key clock service so key clock has a very handy method called as is user in role and to this we are going to pass our role to check variable so if this variable is true only in that case we are going to render the component to which we have attached the directive so i'll say if is roll valid then in that case we're supposed to call a method on the view container the method name is create embedded view and we need to pass the reference of the template that we have else we need to ensure that if it has already created any container and it has any components inside that we are going to just clear that okay let me format the code and i will just save it now now we need to apply this particular directive on our component so i'll just go back to a file called as projectlistcomponent.html now this has a layout for our screen let me put a star over there this is very much required for the structural directive and inside this i am going to pass a value as project editor so only if this project editor rule is allocated to a user then in that case the edit button will be visible i will save this and now if i just go back to our chrome browser we will see that the edit button is now not getting displayed only the view button is there so let's go ahead and assign a role of project editor to our user so i'll just go back to the key clock admin console and this is the user which i used to log in and click on this username i'll go to role mapping and then i have a role called as project editor i will just assign that role now if i'll just go back to our application and refresh the screen you will see that the edit button is getting visible let's go ahead and just remove the role again just to cross verify whether it is working properly let's refresh it the edit button is gone this looks pretty fantastic now let me just go back to the visual studio code you will see that instead of manipulating the css properties we are actually making use of view container now this is a preferred way because manipulating a css property can introduce a security loophole users may use browser tools and they can easily play with your application that's all for today's video i'll see you soon in the next video till then take care and build something

Channel: CarbonRider

Views: 728

Rating: 5 out of 5

Keywords: Angular, Directive, Keycloak

Id: GIjmJneoypw

Length: 4min 51sec (291 seconds)

Published: Thu Oct 22 2020