Angular/Laravel display a models main image through a relationship

I have a model named 'property'. Each property can have many photos, but can only have one main photo. I have a API function written that returns all properties, with all the photos via an eloquent relationship.

public function all(User $user)
{
    $properties = $user->properties()->get();

    if (!$user)
    {
        return response()->json(['error' => 'User does not exist'], 404);
    }

    if (!$properties)
    {
        return response()->json(['error' => 'No properties'], 200);
    }

    return response()->json($properties);
}

This returns to me a list of all properties created by a certain user, with an array of photos in JSON format.

I have a service in angular which gets all these photos.

Advert Service

getAllProperties(userId: number) {
    return this.http.get(this.baseUrl + userId + '/all');
  }

I then have a dashboard component where I link to this service functionality and display all the properties.

export class DashboardComponent implements OnInit {

  properties: Property[];

  constructor(private advertService: AdvertService, private alertify: AlertifyService) { }

  ngOnInit() {
    this.getAllProperties();
  }

  getAllProperties() {
    const user = JSON.parse(localStorage.getItem('user'));
    this.advertService.getAllProperties(user.id).subscribe((properties: Property[]) => {
      this.properties = properties;
    }, error => {
      this.alertify.error(error);
    });
  }
}

I then display all the adds in my html like so.

<div class="container mt-5">
  <div class="row">
    <div *ngFor="let property of properties" class="col-lg-2 col-md-3 col-sm-6">
      <div class="card mb-4">
        <div class="card-img-wrapper">
          <img class="card-img-top" src="" alt="">
          <h1></h1>
          <ul class="list-inline member-icons animate text-center">
            <!-- <li class="list-inline-item" [routerLink]="['/members/', user.id]"><button class="btn btn-primary"><i class="fa fa-user"></i></button></li> -->
            <li class="list-inline-item"><button class="btn btn-primary"><i class="fa fa-heart"></i></button></li>
            <li class="list-inline-item"><button class="btn btn-primary"><i class="fa fa-envelope"></i></button></li>
          </ul>
        </div>
        <div class="card-body p-1">
          <h6 class="card-title text-center mb-1">
            <i class="fa fa-user"></i>
            , , 
          </h6>
          <p class="card-text text-muted text-center"></p>
        </div>
      </div>
    </div>
  </div>
</div>

I would like to display the main photograph url that belongs to the property. Each photo record has a isMain boolean property.

Below are the typescript models for Property and Photo

photo.ts

export interface Photo {
    id: number;
    url: string;
    isMain: boolean;
}

property.ts

import { Photo } from './photo';

export interface Property {
    id: number;
    town?: string;
    county?: string;
    address: string;
    postocde: string;
    eircode: string;
    property_type: string;
    selling_type: string;
    price: number;
    bedrooms: number;
    bathrooms: number;
    size: number;
    building_energy_rating: string;
    description: string;
    user_id: number;
    photos: Photo[];
}

How do get the photo url for each property.

thank you

via Chebli Mohamed