Welcome to my blog !

Angular ngFor index - How to get current last even and odd index?

January 1, 2022 ·  2 min read

s Let’s create an employee model export class Employee { id: Number; name: string; salary: Number; } Angular ngFor Index syntax and example *ngFor is a shorthand form for ngForOf directive This can be used to iterate an array of objects or objects. Here is an ngFor syntax This can be applied to any HTML element objectarray - an array of object object - typescript object or model class there are different local variables we can use...

Angular material Snackbar tutorials | mat-snackbar examples

January 1, 2022 ·  7 min read

Contents What is snackbar UI component? Angular Snackbar Configuration Import MatSnackBarModule into the angular application Simple Basic component Notification message Action button with a message Duration Snackbar Position panelClass custom css styles - color,font Passing data with openFromComponent method Stackblitz complete example What is snackbar UI component? Snackbar is an important UI element in designing frontend applications....

Angular material progress bar | mat-progress-bar example

January 1, 2022 ·  4 min read

In this blog post, We are going to learn Angular material progress bar with example. progress bar ui element The progress bar is an interactive UI element to show the progress of operations, For example, You need to show status in graphical form during downloading, uploading, and copying a file. There are different types of the progress bar determinate progress bar - progress bar is shown in known progress of an operation, For example, 3 minutes indeterminate progress bar - The time taken to take an operation is not known at displaying a progress bar....

Angular Material list tutorial|mat-list examples

January 1, 2022 ·  3 min read

This post covers the Angular material list tutorial and examples. The Angular material list is a container element for UI elements that have been displayed inside it. Following UI components can also be wrapped with it. Cards Checkbox The basic Material List UI component contains the following. List container is a required parent container for holding a group of elements or list items list item contains list item as a child element In this blog post, List out the various examples of usage of the material list using angular material....

Angular Material expansion panel | mat-expansion-panel code

January 1, 2022 ·  4 min read

You learn about material expansion implementation in an angular application using a Material library. An expansion panel is an interactive UI component rendered as either collapsed or expanded state. The expansion panel can be triggered using a mouse click or keyboard interactions. Angular material expansion panel provides different components. Contents import MatExpansionModule into angular application root module Basic Angular material expansion component example adding a material list to the Expansion panel dynamic angular material expansion panel example Display expansion panel Open By default expansion panel toggle in angular Button click toggle expansion panel Conclusion import MatExpansionModule into angular application root module angular material provides an expansion panel to view the content in the expanded view of a panel....

You'll get a notification every time a post gets published here.