Category: Angular

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

Error Handling with Angular 8 – Tips and Best Practices

Handling errors properly is essential in building a robust application in Angular. Error handlers provide an opportunity to present friendly information to the user and collect important data for development. In today’s age of advanced front-end websites, it’s more important than ever to have an effective client-side solution for error handling.

An application that does not handle errors gracefully leaves its users confused and frustrated when the app suddenly breaks without explanation. Handling these errors correctly across an application greatly improves user experience. Collected data from the error handling can inform the development team about important issues that slipped past testing. This is why monitoring tools like Rollbar are so important.

In this article, we will compare several solutions for error handling in Angular apps. First, we will describe the traditional approaches using ErrorHandler and HttpClient. Then, we will show you a better solution using HttpInterceptor. We’ll also show you how to use this interceptor to monitor and track errors centrally in Rollbar.

 

Source: Error Handling with Angular 8 – Tips and Best Practices

Angular *ngFor calling method multiple times problem

Background:
When using *ngFor directive try to avoid using methods inside the *ngFor loop.
When methods are used inside the *ngFor template databinding Angular triggers the method on every possible change detection. Angular does this because a method has side effects, its “impure”. Angular don’t know if the return value of the method has changed, and triggers a change detection check as often as possible.

Result:
If you set a console.log() inside your method that is called from within a *ngFor loop and tries to trigger some sort of change detection interaction (e.g. component init, click or mouse scroll depending on component implementation). You will see that the method is being triggered many more times than expected.

Example problem:
(heroes.component.html)

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <h5>{{getHeroName(hero)}}</h5>
  </li>
</ul>

(heroes.component.ts)

getHeroName(hero: Hero) {
  console.log(hero.name);
  return hero.name;
}

The console.log will log 21 times on init and another 20 times for every “click”. The expected result is 10 console.logs upon init.

Above example could be fixed by instead calling the name property on the iterated variable (hero):

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <h5>{{hero.name}}</h5>
  </li>
</ul>

Solution:
Use a property inside the *ngFor directive instead, so prepare a collection with correct data and save to properties instead of using methods. So the template will iterate over an already “prepared” model collection.

If call on method inside the *ngFor directive is hard to avoid, at least make sure the code is fast and is performant since it will be called many, many times in a row.

Source: https://www.reddit.com/r/Angular2/comments/59532r/function_being_called_multiple_times/

Angular – Stop mouse event propagation – Stack Overflow

If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below:

import {Directive, HostListener} from “@angular/core”;
@Directive({
selector: “[click-stop-propagation]”
})
export class ClickStopPropagation
{
@HostListener(“click”, [“$event”])
public onClick(event: any): void
{
event.stopPropagation();
}
}

Then just add it to the element you want it on:

<div click-stop-propagation>Stop Propagation</div>

Source: angular – Stop mouse event propagation – Stack Overflow

Fixing Webstorm cant debug in Chrome error: “Please ensure that the browser was started successfully with remote debugging port opened”

Error message in Jetbrains Webstorm:

Waiting for connection to localhost:59066. Please ensure that the browser was started successfully with remote debugging port opened. Port cannot be opened if Chrome having the same User Data Directory is already launched.

Can be fixed by installing the “jetbrains ide” chrome extension and make sure the above settings checkbox is active “Use JetBrains IDE support extension…”

Using Renderer2 in Angular

The Renderer2 class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach because it then makes it easier to develop apps that can be rendered in environments that don’t have DOM access, like on the server, in a web worker or on native mobile.

Source: Using Renderer2 in Angular