Click elements are not working anymor in a ngFor after adding signaturepad

Hey to all, first I wanna thank you for this incredible pad (wrapper). I started coding with angular a week ago and I am currently playing around a bit. In my researches I found this pad which was exactly what I was looking for.

Now I have the following problem: I created a small dummy application which allowes a User to maintain some todos. In the Todo the user can mark is as done or delete it. All of those todos are in a ngFor loop. Every thing is working until I add the directive for the signaturepad. After adding the directive I do not get any Click Events of the inner part of my for loop. I also do not get any error on the console. Currently I have no idea what the problem could be. I hope that someone of you could support me a bit.

My Component:

import { Component, ViewChild, Input } from '@angular/core';
import { Todo } from './todo';
import { TodoDataService } from './todo-data.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SignaturePad }                            from 'angular2-signaturepad/signature-pad';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TodoDataService]
})
export class AppComponent {
  @ViewChild(SignaturePad) public signaturePad: SignaturePad;

  newTodo: Todo = new Todo();

  constructor(private todoDataService: TodoDataService) {

  }

 ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }

  toggleTodoComplete(todo) {
    this.todoDataService.toogleTodoComplete(todo);
  }

  addTodo() {
    this.todoDataService.addTodo(this.newTodo);
    this.newTodo = new Todo();
  }

  removeTodo(todo) {
    this.todoDataService.deleteTodoById(todo.id);
  }

  getOpenTodoCount() {
    return this.todoDataService.getOpenTodoCount();
  }

  get todos() {
    return this.todoDataService.getAllTodos();
  }
}

The corresponding html:

<section class="todoapp">
  <header class="header">
    <div class="card">
      <h3 class="card-header">Neues Todo anlegen</h3>
      <h4>Titel</h4>
      <input class="new-todo" placeholder="Title of the Todo" [(ngModel)]="newTodo.title">
      <h4>Beschreibung</h4>
      <textarea  placeholder="Description" [(ngModel)]="newTodo.description"></textarea>
      <h4>Skizze</h4>
      <button class="btn btn-info" (click)="addTodo()">Add</button>
      <signature-pad (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
    </div>
  </header>
  <h2 class="topMargin">Aktuell offene Todos:</h2>
  <section  *ngIf="todos.length > 0">
      <div *ngFor="let todo of todos">
        <div class="card">
          <h3 class="card-header">{{todo.title}}</h3>
          <div class="card-block">
            <p class="card-text">{{todo.description}}</p>
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-success" *ngIf="!todo.complete">
                <input  type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete">Erledigt
              </label>
              <label class="btn btn-danger">
                <input type="checkbox" (click)="removeTodo(todo)" [checked]="todo.complete">Delete
              </label>
            </div>
          </div>
        </div>
      </div>
  </section>
  <footer class="footer" *ngIf="todos.length > 0">
    <span class="todo-count">Currently are {{getOpenTodoCount()}} of {{todos.length}} {{todos.length == 1 ? 'item' : 'items'}} open</span>
  </footer>
</section>

For debugging issue I also deployed the app HERE

I hope that someone of you has any idea. Thank you very much for your support!

wulfsolter / angular2-signaturepad

Click elements are not working anymor in a ngFor after adding signaturepad #18