Top Angular Material frequently asked interview questions.

In this post we will look at Angular Material Interview questions. Examples are provided with explanations.

1. What is Angular Material?
2. What are some features of Angular Material?
3. How can we use Angular Material?
4. What are the types of Buttons in Angular Material?
5. What are Angular Material Layout Directive?
6. What is Angular Material Menu?
7. How do we apply a directive conditionally?
8. How can we set default option in mat-select?
9. How can we add icon to mat-icon-button?
10. How can we set the color of an icon in Angular Material?

What is Angular Material?

Angular Material is a library for all Angular JS Developers. It helps in Constructing, Consistent, and Functional Web pages and Apps through adhering to modern web design principles such as browser portability, graceful degradation, and device independence,

What are some features of Angular Material?

Some of the features of Angular Material are as follows:

• It includes features such as Cards, Toolbar, Speed Dial, Side Nav, Swipe, etc.
• It has Standard CSS with the minimal footprint.
• It has inbuilt designing.
• Has cross-browser, which will be used in creating reusable Web Components.
• It include new versions of Interface Control like Buttons, Check Boxes, and Text Fields.

How can we use Angular Material?

There are 2 ways for using Angular Material:



Local Installation - We can download all the material libraries by using jspm, npm and include it in our HTML Code.
CDN Based Version - We can put all js files in our HTML Code from Content Delivery Network.

What are the types of Buttons in Angular Material?

Types of Buttons in Angular Material are as follows:
Basic Buttons
Raised Buttons
Stroked Buttons
Flat Buttons
Icon Buttons
Fab Buttons
Mini Fab Buttons

What are Angular Material Layout Directive?

Angular Material Layout Directive' assignable values are as follows:
Rows - items which are placed horizontally with max width.
Columns - items that are placed vertically with max width.

What is Angular Material Menu?

Angular Material Menu helps in displaying options within the context of the actions which are performed. It contains 2 elements:
Trigger Element - used for triggering elements.
md-menu-content - helps in representing the content of the menu.

How do we apply a directive conditionally?

We can apply a directive conditionally by adding md-raised-button and also by using the following command:

<button md-raised-button="true"></button>

How can we set default option in mat-select?

We can set default option in mat-select by using the following command:

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

How can we add icon to mat-icon-button?

We can add icon to mat-icon-button by using the following command:

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

How can we set the color of an icon in Angular Material?

We can set the color of an icon by using the following command given below:

.white-icon {
    color: white;
}
/* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
.white-icon svg {
    fill: white;
}

See Also
Spring Boot Interview Questions
Apache Camel Interview Questions
Drools Interview Questions
Java 8 Interview Questions
Enterprise Service Bus- ESB Interview Questions.
JBoss Fuse Interview Questions
Angular 2 Interview Questions