Customization with Personalization in Angular

Customization and Personalization are critical components to providing an enriching user experience for any modern web/mobile application(s). Intent of this first post of the series is to provide an overview on the usage of Customization with Personalization to build powerful data, UX rich Angular applications


Customization with Personalization

People often use the words customization and personalization interchangeably, actually they serve different purposes towards the common goal i.e., providing a rich experience to the user of the application.

Applications like Yahoo, Azure Portal ... supports customization by letting the user of system decide the content, layout or functionality. This approach has an advantage as it’s the user who decides how his application should serve him. At the same time, users want their applications to be smart enough to offer suggestions/recommendations based on:

  • Location
  • Preference
  • Behavior over a course of time,
  • Profile
  • Role
  • Prediction

This is where Personalization shines. This scenario is most prevalent in applications like Amazon, eBay, Hulu, Netflix... Predictive Content Personalization based on machine learning algorithms, pattern matching are becoming increasingly popular & would soon become indispensable for all the applications

We could build powerful, experience rich and smart applications by combining these two concepts. Let’s discuss about a simple use case to support ‘Role’ based personalization in an enterprise application


Role based Personalization

Imagine a company is in need of building its own IT Service Requests application using Angular (skipping the application stack details for simplicity) secured by Identity and Access Management (IAM) solutions such as AWS Cognito, Azure AD, Auth0, Stormpath, Keycloak.., one of the most common use cases for such a system would be :

Developer on the project would like to request for software/hardware per his needs and Manager of the project shall approve the request before it can be serviced by an IT person

At a very high level let’s list out the steps involved to implement the above use case:

  • Selected Identity & Access Management (IAM) solution provider shall have two composite roles configured - one for Developer and one for Manager
  • Angular shall present different view/content based on the user’s role
  • If the user logged into the application is a Developer, he should only be able to request for a resource and shall not be able to view the approval process
  • If the user logged into the application is a Manager, he should have access to request for a resource (of course for his needs) and shall also be able to view and initiate the approval workflow

When we design and implement the application by using the above concepts, we could easily achieve role based personalization that would present:

  • Content based on user’s role/access level
  • Experience customized (without any inputs) per user
  • Recommendations based on the role


We did a quick overview of customization , Personalization and their importance in applications , it' just the tip of the iceberg though

We'll dive deeper into Angular design and implementation details to achieve customization with different personalization options in the upcoming blog posts , STAY TUNED

Phani Kiran Donthi C is a Solutions Architect at Kinect Consulting. Phani specializes in enterprise application architecture, design and implementation involving Angular, .NET, Node, Express,TypeScript, NativeScript, Azure and AWS
[email protected]