Angular Material Tutorial Part 3
Welcome to Ultimate Angular Material tutorial, this is part 3 of angular material tutorial, in this part we will learn following things –
Icon’s in Angular Material.
Badge’s in Angular Material.
Tooltip in Angular Material.
Progress spinner in Angular Material.
If you did not watch the Angular Material Part –I will recommend you to watch that part here • Angular Material Tutorial - Part I
If you did not watch the Angular Material Part –II will recommend you to watch that part here • Angular Material Tutorial Part -2
How to use Icons in Angular Material?
mat-icon directive makes it easier to use icons in your app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.).
How to use Badges in Angular Material?
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters that appears in proximity to another object.
How to use tooltip in Angular Material?
The Angular Material tooltip provides a text label that is displayed when the user hovers over or long presses an element, following directives –
How to use progress spinner in Angular Material?
mat-progress-spinner and mat-spinner are a circular indicators of progress and activity. mat-progress-spinner directive show value based progress, if value if 50, it will show progress of 50%, where as mat-spinner directive will show continuous spinner, until you do not hide it.
TABLE OF CONTENT
0:00:00 Introduction
0:00:10 About Session
0:00:41 Agenda
0:0:50 ICONS in Angular Material (Theory)
0:02:44 Angular Material ICON (Demo)
0:08:14 Badges in Angular Material (Theory)
0:12:01 Badges in Angular Material Practical (Demo)
0:22:09 Tooltips in Angular Material (Theory)
0:22:37 Tooltip in Angular Material Practical (Demo)
0:27:33 Progress Spinners in Angular Material (Theory)
0:31:15 Progress Spinner in Angular Material Practical (Demo)
0:38:55 thank you.
For full fletch Angular 9 & Material course: http://ritechpune.com/AngularJS/Angul...
CONNECT WITH ME:-
Website: http:// www.ritechpune.com
Blog: http://www.blog.ritechpune.com
Mail us: [email protected]