ReferenceError in Angular driving me crazy

I am working on a program and I am implementing a function with click. Now it has been a while since I did Angular, but this referenceError is driving me crazy. I have a function.

 dosomeshit(stringelement: string): void{
    console.log("reached function: " + stringelement);
  }

which is activated by this button.

<div class="flexcontainer">
    <div class="card" style="width: 18rem; margin-left: 2%;">
        <div class="card-header">
            <h2>Overzicht:</h2>
          </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item" *ngFor="let stringelement of elements">
              <div class="flexinsideli">
                <div style="width: 90%;">
                  <p> {{stringelement}} </p>  
                </div>
              <div>
                <button type="button" onclick="dosomeshit(stringelement)">
                    <fa-icon class="fa-1x" [icon]="faPlus"></fa-icon>
                </button> 
              </div>
            </div>          
            </li>
        </ul>

        <div class="login-alert-msg" *ngIf="errorMessageList">{{errorMessageList}}</div>
    </div>

now I keep getting a referenceError: 14 Uncaught ReferenceError: dosomeshit is not defined
at HTMLButtonElement.onclick ( ..

when I use click nothing happens at all. Why is my function not reached when I click the button? Why would dosomeshit not be defined? I did define it in my ts file.

Instead of onclick or click use (click). It should work. This is the right syntax in Angular for event binding.