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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input('appHighlight') highlightColor = '';

  private el: HTMLElement;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'cyan');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

import {Component, NgModule} from '@angular/core'
import {render, screen} from '@testing-library/angular'
import {ngMocks} from 'ng-mocks'

@Component({
  selector: 'app-parent-component',
  template: '<app-child-component></app-child-component>',
})
class ParentComponent {}

@Component({
  selector: 'app-child-component',
  template: '<p>Child component</p>',
})
class ChildComponent {}

@NgModule({
  declarations: [ParentComponent, ChildComponent],
})
export class AppModule {}

describe('ParentComponent', () => {
  it('should not render ChildComponent when shallow rendering', async () => {
    const dependencies = ngMocks.guts(null, AppModule, ParentComponent)

    await render(ParentComponent, dependencies)

    expect(screen.queryByText('Child component')).toBeNull()
  })
})

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
}