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

3 Ways to Pass Async Data to Angular 2+ Child Components ― Scotch.io

Let’s start with a common use case. You have some data you get from external source (e.g. by calling API). You want to display it on screen.However, instead of displaying it on the same component, you would like to pass the data to a child component to display.The child component might has some logic to pre-process the data before showing on screen.

Solution 1: Use *ngIf
Solution 2: Use ngOnChanges
Solution 3: Use RxJs BehaviorSubject

Source: 3 Ways to Pass Async Data to Angular 2+ Child Components ― Scotch.io

Angular: Tips. The importance of Pipes – codeburst

What we all like in Angular primarily is that it all mostly about templates. Templates are smart, dynamic, they use change detection to update themselves on a moment’s notice when a model is updated, the can manage HTML elements and nested components, enrich the markup with directives and make on-the fly data transformations, and the template syntax is amazing. The tools provided are vast and rich, but is it up to us to use them wisely.

Source: Angular: Tips. The importance of Pipes – codeburst

Deploy an Angular Application to IIS – Angular In Depth

Getting your Angular Router application actually working in a non-root folder on Internet Information Services

The Angular Router is a fantastic module for Single Page Apps. However, to deploy it in a Production scenario you will typically need to do some configuration to make it work. This article details the steps necessary to deploy an Angular Router application anywhere on Internet Information Services (IIS).

Source: Deploy an Angular Application to IIS – Angular In Depth