Developing a basic chessboard in angular 4 and highlighting the possible path of a piece

I am stucked at how to show the pieces in the definite squares and how to highlight the path that a piece can take.

I have created the chessboard squares with two sets of arrays "rows" & "columns". Please refer the code snippet for further understanding.

board-model.ts

    export class Board {
Columns = ["a", "b", "c", "d", "e", "f", "g", "h"];
Rows = ["1", "2", "3", "4", "5", "6", "7", "8"];
Squares: Square[][] = BoardHelper.buildSquares(this.Columns,this.Rows);
Pieces: Piece[];
    }

    export class Square {
SquareId : string = "";
IsWhite: boolean = true;
Piece: any = null;
    }

    export class BoardHelper{

       public static buildSquares(columns : string[], rows: string []) {
            var squares: Square[][]; 
            squares = new Array<Square[]>(8);
            var isWhite = false;
            for(var i=1; i<=8; i++)
            {
                squares[i-1]= new Array<Square>(8);
                for(var j=1; j<=8; j++)
                {
                    squares[i-1][j-1] = 
                    {
                        SquareId: columns[j-1] + rows[i-1], 
                        IsWhite: isWhite, 
                        Piece: null 
                    };
                    isWhite = !isWhite;    
                }
                isWhite = !isWhite;    
            }
            return squares; 
        }; 

        }

board.component.ts

     export class BoardComponent{
       Board: Board = new Board();
      }

html

   <div *ngFor="let row of Board.Rows, let i = index">
     <div class="board-square droppable-square" *ngFor="let column of 
     Board.Columns, let j = index" [style.background]= "Board.Squares[7- 
     i][j].IsWhite ? '#c7c2bd' : '#2b2a29'" >
      <a class="square-name" (click)="TracePath([7-i],[j])"> 
      {{Board.Squares[7-i][j].SquareId}}</a>
     </div>
   </div>