Materialise your Angular App

As much as I love Angular, I also recognize that there are a few things that could make your Angular App look even more stunning without much effort! So, let’s go ahead and change your life in about 5 minutes by getting productive with Material Design using Angular Material in your Angular CLI app.

So, What Exactly is Angular Material?

Angular Material Design is a design language for web and mobile apps which was developed by Google in 2014. Material Design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with and also you’ll get a well-organized format along with the flexibility to express your brand and style. For an example of Material Design, check out Airbnb, Gmail, and Houzz. These apps make the best use of Material Design to fit its many features into the limited mobile device. Going through the official Material design documentation is quite an experience. I recommend taking a look at the docs, but I will summarize it here.

Setup the Environment for Angular

To work with Angular, you will need Node.js and Angular CLI (Command Line Interface) installed in your development environment. Proceeding further, you can use the following command to set up a new Angular project.

ng new angular-material-app

Step 1: Install Angular Material and Cdk

Head over to your terminal, navigate inside your created Angular front-end application and then run the following commands to install Angular Material 6 and Angular 6 CDK.

npm install --save @angular/material @angular/cdk

Step 2: Install Angular Animations

In order to add enable support for animations in your Angular 6 front-end application, head back to your terminal and run the following command to install the Angular animations module and import the BrowserAnimationsModule and add it to the list of imports.

npm install --save @angular/animations

Step 3: Angular Material Theme

Angular Material comes prepackaged with several pre-built theme CSS files. To configure the basic theme, open the src/styles.css file and import any one of the available themes in Material Themes.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Step 4: Angular Material Gesture

Some components like Slide Toggle, Slider, and Tooltip rely on a library called HammerJS to capture touch gestures. So, you will need to install HammerJS and import it into our application.

npm install --save hammerjs

Step 5: Angular Material Icons (Optional)

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html. For more information on using Material Icons, check out the Material icons guide.

<link href="" rel="stylesheet">

And yeah, Now you are good to go!

Note:  You can create an app-material module file for importing the angular material components and export them wherever necessary! Let’s write clean code and be a Better programmer!

What Will You Build with Angular Material?

After setting up the project structure and some dependencies, you will be able to start developing apps. You could try out some examples with the built-in components that are provided in Material docs. In this blog, to know about Angular material implementation, we will be implementing it with some small examples that play a major role in any webpage! The idea of this blog is to show how cool and easy it is to use Angular Material.

Example 1: Layout

The most widely used layout is cards. The most basic card needs only an <mat-card> element with some content. However, Angular Material provides a number of preset sections that you can use inside of an <mat-card>. For now, just copy the following code into your HTML file and you could witness a card display!

<mat-card> Simple Card</mat-card>

Example 2: Navigation

Next comes the navigation part of a webpage. <mat-menu> is a floating panel containing the list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive as follows.

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
 <mat-menu #menu="matMenu">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>

Example 3: Progress Bar

    “Boredom, according to psychologists, is merely lack of stimulation,the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?”

~ Alice Kotlyarenko

Yeah! The UI progress bar will make you enjoy the wait! Angular Material made it easy to display a progress bar with customizable modes.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>


I hope this blog has helped you understand how to use the power of Material Design in your app for a top-notch UI. For more information about Material Design in Angular 6, check out the official docs which contain ready-to-use templates. It’s a great place to learn about Angular. Thus Angular Material components create a beautiful application without investing too much time thinking about styles. Awesome, right?


The Art of Chunking!!

How to make sense of any mess? 

Chunking makes content easier to comprehend and remember. It helps to understand the relationship between content elements and information hierarchy. By grouping each piece into a large whole, you can improve the amount of information you can remember. Chunking is one way to your product to stand out from the other competitors.

For example, a chunked phone number (+61–955–345–1234) is easier to remember (and scan) than a long string of un-chunked digits (9553451234).

Why chunking is important in UX?

Chunking Content in UX: Why chunking is important in UX?

Chunking is a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and easily remember within a quick span.

Presenting content in chunks makes scanning easier for the user and can improve their ability to comprehend and remember it. In practice, chunking is about creating meaningful, visually distinct content units that make sense in the context of the larger whole.


Key info is chunked to give clarity about the company.

Simply chunking your text isn’t enough — you also need to support scanning by making it easy to quickly identify the main points of the chunks. Some of the most commonly used methods of chunking text content are:

  1. Headings and subheadings that clearly contrast with the rest of the text (bolder, larger, etc.)
  2. Highlighted keywords (bold, italic, etc.)
  3. Bulleted or numbered lists
  4. A short summary paragraph for longer sections of text, such as articles
  5. Short paragraphs, with white space to separate them
  6. Short text lines of text (around 50–75 characters)
  7. Clear visual hierarchies with related items grouped together
  8. Distinct groupings in strings of letters or numbers such as passwords, license keys, credit card or account numbers, phone numbers, and dates (for example, 14487324534 vs 1 (448) 732 4534)


The contents are chunked with an illustration to give clear visual hierarchy!

The Mythical Number Seven:

Magical number seven,’ made famous by cognitive psychologist George Miller. In 1956, Miller found that most people can remember about 7 chunks of information in their short-term memory. People could remember 7 individual letters, or 28 letters if they were grouped into 7 four-letter words in a meaningful way. Designers often misunderstand the concept of Mythical Number Seven.

It doesn’t mean to give the things not more than seven to the user. Even they can still find easy to use with more than seven things at the given time.


Chunked infographics draw attention to the passed value here.

For UX professional, the real takeaway from Miller’s is that people with short-term memory are limited. So, if you want the people to remember more information just group them into Chunks.



Presenting content in chunks makes scanning easier for the users and can improve their ability to comprehend and remember it.