title: angular 2 typescript An implementation cannot be declared in ambient contexts
body: <p>I am new to typescript and I am trying to create a function for an angular 2 directive.
  Can anyone explain, in language for n00bs, what the error is trying to tell me when I am compiling with Gulp?</p>
  
  <blockquote>
    <p>An implementation cannot be declared in ambient contexts</p>
  </blockquote>
  
  <p>The message applies to <code>offset()</code> and <code>toggler()</code>.</p>
  
  <pre><code>import { Directive, ElementRef, Input } from '@angular/core';
  
  @Directive({
    selector: 'offCanvas',
    inputs: ['target', 'toggle', 'placement', 'autohide', 'recalc', 'disableScrolling', 'modal', 'canvas', 'exclude'],
    host: {
      '(click)': 'Click()'
    }
  })
  
  export class OffCanvas {  
    @Input('target') target: string;
    @Input('canvas') canvas: string;
    @Input('state') state: string;
    @Input('exclude') exclude: string;
    @Input('placement') placement: string;
    @Input('toggle') toggle: boolean;
    @Input('autohide') autohide: boolean;
    @Input('recalc') recalc: boolean;
    @Input('disableScrolling') disableScrolling: boolean;
    @Input('modal') modal: boolean;
  
    public offset() {
      switch (this.placement) {
        case 'left':
        case 'right':  return (&lt;HTMLElement&gt;document.querySelector(this.target)).offsetWidth
        case 'top':
        case 'bottom': return (&lt;HTMLElement&gt;document.querySelector(this.target)).offsetHeight
      }
    }
  
    public toggler() {
      if (this.state === 'slide-in' || this.state === 'slide-out') return
      this[this.state === 'slid' ? 'hide' : 'show']()
    }
  
    Click() {
      this.toggler()
    }
  }
  </code></pre>