Angular

Introduction> Introduction # When creating forms in Angular, sometimes you want to have an input that is not a standard text input, select, or checkbox. By implementing the ControlValueAccessor interface and registering the component as a NG_VALUE_ACCESSOR, you can integrate your custom form control seamlessly into template-driven or reactive forms just as if it were a native input!

Reactive form instances like FormGroup and FormControl have a valueChanges method that returns an observable that emits the latest values. You can therefore subscribe to valueChanges to update instance variables or perform operations.

Introduction> Introduction # Query parameters in Angular allow for passing optional parameters across any route in the application. Query parameters are different from regular route parameters, which are only available on one route and are not optional (e.

Introduction> Introduction # @HostBinding and @HostListener are two decorators in Angular that can be really useful in custom directives. @HostBinding lets you set properties on the element or component that hosts the directive, and @HostListener lets you listen for events on the host element or component.

Pipes in Angular 2+ are a great way to transform and format data right from your templates. Out of the box you get pipes for dates, currency, percentage and character cases, but you can also easily define custom pipes of your own.

Introduction> Introduction # Chart.js is a popular JavaScript charting library and ng2-charts is a wrapper for Angular 2+ to integrate Chart.js in Angular. In this tutorial, you will use Chart.js and ng2-charts to create sample charts in an Angular application.

Introduction> Introduction # When binding to either the keyup or keydown events in your Angular 2+ templates, you can specify key names. This will apply a filter to be applied to the event, so it will trigger only when specific keys are pressed.

Introduction> Introduction # One way for handling retrieving and displaying data from an API is to route a user to a component, and then in that component’s ngOnInit hook call a method in a service to get the necessary data.

NgFor is a built-in template directive that makes it easy to iterate over something like an array or an object and create a template for each item. This post covers Angular 2 and up

Introduction> Introduction # If you’re building an app that uses an API, you’ll want to use your API key for testing environments during development and your API key for live environments during production.

It’s easy to bind inline style in your Angular 2 templates. Here’s how you would bind a single style value for example: <p [style.background-color]="'darkorchid'"> Quite something! </p> You can also specify the unit, here for example we set the unit in em, but px, % or rem could also be used:

Introduction> Introduction # Jasmine spies are used to track or stub functions or methods. Spies are a way to check if a function was called or to provide a custom return value.

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.

Angular 4.3 brings us a new easier way to handle http requests with the HttpClient library. It’s available under a new name to avoid causing breaking changes with the current Http library.

Introduction> Introduction # Lazy loading is an approach to limit the modules that are loaded to the ones that the user currently needs. This can improve your application’s performance and reduce the initial bundle size.

Introduction> Introduction # The Angular router’s navigation guards allow to grant or remove access to certain parts of the navigation. Another route guard, the CanDeactivate guard, even allows you to prevent a user from accidentally leaving a component with unsaved changes.

Introduction> Introduction # Angular 2+ supports an [innerHTML] property binding that will render HTML. If you were to otherwise use interpolation, it would be treated as a string. In this article, you will be presented with how to use [innerHTML] and some considerations for usage.

Introduction> Introduction # Angular’s @angular/forms package comes with a Validators class that supports useful built-in validators like required, minLength, maxLength, and pattern. However, there may be form fields that require more complex or custom rules for validation.

Introduction> Introduction # ng-container is an element available in Angular 2+ that can act as the host to structural directives. In this article, you will explore scenarios that can be addressed with ng-container.

Introduction> Introduction # The single responsibility principle is the idea that pieces of your application should have one purpose. Following this principle makes your Angular app easier to test and develop.