The KeyValue Pipe converts given Object or Map into an array of key-value pairs. We can use this with the ngFor to loop through the object keys. The keyValue accepts the one argument compareFn, which we can use to set the custom sort to the pipe. In this tutorial, let us learn how to make use of KeyValue pipe with example.
Typescript Enum All you need to know
A Typescript enum allows us to define the collection of related values to be used by name. They make the code easier to read. You may use them when you want to limit the values that a variable can take to a small set of possible values. Javascript does not support enums, hence typescript creates runtime artifact to support them ( Except, const enum which do not have a runtime artifact). TypeScript provides both numeric and string-based enums.
Using Angular Async Pipe with ngIf & ngFor
The async pipe allows us to subscribe to an Observable or Promise from the template and returns the value emitted. The async pipes subscribe to the observable when the component loads. It unsubscribes when the component gets destroyed. In this tutorial we will show you how to use async pipe. Its Syntax & example using observable, Also we will show you how to use it with ngIf & ngFor. How to make use of the ShareReplay to share the subscription. Use the as operator to store the result. using it with the httpclient & HTTP get request etc.
Formatting Dates with Angular Date Pipe
Angular Date Pipe allows us to format dates in Angular using the requested format, time zone & local information. It comes with built-in pre-defined formats. We can also customize the date format by creating custom format strings. We can set the time zone, country locale, etc. This tutorial shows how to use Date Pipe using examples.
Select Options Example in Angular
We use select options when there are many options to choose from. Learn how to use them in Angular. We will show you how to set the Default Value for the select. Listen to the Select option change event and react to it. Dynamically update the Dropdown list option & Dynamically Set Value etc. We will cover both Reactive Forms & Template-driven forms.