Constructor in component runs code before data is available

Question

I have a MapComponent that I call in my app:

<map street="{{firstunit.street}}"
    house-number="{{firstunit.houseNumber}}"
    house-number-extension="{{firstunit.houseNumberExtension}}"
    house-number-letter="{{firstunit.houseNumberLetter}}"
    city="{{firstunit.city}}" 
/>

In my component I have the correct bindings and a constructor that initializes a map based on LeafleftJS:

@Component('CustomerService', {
    templateUrl: '/CustomerService/_UnitCard/MapComponent/Map.html',
    selector: 'map',
    bindings: {
        street: '@',
    }
})

constructor() {
   console.log(this.street);
    setTimeout(() => {
        console.log(this.street);
        this.map = L.map('streetmap_tab_osm').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
    }, 2500);
}

When I open the page with the MapComponent the first console.log(this.street) is undefined and the one in the settimeOut works fine. But I don't want to depend on a a setTimeout of course. Am I abusing the constructor? Or is there something else I'm missing?

Constructor in component runs code before data is available

0 Answers0