Answer from back end comes back like this:

POSTMAN answer to GET REQUEST

I have a service method that sends the GET request to the back-end API.

export class PowerPlantService {
  constructor(private http: HttpClient) { }

  getAll() {
    return this.http.get(baseUrl);
  }

In the component, I create a service variable and call that GET method and subscribe to the result (data) . Then I add the data (which is a feature collection as seen in the picture above) to the map. Final line of code below.

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 //coordinates for Brasov
  private latitude: number = 45.6427;
  private longitude: number = 25.5887;
  private tiles?: any;
  private geoJsonFeature?: any;
   
  private map!: L.Map;
  private centroid: L.LatLngExpression = [this.latitude, this.longitude];

  ngOnInit(): void {
    this.initMap();
  }
  
  constructor(private powerPlantService: PowerPlantService) { 
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: this.centroid,
      zoom: 2.8
    });

    this.tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {
      minZoom: 2.8,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    this.tiles.addTo(this.map);
    
    this.powerPlantService.getAll().subscribe((data: any)=>{
      console.log(data);
      this.geoJsonFeature = data;
      
      L.geoJSON(data).addTo(this.map) 
    }) 

This is how the pins are displayed on the map, this is just an example for reference.

I have tried to find a way to bind a pop-up activated on click for each pin of the feature collection which displays the properties of each Feature from the FeatureCollection but I can't find a tutorial anywhere.