Posted on

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

Posted on

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…”

Posted on

CSS overflow-wrap — Control wrapping of text overflow or wrapping

This css works in most common browsers (including IE)

Internet Explorer has its own implementation for “overflow-wrap” -> “word-wrap”.

A readymade sass mixin:

Source: CSS overflow-wrap — Control wrapping of text overflow or wrapping – CSS: Cascading Style Sheets | MDN

Posted on

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