draw circles around another circle using Angular

Question

i'd like to form 8 small circles around my main circle and then write stuff in each of them. I tried to do it with only some css, here's what i've managed to do, but honestly, i feel like i should use another way...

Maybe some typescript (since i'm using the Angular framework) could help out? If anyone could help me out please... the problem is that i need to make way bigger circles and putting images and text in each. Since it's the first time i'm trying this kind of thing with forms, i'm a bit confused on where i should i start or look for.

Thanks.

.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
    text-align: center;
  vertical-align: middle;
}

.one {
    left: -25px;
    top: -25px;
}

.two {
    top: -60px;
    left: 50px;
}

.three {
    right: -25px;
    top: -25px;
}


.four {
    left: -25px;
    bottom: -25px;
}

.five {
    bottom: -60px;
    left: 50px;
}

.six {
    right: -25px;
    bottom: -25px;
}
.seven {
    bottom: 50px;
    left: -60px;
}
.eight {
    top: 50px;
    left: 160px;
}

<div id="big-circle" class="circle big"> test<br>test
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
    <div class="circle five"></div>
    <div class="circle six"></div>
    <div class="circle seven"></div>
    <div class="circle eight"></div>
</div>