Material Theme with Angular 7 – Change primary and accent color

Standard

One of the strongest feature of Angular Framework lies in the structured approach for application development. Directives, components, modules, services, styles etc promote reusable component development. On top of that, with the Theme driven development, it is possible to customize the application appearance – Material Design. This indicates a strong architecture concept of segregating application behavior from the appearance.

Continue reading

Setting up Material Design with Angular 6

Standard

Material Design started in 2014 and it was introduced by Google to provide a consistent look and feel across browsers. It combines animation effects with soothing colors, shadows, aptly measured margins/padding etc to improve the User experience. Back in the era of Flash/Flex, components designed using Flex has a visual appearance which felt natural. Without any need of adding styles, the plain Flex User Interface felt good. HTML components were lacking such natural appearance. Maintaining consistency across the browser was always a pain. With Material Design the UI aesthetics and interaction has improved dramatically.

Though Angular CLI enables you to quickly get started with creating a new project, it doesn’t come bundled with the Material design. Additional steps are required to integrate the Material Design and apply the styling to the components. In this article, we will learn the steps to integrate Material Design in Angular 6. We will extend this article and build following UI to understand some of the Material Design Components.
Continue reading