Angular bind img src from typescript function

I want to bind src of html tag img from typescript function.
Here is my Html.

<button (click)="createBoard()"> Create Board</button>
<table>
 <tr *ngFor="let i of board; let a = index">
  <td *ngFor="let j of i; let b = index">
    <div class="bDefault">
      <img src="getImage(a,b)"  
      (click)="changeImg(a,b, $event)">
    </div>
  </td>
 </tr>
</table> 

And here is my typescript.

size : number = 5;
board : number[][] = [];

createBoard(){
 this.board = new Array(this.size);
 for(let i=0; i<this.size; i++){
  this.board[i] = new Array(this.size);
  for(let j=0; j<this.size; j++){
    this.board[i][j] = 0;
  }
 }
}

getImage(i:any, j:any){
  if(this.board[i][j] == 0){
    return "../../../assets/oth/default.jpg";
  } else if(this.board[i][j] == 1){
    return "../../../assets/oth/bidak_hitam.jpg";
  } else {
    return "../../../assets/oth/bidak_putih.jpg";
  }
}

changeImg(i:any, j:any, event:Event){
  if(this.board[i][j] == 2){
    this.board[i][j]  = 0;
  } else {
    this.board[i][j] ++;
  }
}

In this code the image is not found. Is there a way to get the image from a function in typescript or angular?

In your code the getImage(a,b) is being used as a static string

<img src="getImage(a,b)" (click)="changeImg(a,b, $event)">

to dynamically interpolate it use the property binding instead

<img [src]="getImage(a, b)" (click)="changeImg(a, b, $event)">

Here the src would get dynamic data from getImage.

You should avoid use a function in the .html, I suggest you create an array of object with value and path. Some like

this.board = new Array(this.size);
 for(let i=0; i<this.size; i++){
  this.board[i] = new Array(this.size);
  for(let j=0; j<this.size; j++){
    this.board[i][j] = {value:0,path:'assets/oth/default.jpg'};
  }
 }

When change the images your function

changeImg(i:any, j:any, event:Event){
  if(this.board[i][j].value == 2){
    this.board[i][j]={value:0
                      path='assets/oth/default.jpg'}
  } else {
    if (this.board[i][j].value==0)
       this.board[i][j]={value:1
                         path='assets/oth/bidak_hitam.jpg'}
    else
       this.board[i][j]={value:2
                         path='assets/oth/bidak_putih.jpg'}
  }
}

So you use

  <img src="board[a][b].path"  
      (click)="changeImg(a,b, $event)">

And not force Angular to execute the function getImage