Author: Awais Khan

What is typography? Typography is a way of arranging the text legible, readable, and attractive when displayed. The typology of the angular material is based on the guidelines derived from the material design imagery and organized within the typography level. Each level has a size, line height, and font-weight. CSS classes are provided for typography. You can…

It is a combination of CSS and a card that flips when you click on the icon button in the upper right-hand corner. You can use angular app or create a new using ng new app-name. We first need an app to create a component. Create a new component called GameCardComponent using the below command. The interface consists of…

The md-virtual-repeat-container is a scroll container fork md-virtual-repeat component. Virtual repeat is an Angular material directive which is same as ng-repeat and it renders html elements to fill the container to reuse it when the user scrolls. Attributes The below table lists the parameters and description of the attributes of md-virtual-repeat-container. Sr.No Parameter Description 1 md-top-index The scroll binds the…

Angular Material provides users with many unique ways to show hidden alerts. The $ mdToast service is used to show toast and provides a word toast. Example: The example shows the use of toasts. am_toasts.html Output: Whiteframe There are some special classes for displaying containers in the form of cards such as paper with shadows in angular…

Angular Material Swipe function is an angular directive used for mobile devices. The UX pattern is used for mobile devices only, and cannot make the responsive sites. To initiate a swipe gesture on a desktop, you can click, hold and drag in right, left, up or down with the help of swipe function. The below…

If you provide a good user interface, your business can succeed. Many CSS and UI frameworks are claimed to be functional and responsive. Both Angular and Bootstrap are better for development and web designing. Both are best suited to provide impeccable solutions and the highest user experience. Both Angular and Bootstrap are the well-known methods…

The <mat-slider> is an Angular Directive used as the enhanced range selector with material styling and animation capabilities. The <mat-slider> allows the selection of a value from a range by mouse, touch or keyboard and it is similar to the <input type=”range”>. <mat-slider> tag is used when there is a need for a slider in the projects. Basic slider Selecting a value By…

<Md-fab-toolbar> is an Angular directive which contains headers, titles, or functions. It is used to show the elements or buttons for quick use of the functions. You can use the toolbar with the trigger. In Fab-toolbar the md-open attributes is used to control the program. In Fab-Toolbar we have to set the visible direction by…

The <MatSnackBar> is an Angular Directive used to show a notification bar to show on mobile devices as the dialogs or popups. It is a service for displaying snack-bar notifications. Opening a Snackbar A snack-bar contains a string message. It is used to obtain information on rejecting a snack bar. MatSnackBarRef exposes that the action is triggered…

The datepicker allows the users to enter a date by text input or choose a date from calendar. It consists of a text input and a calendar popup that is associated with the matDatepicker property on the text input. There is an optional datepicker toggle button that gives the user an easy way to open the datepicker…