How to assign dynamically components/fields permis

I am working on an Angular 7 project and developing a role/permission management dashboard where a super-admin can assign and manage rolesx and their permissions respectively by clicking the check boxes. What I was specifically tasked to do is implement something similar to what is implemented in VtigerCRM

So when the super user assigns permission, the user should be assigned access to that particular component and/or that particular field in the component. I'm wondering is there a way to manage roles and their permissions dynamically from an UI like Angular? If yes, how do we do it? Or any links that relates this would be of great help !!

I did a quick bit of Googling and found these 2 projects which may be interesting:

ngx-permissions
Akita

I am not affiliated with either.

That said, there is a bigger question you want to ask yourself: is there any logic to the roles and permissions? In other words, do you want to have to manually assign permissions to roles / users or could you possibly write a policy that would determine what users can do based on attributes?

If so, you need to look into Attribute-Based Access Control (abac) which will simplify your authorization management. Rather than creating hundreds of roles and thousands of permissions which you then need to manually assign to users (and do the governance thereof - i.e. recertify, remove...), you could just create policies along the lines of:

An assistant can create a report if...

The language to write these policies is called ALFA, the abbreviated language for authorization. It's a standard by OASIS. It gets converted to XACML which you can then feed to an authorization service e.g. AuthZForce (open source) or Axiomatics (commercial).

I hope this helps a little.