Angular Material Interview Questions & Answers

Question 1. What Is Angular Material?

Answer :

Angular Material is a UI component library for Angular JS developers. Angular Material's reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Some of its salient features are as follows:

• In-built responsive designing.
• Standard CSS with minimal footprint.
• Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
• Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on.
• Cross-browser, and can be used to create reusable web components.
• Free to use

Question 2. How To Use Angular Material?

Answer :

There are two ways to use Angular Material:

• Local Installation - You can download the Angular Material libraries using npm, jspm, or bower on your local machine and include it in your HTML code.
• CDN Based Version - You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Delivery Network (CDN).

Question 3. What Is Local Installation?

Answer :

Use following npm commands to install Angular Material libraries

npm install angular-material

npm will download the files under node_modules > angular-material folder.

Question 4. What Is Cdn Based Version?

Answer :

You can include the angular-material.css and angular-material.js files into your HTML code directly from the Content Delivery Network (CDN). Google CDN provides content for the latest version.

Question 5. What Is Angular Material Autocomplete?

Answer :

md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt drop-down to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area. can be used to provide search results from local or remote data sources.md-autocomplete caches results when performing a query. After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.

Attributes

1. * md-items: An expression in the format of item in items to iterate over matches for your search.
2. md-selected-item-change: An expression to be run each time a new item is selected.
3. md-search-text-change: An expression to be run each time the search text updates.
4. md-search-text: A model to bind the search query text to.
5. md-selected-item: A model to bind the selected item to.
6. md-item-text: An expression that will convert your object to a single string.
7. placeholder: Placeholder text that will be forwarded to the input.
8. md-no-cache: Disables the internal caching that happens in autocomplete.
9. ng-disabled: Determines whether or not to disable the input field.
10. md-min-length: Specifies the minimum length of text before autocomplete will make suggestions.

Question 6. What Is Angular Material Bottom Sheet?

Answer :

$mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.

Methods: templateUrl - {string=}: The url of an html template file that will be used as the content of the bottom sheet. Restrictions: the template must have an outer md-bottom-sheet element.

template - {string=}: Same as templateUrl, except this is an actual template string.

scope - {object=}: the scope to link the template / controller to. If none is specified, it will create a new child scope. This scope will be destroyed when the bottom sheet is removed unless preserveScope is set to true.

preserveScope - {boolean=}: whether to preserve the scope when the element is removed. Default is false.

controller - {string=}: The controller to associate with this bottom sheet.

locals - {string=}: An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} would inject three into the controller with the value of 3.

clickOutsideToClose - {boolean=}: Whether the user can click outside the bottom sheet to close it. Default true.

escapeToClose - {boolean=}: Whether the user can press escape to close the bottom sheet. Default true.

resolve - {object=}: Similar to locals, except it takes promises as values and the bottom sheet will not open until the promises resolve.

controllerAs - {string=}: An alias to assign the controller to on the scope.

parent - {element=}: The element to append the bottom sheet to. The parent may be a function, string, object, or null. Defaults to appending to the body of the root element (or the root element) of the application. e.g. angular.element(document.getElementById('content')) or "#content".

disableParentScroll - {boolean=}: Whether to disable scrolling while the bottom sheet is open. Default true.

Question 7. What Is Angular Material Buttons?

Answer :

md-button, an Angular Directive, is a button directive having optional ink ripples (and are by default enabled). If href or ng-href attribute is provided, then this directive acts as an anchor element.

Attributes

1. md-no-ink: If set as true, disable ripple ink effects.
2. ng-disabled: Enable/Disable based on the expression.
3. md-ripple-size: Overrides the default ripple size logic. Options: full, partial, auto.
4. aria-label: Adds alternative text to button for accessibility, useful for icon buttons. If no default text is found, a warning will be logged.

Question 8. What Is Angular Material Cards?

Answer :

md-card, an Angular Directive, is a container directive and is used to draw cards in angularjs application. Following are the angular directives and classes used in md-card.

1. <md-card-header>: Header for the card, holds avatar, text and squared image.
2. <md-card-avatar>: Card avatar.
3. md-user-avatar: Class for user image.
4. <md-icon>: Icon directive.
5. <md-card-header-text> : Contains elements for the card description.
6. md-title: Class for the card title.
7. md-subhead: Class for the card sub header.
8. <img>: Image for the card.
9. <md-card-title>: Card content title.
10. <md-card-title-text>: Card Title text container.

Question 9. What Is Angular Material Checkboxes?

Answer :

md-checkbox, an Angular Directive, is used as a checkbox control.

Attributes

1. * ng-model: Assignable angular expression to data-bind to.
2. name: Property name of the form under which the control is published.
3. ng-true-value: The value to which the expression should be set when selected.
4. ng-false-value: The value to which the expression should be set when not selected.
5. ng-change: Angular expression to be executed when input changes due to user interaction with the input element.
6. md-no-ink: Use of attribute indicates use of ripple ink effects.
7. aria-label: Adds label to checkbox for accessibility. Defaults to checkbox's text. If no default text is found, a warning will be logged.

Question 10. What Is Angular Material Chips?

Answer :

md-chips, an Angular Directive, is used as a special component called Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips.

Attributes

1. * ng-model: Assignable angular expression to data-bind to.
2. * ng-model: A model to bind the list of items to.
3. * md-transform-chip: An expression of form myFunction($chip) that when called expects one of the following return values:
   ->an object representing the $chip input string.
   ->undefined to simply add the $chip input string, or.
   ->null to prevent the chip from being appended.
4. * md-require-match: If true, and the chips template contains an autocomplete, only allow selection of pre-defined chips (i.e. you cannot add new ones).
5. placeholder: Placeholder text that will be forwarded to the input.
6. secondary-placeholder: Placeholder text that will be forwarded to the input, displayed when there is at least on item in the list.
7. readonly: Disables list manipulation (deleting or adding list items), hiding the input and delete buttons.
8. md-on-add: An expression which will be called when a chip has been added.
9. md-on-remove: An expression which will be called when a chip has been removed.
10. md-on-select: An expression which will be called when a chip is selected.

Question 11. What Is Angular Material Contact Chips?

Answer :

md-contact-chips, an Angular Directive, is an input control built on md-chips and uses md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of availble chips.

Attributes

1. * ng-model: A model to bind the list of items to.
2. * md-contacts: An expression expected to return contacts matching the search test, $query.
3. * md-contact-name: The field name of the contact object representing the contact's name.
4. * md-contact-email: The field name of the contact object representing the contact's email address.
5. * md-contact-image: The field name of the contact object representing the contact's image.
6. placeholder: laceholder text that will be forwarded to the input.
7. secondary-placeholder: Placeholder text that will be forwarded to the input, displayed when there is at least on item in the list.
8. filter-selected: Whether to filter selected contacts from the list of suggestions shown in the autocomplete.

Question 12. What Is Angular Material Content?

Answer :

md-content, an Angular Directive, is a container element and is used for scrollable content. layout-padding attribute can be added have padded content.

Question 13. What Is Angular Material Datepicker?

Answer :

md-datepicker, an Angular Directive, is an input control to select a date and supports ngMessages for input validation.

Attributes

1. * ng-model: The component's model. Expects a JavaScript Date object.
2. ng-change: Expression evaluated when the model value changes.
3. md-min-date: Expression representing a min date (inclusive).
4. md-max-date: Expression representing a max date (inclusive).
5. md-date-filter: Function expecting a date and returning a boolean whether it can be selected or not.
6. md-placeholder: The date input placeholder value.
7. ng-disabled: Whether the datepicker is disabled.
8. ng-required: Whether a value is required for the datepicker.

Question 14. What Is Angular Material Dialogs?

Answer :

md-dialog, an Angular Directive, is a container element and is used to display a dialog box. Its element md-dialog-content contains the content of the dialog and md-dialog-actions is responsible for dialog actions.

mdDialog, an Angular Service, opens a dialog over the application to inform users about the information or require them to make decisions.

Question 15. What Is Angular Material Divider?

Answer :

md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts.

Attributes

md-inset: Add this attribute to activate the inset divider style.

Question 16. What Is Angular Material Fab Speed Dial?

Answer :

The md-fab-speed-dial an Angular directive, is used to show a series of popup elements or buttons for quick access to common actions.

Attributes

1. * md-direction: From which direction you would like the speed dial to appear relative to the trigger element.
2. md-open: Programmatically control whether or not the speed-dial is visible.

Question 17. What Is Angular Material Fab Toolbars?

Answer :

The md-fab-toolbar an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions.

Attributes

1. * md-direction: From which direction you would like the toolbar items to appear relative to the trigger element. Supports left and right directions.
2. md-open: Programmatically control whether or not the toolbar is visible.

Question 18. What Is Angular Material Grids?

Answer :

The md-grid-list an Angular directive, is a component for laying out content for varying screen sizes. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined.

Attributes

1. * md-cols: Number of columns in the grid.
2. * md-row-height: One of
   ->CSS length - Fixed height rows (eg. 8px or 1rem).
   ->{width}:{height} - Ratio of width to height (eg. md-row-height="16:9").
   ->"fit" - Height will be determined by subdividing the available height by the number of rows.
3. md-gutter: The amount of space between tiles in CSS units (default 1px).
4. md-on-layout: Expression to evaluate after layout. Event object is available as $event, and contains performance information.

Question 19. What Is Angular Material Icons?

Answer :

The md-icon an Angular directive, is a component to show vector-based icons in application. It supports icon fonts and SVG icons also apart from using Google Material Icons.

Attributes

1. * md-font-icon: String name of CSS icon associated with the font-face will be used to render the icon. Requires the fonts and the named CSS styles to be preloaded.
2. * md-font-set: CSS style name associated with the font library; which will be assigned as the class for the font-icon ligature. This value may also be an alias that is used to lookup the classname; internally use $mdIconProvider.fontSet(<alias>) to determine the style name.
3. * md-svg-src: String URL (or expression) used to load, cache, and display an external SVG.
4. * md-svg-icon: md-svg-icon String name used for lookup of the icon from the internal cache; interpolated strings or expressions may also be used. Specific set names can be used with the syntax <set name>:<icon name>. To use icon sets, developers are required to pre-register the sets using the $mdIconProvider service.
5. aria-label: Labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden="true". If there's no aria-label on the icon nor a label on the parent element, a warning will be logged to the console.
6. alt: Labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden="true". If there's no alt on the icon nor a label on the parent element, a warning will be logged to the console.

Question 20. What Is Angular Material Inputs?

Answer :

The md-input-container an Angular directive, is a container component to contains any <input> or <textarea> element as a child. md-input-container also supports error handling using the standard ng-messages directives and animates the messages using ngEnter/ngLeave events or the ngShow/ngHide events.

Attributes

1. md-maxlength: The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input. The purpose of md-maxlength is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" ng-maxlength or maxlength attributes.
2. aria-label: Aria-label is required when no label is present. A warning message will be logged in the console if not present.
3. placeholder: An alternative approach to using aria-label when the label is not PRESENT. The placeholder text is copied to the aria-label attribute.
4. md-no-autogrow: When present, textareas will not grow automatically.
5. md-detect-hidden: When present, textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle.

Question 21. What Is Angular Material Layouts?

Answer :

Layout Directive

layout directive on a container element is used to specify the layout direction for its children. Following are the assignable values:

row - Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.

column - Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.

For responsive design such as layout to be automatically changed depending upon the device screen size,following layout APIs can be used to set the layout direction for devices with view widths.

1. layout:  Sets default layout direction unless overridden by another breakpoint.
2. layout-xs:   width < 600px
3. layout-gt-xs:   width >= 600px
4. layout-sm:   600px <= width < 960px
5. layout-gt-sm:   width >= 960px
6. layout-md:   960px <= width < 1280px
7. layout-gt-md:   width >= 1280px
8. layout-lg:   1280px <= width < 1920px
9. layout-gt-lg:   width >= 1920px
10. layout-xl:    width >= 1920px

Question 22. What Is Flex Directive?

Answer :

flex directive on a container element is used to customize the size and position of elements. flex directive defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container.Following are the assignable values:

multiples of 5 - 5, 10, 15 ... 100
33 - 33%
66 - 66%

Question 23. What Is Angular Material List?

Answer :

The md-list an Angular directive, is a container component to contains md-list-item elements as a children. The md-list-item directive is a container component for row items of md-list container. CSS classes md-2-line and md-3-line can be added to md-list-item to increase the height of row with 22px and 40px respectively.

Question 24. What Is Angular Material Menu?

Answer :

The md-menu an Angular directive, is a component to display addition options within the context of action performed. md-menu have two child elements. First one is trigger element and is used to open the menu. Second element is md-menu-content to represent the content of the menu when menu is opened. md-menu-content usually carries menu items as md-menu-item.

Attributes

1. * md-position-mode:   The position mode in the form of x, y. Default value is target,target. Right now the x axis also suppports target-right.
2. * md-offset:   An offset to apply to the dropdown after positioning x, y. Default value is 0,0.

Question 25. What Is Angular Material Menu Bar?

Answer :

The md-menu-bar an Angular directive, is a container component to hold multiple menus. Menu bar helps to create a operating system provided menu effect.

Question 26. What Is Angular Material Progress Bars?

Answer :

The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show loading content message in application.

Attributes - md-progress-circular

1. * md-mode: Select from one of two modes: 'determinate' and 'indeterminate'. if the md-mode value is set as undefined or specified as not 1 of the two (2) valid modes, then .ng-hide will be auto-applied as a style to the component. if not configured, the md-mode="indeterminate" will be auto injected as an attribute. If value="" is also specified, however, then md-mode="determinate" would be auto-injected instead.
2. value: In determinate mode, this number represents the percentage of the circular progress. Default: 0
3. md-diameter: This specifies the diamter of the circular progress. The value may be a percentage (eg '25%') or a pixel-size value (eg '48'). If this attribute is not present then a default value of '48px' is assumed.

Question 27. What Is Angular Material Radio Buttons?

Answer :

The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. md-radio-group is the grouping container for md-radio-button elements.

Attributes - md-radio-group

1. * ng-model: Assignable angular expression to data-bind to.
2. md-no-ink: Use of attribute indicates flag to disable ink ripple effects.

Attributes - md-radio-button

1. * ng-model: Assignable angular expression to data-bind to.
2. * ngValue: Angular expression which sets the value to which the expression should be set when selected.
3. * value: The value to which the expression should be set when selected.
4. ngChange: Angular expression to be executed when input changes due to user interaction with the input element.
5. name: Property name of the form under which the control is published.
6. aria-label: Adds label to radio button for accessibility. Defaults to radio button's text. If no text content is available, a warning will be logged.

Question 28. What Is Angular Material Selects?

Answer :

The md-select, an Angular directives is used to show Select box, bounded by ng-model.

Attributes - md-radio-group

1. * ng-model: The model!
2. multiple: Whether it's multiple.
3. md-on-close: Expression to be evaluated when the select is closed.
4. placeholder: Placeholder hint text.
5. Optional label for accessibility. Only necessary if no placeholder or explicit label is present.
6. md-container-class: Class list to get applied to the .md-select-menu-container element (for custom styling).

Question 29. What Is Angular Material Sidenav?

Answer :

The md-sidenav, an Angular directives is used to show a container component which can be shown or hide programmatically. It slides out over the top of the main content region by default.

Attributes

1. md-is-open: A model bound to whether the sidenav is opened.
2. md-component-id: componentId to use with $mdSidenav service.
3. md-is-locked-open: When this expression evalutes to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. This overrides the is-open attribute. The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets. Examples:
   
   <md-sidenav md-is-locked-open="shouldLockOpen"></md-sidenav>
   
   <md-sidenav md-is-locked-open="$mdMedia('min-width: 1000px')"></md-sidenav>
   
   <md-sidenav md-is-locked-open="$mdMedia('sm')"></md-sidenav> (locks open on small screens)

Question 30. What Is Angular Material Sliders?

Answer :

The md-slider, an Angular directives is used to show a range component. It has two modes:

• normal - User can slide between wide range of values. Default.
• discrete - User can slide between selected values. To enable discrete mode use md-discrete and step attributes.

Attributes

1. md-discrete: Whether to enable discrete mode.
2. step: The distance between values the user is allowed to pick. Default 1.
3. min: The minimum value the user is allowed to pick. Default 0.
4. max: The maximum value the user is allowed to pick. Default 100.