Angular Material

Info

In the beta version (7.0v14_UI) of the Sunbird-Ed portal, we implemented Sunbird Ed Angular Material to enhance the user interface and improve the overall user experience. Despite the availability of several major Angular Material versions, including the latest v16.2.3, we chose to utilize version 14 for the Sunbird-Ed portal. Here are the key updates:

Angular Material Integration:

In Sunbird-Ed portal's beta version (release-7.0.0), we've embraced Angular Material, modernizing the user interface. This integration brings a polished and unified look to our design.

Theming with Angular Material:

We've leveraged Angular Material's theming system to customize the portal's appearance, ensuring it can adapt to different branding needs.

Semantic Components to Material Components Transition:

To modernize the portal, we've replaced Semantic UI components with Angular Material elements, creating a more consistent user experience.

Enhanced User Experience:

The integration of Angular Material, theming capabilities, and component replacement enhances user experience, offering improved consistency, responsiveness, and accessibility.

Pre-built theme

Angular Material provides four pre-built themes, each showcasing unique color palettes. This simplifies the process of switching between them, as demonstrated by the sample theme screenshots presented below.

1. Deep Purple & Amber

2. Indigo & Pink

3. Pink & Blue-grey

4. Purple & Green

Custom Themes

You can tailor the theme of your Angular application using Angular Material by utilizing Angular's theming and styling capabilities in combination with CSS.

1. Joy Theme

To gain further insights into crafting and implementing custom themes, please follow these steps to explore details on creating and applying colors during the customization process.