Making ASP.NET Core 3 web API return REST compliant Http return codes

To make an ASP.NET Web Api (core 3+) return valid Http status codes such as 200 OK, 400 Bad request and 404 Not found, use the IActionResult as return type.

Return code 422 can be used instead of 400, read more here: HTTP Status Codes For Invalid Data: 400 vs. 422

Code example C# web API controller “data” endpoint method:

/// <summary>
/// Get data from API
/// </summary>
/// <remarks>
/// GET: api/v1/data?id={id}
/// </remarks>
/// <returns><see cref="IActionResult"/> <see cref="Data"/>Data model</returns>
/// <response code="200">Serialized <see cref="Data"/></response>
/// <response code="400">Invalid id</response>
/// <response code="404">Found no match for id</response>
[ProducesResponseType(typeof(Data), 200)]
[ProducesResponseType(typeof(object), 400)]
[ProducesResponseType(typeof(object), 404)]
[HttpGet("data")]
public IActionResult GetData(string id)
{
    var data = business.GetData(id);
    if (data == null)
    {
        return NotFound(null); //404 not found
    }
    if (data.IsValid)
    {
        return Ok(data); //200 OK, found
    }
    else
    {
        return BadRequest(data.ValidationErrorMessage); //400 bad reqeust validationerror
    }
}

IActionResult type

The IActionResult return type is appropriate when multiple ActionResult return types are possible in an action. The ActionResult types represent various HTTP status codes. Any non-abstract class deriving from ActionResult qualifies as a valid return type. Some common return types in this category are BadRequestResult (400), NotFoundResult (404), and OkObjectResult (200). Alternatively, convenience methods in the ControllerBase class can be used to return ActionResult types from an action. For example, return BadRequest(); is a shorthand form of return new BadRequestResult();.

Because there are multiple return types and paths in this type of action, liberal use of the [ProducesResponseType] attribute is necessary. This attribute produces more descriptive response details for web API help pages generated by tools like Swagger. [ProducesResponseType] indicates the known types and HTTP status codes to be returned by the action.

More info:
Controller action return types in ASP.NET Core web API | Microsoft Docs
HTTP Status Codes For Invalid Data: 400 vs. 422

Angular tips debugger – Pause Your Code With Breakpoints In Chrome DevTools

You can use this in Angular development for instance.
Just place till code on a line you wish to debug (e.g. in an component.ts file):

debugger;

Chrome will pause on that breakpoint.

Source: How To Pause Your Code With Breakpoints In Chrome DevTools

Binding select element to object in Angular

Component.ts file:

Component.ts file: 

@Component({
   selector: 'myApp',
   template: 'myApp.html'
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null; //the current selected option id
}

Template:

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]=”c” instead of [ngValue]=”c.id” where c is the complete country object.

Source: html – Binding select element to object in Angular – Stack Overflow

Angular – Reactive forms API summary

Reactive forms API summary

The following table lists the base classes and services used to create and manage reactive form controls. For complete syntax details, see the API reference documentation for the Forms package.

Classes

Class Description
AbstractControl The abstract base class for the concrete form control classes FormControl, FormGroup, and FormArray. It provides their common behaviors and properties.
FormControl Manages the value and validity status of an individual form control. It corresponds to an HTML form control such as <input> or <select>.
FormGroup Manages the value and validity state of a group of AbstractControl instances. The group’s properties include its child controls. The top-level form in your component is FormGroup.
FormArray Manages the value and validity state of a numerically indexed array of AbstractControl instances.
FormBuilder An injectable service that provides factory methods for creating control instances.

Directives

Directive Description
FormControlDirective Syncs a standalone FormControl instance to a form control element.
FormControlName Syncs FormControl in an existing FormGroup instance to a form control element by name.
FormGroupDirective Syncs an existing FormGroup instance to a DOM element.
FormGroupName Syncs a nested FormGroup instance to a DOM element.
FormArrayName Syncs a nested FormArray instance to a DOM element.

Source: Angular – Reactive forms – API Summary