Angular way of binding object array in a Html Select / Combo box. <h1>Object Binding with Select / Combobox</h1>Select value :<select (change)=”handleChange($event.target.selectedIndex)” name=”cmbTipoTexto” class=”form-control form-control-sm col-sm-7″ id=”cmbTipoTexto” > <option *ngFor=”let item of textTypes” [value]=”item.id”> {{ item.displayValue }} </option></select><br /><br /><br /><b>Selected Object:</b><br />{{ selectedObject | json }}
Enums to Object Array enum Colors { White, Black, Red, Blue, Green } ————————————————————————————————- ColorsList: any[]; ngAfterViewInit() { this.enumsToObjectList(); } enumsToObjectList() { let keys = Object.keys(Colors); // extract enum key & values let filteredKeys = keys.filter(k => !isNaN(+k)); // filter only non numeric values // compose or transform object array this.ColorsList = filteredKeys.map((k) => { return { key: k, value: Colors[+k] } }); }
In this short article, we will have two different approaches to display an image that’s been fetched from an API response. The requirement is to display a default placeholder image, then at runtime based on the availability, we will replace the image that was received …
In Part 1, I have explained the typical error handling approach and best practices for error handling in the Angular web. In this article, we will implement what we discussed in the previous post. So, let’s start with our sample project. Demo I have stimulated …
This is just a followup article, some of the readers were requesting for the Angular PWA demo in android device. So, If you are new to this read please have a look in to the article Running Angular PWA with .NET Core WebApi like an …
In this article we will see how to self host and configure google fonts inside our angular projects. Of course, CDN’s are great solutions, but still there are cases where we may need to self host the fonts. This will also avoid some unknown surprises …
This article is for the developers who are already familiar with using the Angular framework and .NET Core technology. If you are new to Angular PWA, please refer to the angular docs to learn how to set up and run Angular PWAs. Progressive Web Apps …
In Part 2, We have implemented our Global Error Handler class and handled all the client-side & Http errors in our application globally. At the end of Part 2, we had a question why do we even have the HttpInterceptor object in our proposed solution, RIGHT !… Let’s jump …
In this article, we will explore the best approach to handle errors globally in Angular web applications. Types of Errors Client-Side Binding errors, References errors, Type errors and the errors thrown from 3rd party packages, etc., Http Error Response Status Codes: 400, 401, 404, 500, …
This article is for angular developers who are already familiar with Angular CLI command-line interface tool, others please refer this and continue Angular Cli – Unit Test Setup Angular CLI takes care of all the heavy liftings and it automatically configures all the necessary packages for us. …