Control webpage functionality such as buttons and text fields

Hello, I need some help. We have an angular front end and want to use keycloak to secure users access to pages relevant to their roles. For example admin and guest. Admin can access al pages whilst guest can only see 2 pages. I know I can do this with the authorisation setting and open I’d connect.

Assigning a resource and scopes and roles I believe will enable me to do this.

The second objective is to control based on user role i.e admin / guest what functionality they can perform on the webpage (webpage calls graphql apis).

For example admin user can view users details they can edit, ( edit button), delete (delete button) user details. However a guest user can only view users (view button)

How do I do this with Keycloak? my buttons on the webpage have ids but I can’t find a way of controlling this on keycloak we also want to disable buttons so the guest user can only see one button and the rest can be greyed out so the buttons are disabled.

I also have the same requirement but for text fields I.e guest cannot see sensitive data such as dob so this text field should be disabled.

Can you please help me understand if I can achieve this in keycloak and how to do this