Event Modifiers in Angular

ref: https://netbasal.com/implementing-event-modifiers-in-angular-87e1a07969ce

First, we need to create the directive and inject two things, the ElementRefand the Renderer service. ( In Angular version 4 you will use Renderer2 )

The next thing that we need is an Output. As you may know, you can’t use the dot notation and write something like this:

@Output() click.stop = new EventEmitter();

The dot notation only works with property names which are valid identifier names.

🙏 Fortunately, Output takes an optional parameter that specifies the name used when instantiating a component in the template, or in a simple word — an alias.

@Output("click.stop") stopPropEvent = new EventEmitter();

When you pass an alias, it’s like using the bracket notation so you can use any character sequence as a property name.

Note: You can still pass the $event and any other data to your handler, it’s the same behavior as the original (click) event.

<button class="child" (click.stop)="fromChild($event, data)">
   Click me
</button>

Advantage Of The Let Operator in Angular

ref: https://netbasal.com/take-advantage-of-the-let-operator-in-angular-d351fd4bd1d9

The Let Operator —

Let me have the whole observable

Returns an observable sequence that is the result of invoking the selector on the source sequence.

We have new Input called middleware that is a function that takes the valueChanges observable and needs to return a new observable.

If the consumer does not use the middleware Input, we are returning the same observable.

The full example.

Implementing Observables using Proxy

The Object.observe() method was used for asynchronously observing the changes to an object. It provided a stream of changes in the order in which they occur. However, this API has been deprecated and removed from browsers. You can use the more general Proxy object instead.

The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

Terminology

handler
Placeholder object which contains traps.
traps
The methods that provide property access. This is analogous to the concept of traps in operating systems.
target
Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.

Syntax

var p = new Proxy(target, handler);

Parameters

target
A target object (can be any sort of object, including a native array, a function or even another proxy) to wrap with Proxy.
handler
An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.