Let's discover the latest features!

If you haven’t visited Angular Materials documentation website yet, we will take you through the new visual updates! First, the Angular team has updated the homepage, added new colourful images on the component's page, and remade the guides page, and so much more!

What’s behind these fun and vibrant images?

Annie Wang, who is one of the people behind the Angular Components project, writes that the illustrations on the Material Design components inspired them with the aesthetic abstract design that referenced each component. The initial plan was to adapt the idea for material.angular.io, however, a few obstacles and requirements stood in the way. A major issue is the absence of the dedicated illustrator on the team. As for the requirements, the Angular Team wanted to make sure that images would be compact and clearly reference each individual component, as well as easily update images when the component’s appearance changed. Thus, the Angular Team decided to take upon themselves to build what they have envisioned from scratch.

The design of the components on the Angular Components is more of a realistic view rather than an abstract representation. They created “scenes” for every component to capture them the way they would be used. A technique named “screenshot testing” now helps to efficiently capture these components. It allows to capture an image of the page of the given URL and to compare it to the expected image. With the given technique, they can automatically generate up-to-date scenes for all the 35 components.

So how did they do it?

• They have set up a route for each component which contains a “scene”
• Created an end-to-end testing environment and took screenshots of each route with protractor
• Saved the screenshots instead of comparing them to an expected image
• Loaded the screenshots from the site

This approach saves a lot of time and effort as whenever a component is going to be upgraded, all you need is to take new screenshots!

The team held a small hackathon where they could share their ideas to create the scenes. For instance, on the left - the button component, it displays all different styles and types of available buttons like FAB, icon, raised, etc. And on the right - we have the toggle component, where you can see the toggle in both states.

Here at LogicFlow are excited for the new look of Angular Components as well as all the new updates, and we are sure you will love it as well! Take a look at the new Angular Material website and let us know what you have enjoyed the most.

To read the original article from Angular Blog written by Annie Wang, click here. Hope you enjoyed our #MondayBlog on the new Angular Material features. Stay tuned for the upcoming news.