Can't add a resize handle for an svg element in Angular

I am trying to build a web-based paint application using Angular and I am still a bit new to web development. My application uses svg elements to render geometric shapes such as circle, rectangles,..etc but I can't add a resize functionality to my application, I want to the user to be able to resize any svg element at will.

Here's my code

circle.component.html

<svg>
    <circle *ngFor="let circle of circles; let i = index" 
    (focus)="selectObject(i)" 
    [attr.cx]="circle.x" 
    [attr.cy]="circle.y" 
    [attr.r]="circle.r&qu开发者_StackOverflow社区ot; 
    [attr.fill]="circle.color" 
        stroke="black"
        strokeWidth="3"
        cdkDrag 
    >
</circle>
</svg>

circle.component.ts

@Component({
  selector: '[app-circle]',
  templateUrl: './circle.component.html',
  styleUrls: ['./circle.component.css'] 
})
export class CircleComponent implements OnInit {

  isPressed = false;
  selectedID = 1;

  constructor() { }

  ngOnInit(): void {
  }

  circles: Circle[] = [
    {id:0, x: 50, y: 50, r: 40, color: 'red'},
    {id:1, x: 100, y: 200, r: 50, color: 'green'},
    {id:2, x: 200, y: 300, r: 60, color: 'blue'} 
  ];

  selectObject(index: number){
    this.selectedID = index;
    console.log('select called with index ' + index);
  }

}

I know i can simply change the r value for the circle I want to resize easily but I don't know how to add handles to my svg element to indicate that this is possible like this: What I want to achieve

I have tried putting 4 div elements as a child element inside my circle element to style it into little resize handles, but it turns out I can't put divs inside svg.

I also tried putting basic circle svg elements inside my circle and then style it, but angular does not render them.