eneajaho

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[clickOutside]' })
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter<Event>();

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event'])
  public onClick(event: Event) {

eneajaho

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {
  @Output() appClickOutside: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {
  }

eneajaho

Install Angular ESLint

ng add @angular-eslint/schematics

Install Prettier and Prettier-ESLint dependencies

npm install prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev

ESLint configuration

Filename: .eslintrc.json

eneajaho

import { Directive, HostListener, Input, NgModule } from '@angular/core';

@Directive({
  selector: '[defaultImageOnError]'
})
export class DefaultImageOnErrorDirective {
  @Input() defaultImageOnError: string;

  @HostListener('error', ['$event'])
  handleError(event: ErrorEvent): void {

eneajaho

import { Directive, Inject, NgModule, OnInit, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

/**
 * Add the template content to the DOM based on platform
 */

@Directive({ selector: '[serverSideOnly]' })
export class ServerSideOnlyDirective implements OnInit {

eneajaho

import {
  AfterViewInit,
  Directive,
  ElementRef,
  EventEmitter,
  HostListener,
  Input,
  NgModule,
  Output,
  Renderer2

eneajaho

import { Directive, HostListener, Inject, NgModule } from '@angular/core';
import { WINDOW } from "@ng-web-apis/common";

@Directive({ selector: '[scrollTop]' })
export class ScrollTopDirective {

  constructor(@Inject(WINDOW) private window: Window) {}

  @HostListener('click', ['$event'])
  handleClick(event: PointerEvent): void {

eneajaho

import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2 } from '@angular/core';
import { transparentize } from 'color2k';

@Directive({ selector: '[translucent]' })
export class TranslucentDirective implements AfterViewInit {

  /* nice colors
  * red - #f52525
  * green - #39BF4D
  * blue - #2752FF */

eneajaho

import {
  Component,
  Inject,
  inject,
  Injectable,
  InjectionToken,
  NgModule
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

eneajaho

<script type="text/javascript">
var totalposts = 200;
var standardstyling = true;
function showrecentposts(json) {
for (var a = 0; a < totalposts; a++) {
var entry = json.feed.entry[a];
var posttitle = entry.title.$t;
var posturl;
if (a == json.feed.entry.length) break;
for (var b = 0; b < entry.link.length; b++) {