title: Inject an Interface with Angular 4
body: <p>I'm trying to create a generic <code>DeleteableConfirmationComponent</code> that will allow me to show a confirmation dialog and invoke the <code>delete</code> method from any injected service implementing a <code>Deleteable</code> infterface.</p>
  
  <p>To do so, I've created this Interface:</p>
  
  <pre><code>export interface Deleteable {
    delete(object);
  }
  </code></pre>
  
  <p>and I have a service that implements it:</p>
  
  <pre><code>@Injectable()
  export class LocalityService implements Deleteable {
    delete(locality): Observable&lt;Locality&gt; {
      // Delete logic.
    }
  }
  </code></pre>
  
  <p>For the <code>DeleteableConfirmationComponent</code>, I've tried to inject the service using constructor:</p>
  
  <pre><code>export class DeleteableConfirmationComponent {
    constructor(
      public dialog: MdDialogRef&lt;DeleteableConfirmationComponent&gt;,
      @Inject(MD_DIALOG_DATA) public data: any,
      private service: Deleteable
    ) {}
  
    delete() {
      this.service.delete(this.object)
                  .subscribe(() =&gt; {
                    this.dialog.close();
                  });
    }
  }
  </code></pre>
  
  <p>but unfortunately, I've got an error saying <strong>it can't resolve all parameters for DeleteableConfirmationComponent</strong>.</p>
  
  <p>For now, I'm using the dialog data options, in order to pass my service:</p>
  
  <pre><code>confirmDelete(locality) {
    this.dialog.open(DeleteableConfirmationComponent, {
      data: {
        service: this.localityService
      }
    });
  }
  </code></pre>
  
  <p>but it feels dirty and does allow any kind of service to be injected while I want to force service that implement the <code>Deleteable</code> interface.</p>
  
  <p>I was thinking I could probably be better going with an <code>abstract class</code> but I'm more a fan of composition over inheritance.</p>
  
  <p>Any idea or best practice advise?</p>