KylerJohnson26

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  constructor() {}

   @HostBinding('class.open') isOpen = false;

KylerJohnson26

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  constructor(
    private elRef: ElementRef,
    private renderer: Renderer2

KylerJohnson26

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  constructor(
    private elRef: ElementRef
  ) { }

KylerJohnson26

.dropdown-btn {
  background: #0288D1;
  border: 1px solid #0288D1;
  border-radius: .25em;
  color: white;
  cursor: pointer;
  font-size: 1.5em;
  outline: 0;
}

KylerJohnson26

<div class="wrapper">

  <button appDropdown class="dropdown-btn" type="button">Menu</button>

  <div class="dropdown">
    <a href="https://medium.com/@kylerjohnson26" class="dropdown-item">Find me on Medium</a>
    <a href="https://twitter.com/KylerJohnson26" class="dropdown-item">Find me on Twitter</a>
    <a href="https://github.com/KylerJohnson26" class="dropdown-item">Find me on Github</a>
  </div>

KylerJohnson26

@Directive({
  selector: '[appDropdown]'
})
export default class Dropdown { }

KylerJohnson26

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  { path: '', component: ProfileComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],

KylerJohnson26

{
  path: 'profile', 
  loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
},

KylerJohnson26

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './core/home/home.component';

const routes: Routes = [
  {
    path: 'profile', 
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
  },
  {

KylerJohnson26

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [