Angular 6 Directive is not being instantiated in a

Question

This proof of concept directive works fine in Firefox stack-blitz and when it is exported into vs code; however when I try to bring it into my application it isn't giving me any error but as you can see it's not logging any of the life-cycle hooks. This is what it looks like in the browser:

I have added the code from each component you see in my vs code, below.

SO what am I missing here? This works fine in my stack-blitz prototype...

Context: My directive is placed on the parent and interacts with child nodes. It is supposed to work so that on (mouseup) within the host parent view box container it establishes the center of all child components' space/positions, calculates their x-mid-lines, and scrolls to the component with the x-mid-line closest to the parent/view box mid-line (look in the stack-blitz console). Any insights are appreciated! Thanks

Second window in the snapshot: Directive:

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

@Directive({
  selector: '[windowsnap]'
})
export class WindowSnapDirective implements OnInit, AfterViewInit {



  scrollhistory = [];
  parent = this.el.nativeElement;

  constructor(private el: ElementRef) {
    console.log('windowsnap constructor')
  }

  ngOnInit() {
    console.log('windowsnap oninit')
  }
  ngAfterViewInit() {
    console.log('windowsnap afterviewinit')
  }

  closest(num, arr) {
    let curr = arr[0];
    arr.forEach((val) => {
      if (Math.abs(num - val) < Math.abs(num - curr)) {
        curr = val
      }
    });
    return curr;
  }


  @HostListener('mouseup') onMouseUp() {
    // logging x-scroll history into an array
    this.scrollhistory.unshift(this.parent.scrollLeft);
    console.log(this.scrollhistory)

    // this is to prevent unnecesary scrolls to the same component
    if (this.parent.scrollLeft != this.scrollhistory[1]) {


      //  child element declarations
      let child1El = this.parent.querySelector('child1');
      let child2El = this.parent.querySelector('child2');
      let child3El = this.parent.querySelector('child3');

      // child1 boundaries
      let child1leftBoundary: number = child1El.offsetLeft;
      let child1middleBoundary: number = child1El.offsetWidth * 0.5 + child1leftBoundary;
      let child1rightBoundary: number = child1El.offsetWidth + child1leftBoundary;
      // console.log('child1 Left: ' + child1leftBoundary +', child1 Middle: ' + child1middleBoundary +  ', child1 Right: ' + child1rightBoundary)

      // child2 boundaries
      let child2leftBoundary: number = child2El.offsetLeft;
      let child2middleBoundary: number = child2El.offsetWidth * 0.5 + child2leftBoundary;
      let child2rightBoundary: number = child2El.offsetWidth + child2leftBoundary;
      // console.log('child2 Left: ' + child2leftBoundary + ', child2 Middle: ' + child2middleBoundary + ', child2 Right: ' + child2rightBoundary)

      // child3 boundaries
      let child3leftBoundary: number = child3El.offsetLeft;
      let child3middleBoundary: number = child3El.offsetWidth * 0.5 + child3leftBoundary;
      let child3rightBoundary: number = child3El.offsetWidth + child3leftBoundary;
      console.log('child3 Left: ' + child3leftBoundary + ', child3 Middle: ' + child3middleBoundary + ', child3 Right: ' + child3rightBoundary)


      //  x view boundaries
      let viewBoxL = (this.parent.scrollLeft)
      let viewBoxC = (this.parent.scrollLeft + (this.parent.offsetWidth * 0.5))
      let viewBoxR = (this.parent.scrollLeft + (this.parent.offsetWidth))
      // console.log(viewBoxL);
      // console.log( this.parent.scrollLeft + (this.parent.offsetWidth*0.5));
      // console.log( this.parent.scrollLeft + (this.parent.offsetWidth));


      //positioning calculations
      let a = (viewBoxC - child1middleBoundary)
      // console.log('a:' + a)
      let b = (viewBoxC - child2middleBoundary)
      // console.log('b:' + b)
      let c = (viewBoxC - child3middleBoundary)
      // console.log('c:' + c)


      // make list of children mid points and get closest number to zero
      let closestChildMid = this.closest(0, [a, b, c])
      console.log("closest: " + closestChildMid)

      //if a highest number scroll to childa
      if (closestChildMid === a) {
        child1El.scrollIntoView({ behavior: "smooth", block: "center" });
      }
      //if b highest number scroll to childb
      if (closestChildMid === b) {
        child2El.scrollIntoView({ behavior: "smooth", block: "center" });
      }
      //if c highest number scroll to childc
      if (closestChildMid === c) {
        child3El.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    }
  }
}

Not in the snapshot, but jsut so you are aware this is in app.module Directive Module:

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

import { WindowSnapDirective } from './windowsnap.directive';



@NgModule({
    imports: [],
    providers: [],
    exports: [WindowSnapDirective],
    declarations: [WindowSnapDirective]
})
export class WindowSnapModule { }

This is third window in the snapshot: Parent Component:

import { OnInit } from '@angular/core';
import { OrgStateService } from './../../shared/services/OrgManagement/OrgState.service';

import { Component } from '@angular/core';
import { slideToRight } from '../../router.animations';

@Component({
  selector: 'app-org-management',
  templateUrl: './org-management.component.html',
  styleUrls: ['./org-management.component.css'],
  // host: {
  //   'class': 'blade-container'
  // },
  animations: [slideToRight()]
})
/** OrgManagement component*/
export class OrgManagementComponent implements OnInit {

  ngOnInit() {
    console.log('org-management is running')
  }

  level0: string;
  level1: string;
  level2: string;
  level3: string;
  level4: string;
  level5: string;
  level6: string;

  constructor(private viewstate: OrgStateService) {
    this.viewstate.currentLevel0.subscribe(level0 => this.level0 = level0)
    this.viewstate.currentLevel1.subscribe(level1 => this.level1 = level1)
    this.viewstate.currentLevel2.subscribe(level2 => this.level2 = level2)
    this.viewstate.currentLevel3.subscribe(level3 => this.level3 = level3)
    this.viewstate.currentLevel4.subscribe(level4 => this.level4 = level4)
    this.viewstate.currentLevel5.subscribe(level5 => this.level5 = level5)
    this.viewstate.currentLevel6.subscribe(level6 => this.level6 = level6)
  }
}

First window in the snapshot: Parent Template:

<div class="blade-container" windowsnap>
  <!-- level 1 -->
  <org-management-blade #child01> </org-management-blade>

  <!-- level 2 -->
  <org-setup #child02 *ngIf="level2 === 'orgSetup'"></org-setup>
  <!-- <process-user *ngIf="stateUserMan === 'processUserReq'"></process-user>
  <pending-user *ngIf="stateUserMan === 'pendingUserReq'"></pending-user> -->

  <!-- level 3 -->
  <org-info #child03 *ngIf="level3 === 'orgInfo'"></org-info>
  <org-admins #child03 *ngIf="level3 === 'orgAdmins'"></org-admins>
  <org-cust-mapping #child03 *ngIf="level3 === 'custMapping'"></org-cust-mapping>
  <org-security-profiles #child03 *ngIf="level3 === 'secProfiles'"></org-security-profiles>

  <!-- level 4 -->
  <org-create-admin #child04 *ngIf="level4 === 'orgCreateAdmin'"></org-create-admin>
  <org-new-security-profile #child04 *ngIf="level4 === 'newSecProfile'"></org-new-security-profile>
  <org-railroad-filter #child04 *ngIf="level4 === 'newSecRailroadFilter'"></org-railroad-filter>

  <!-- level 5 -->
  <org-security-permissions  #child05 *ngIf="level5 === 'newSecPerms'"></org-security-permissions>

  <!-- level 6 -->

</div>