Angular best practices

So I'm creating a chess game and I was just wondering what would be the best practices in this scenario. Basically I have a main component which does the main functionality and also keeps track of the board. Basically I want to get access to the "chessboard" variable as this keeps track of the board in the Pieces/Pawn class so I know what the current state of the board is. What is the best was to go about this as I feel passing the "this" in a constructor would be bad practice

import { Component } from '@angular/core';
import { Pawn } from '../pieces/pawn';
import { Pieces } from '../pieces/pieces';

import { ChangeDetectorRef } from '@angular/core';


@Component({
selector: 'app-board',
templateUrl: './board.component.html',
styleUrls: ['./board.component.css'],
})
export class BoardComponent {
chessboard: (Pieces | null)[][] = [];


highlightedCells: Set<string> = new Set();
lastClickedCell: { row: number; col: number } = {row:-1, col:-1};
playerTurn: string = "Black"


ngOnInit() {
this.chessboard = this.initializeBoard();
}

constructor(private cdr: ChangeDetectorRef) {}


initializeBoard(): (Pieces)[][] {
const blackPawnRow = [
new Pawn("Black", 6, 0, 'BPawn.png'),
new Pawn("Black", 6, 1, 'BPawn.png'),
new Pawn("Black", 6, 2, 'BPawn.png'),
new Pawn("Black", 6, 3, 'BPawn.png'),
new Pawn("Black", 6, 4, 'BPawn.png'),
new Pawn("Black", 6, 5, 'BPawn.png'),
new Pawn("Black", 6, 6, 'BPawn.png'),
new Pawn("Black", 6, 7, 'BPawn.png'),
];

const whitePawnRow = [
new Pawn("White", 1, 0, 'WPawn.png'),
new Pawn("White", 1, 1, 'WPawn.png'),
new Pawn("White", 1, 2, 'WPawn.png'),
new Pawn("White", 1, 3, 'WPawn.png'),
new Pawn("White", 1, 4, 'WPawn.png'),
new Pawn("White", 1, 5, 'WPawn.png'),
new Pawn("White", 1, 6, 'WPawn.png'),
new Pawn("White", 1, 7, 'WPawn.png'),
];

const emptyRow = Array(8).fill(null);

return [
emptyRow.slice(),
whitePawnRow.slice(),
emptyRow.slice(),
emptyRow.slice(),
emptyRow.slice(),
emptyRow.slice(),
blackPawnRow.slice(),
emptyRow.slice(),
];
}

getCellColor(rowIndex: number, colIndex: number): string {
const res = (rowIndex + colIndex) % 2 === 0 ? 'gray' : 'white'

if( this.highlightedCells.has(`${rowIndex}, ${colIndex}`)){
return `${res} opacity`

}

return res

}

handleCellSelection(rowIndex: number, colIndex: number): void {
this.lastClickedCell.row = rowIndex;
this.lastClickedCell.col = colIndex;

const pieces = this.chessboard[rowIndex][colIndex];
if (pieces !== null) {
const res = pieces.validMoves();
this.updateHighlightedCells(res);
}
}

validMoves (rowIndex:number, colIndex:number) {

if(this.playerTurn === this.chessboard[rowIndex][colIndex]?.getColor()){
if(this.highlightedCells.size!=0 && !this.highlightedCells.has(`${rowIndex}, ${colIndex}`)){


this.highlightedCells.clear()

this.handleCellSelection(rowIndex, colIndex)

}

else if(this.highlightedCells.size==0){
this.handleCellSelection(rowIndex, colIndex)

}
}


else if(this.highlightedCells.has(`${rowIndex}, ${colIndex}`)){
this.highlightedCells.clear()

let old_pos = this.chessboard[this.lastClickedCell.row][this.lastClickedCell.col]

const oldColor = old_pos?.getColor();
const newColor = this.chessboard[rowIndex][colIndex]?.getColor();

if (oldColor === "Black") {
if (newColor === "White" || !newColor) {
this.playerTurn = "White";
}
}

else if (oldColor === "White") {
if (newColor === "Black" || !newColor) {
this.playerTurn = "Black";
}
}


this.chessboard[this.lastClickedCell.row][this.lastClickedCell.col] = null


old_pos?.setPrevRow(rowIndex)
old_pos?.setPrevCol(colIndex)

this.chessboard[rowIndex][colIndex] = old_pos

}


}

updateHighlightedCells(highlightedCells: string[]){

for (const cell of highlightedCells) {

this.highlightedCells.add(cell)


}


}

isCellHighlighted(rowIndex: number, colIndex: number){

const ans = this.highlightedCells.has(`${rowIndex}, ${colIndex}`);
return ans

}

}





export abstract class Pieces {

private color: string;
private prevRow: number
private prevCol: number
public image: string

constructor(color: string, prevRow: number, prevCol:number, image: string){
this.color = color
this.prevRow = prevRow
this.prevCol = prevCol
this.image = image
}

abstract validMoves(): string[];

setPrevRow(row:number){
this.prevRow = row
}

setPrevCol(col:number){
this.prevCol = col
}


getColor() {
return this.color
}

getPrevRow(){
return this.prevRow
}

getprevCol(){
return this.prevCol
}

// setHighlightedCells(val: boolean) {
// console.log("val", val)
// this.highlightedCells = val ? !val: val
// }

// getHighlightedCells(){
// console.log("in edfjv", this.highlightedCells)
// return this.highlightedCells
// }

}





import { Pieces } from "./pieces";



export class Pawn extends Pieces {



validMoves(): string[] {


let newMoves: string[] = [];

const prevRow = this.getPrevRow()
const prevCol = this.getprevCol()

if(this.getColor() === "Black"){
if(prevRow === 6 ) {
newMoves.push(`${prevRow-2}, ${prevCol}`)
}

newMoves.push(`${prevRow-1}, ${prevCol}`)

}

else if(this.getColor() === "White"){
if(prevRow === 1 ) {
newMoves.push(`${prevRow+2}, ${prevCol}`)
}

newMoves.push(`${prevRow+1}, ${prevCol}`)
}

return newMoves

// if(this.getPrevRow() === 6 && this.getColor() === "black"){
// newMoves.push([5,this.prevCol])
// newMoves.push([4,this.prevCol])
// }
}



}




``

Continue reading...