Angular HTML is not showing total features from openlayers

Question

I'm building application using Angular and Openlayers. I have a function working on zoomend which gives me a total number of features in the current box. I'm able to get the output in console.log but not in HTML.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'olnew';
  map;
  features 
  featlength
  ngOnInit(){
    this.map = new Map({
      target:'map',
      view: new View({
        projection:'EPSG:4326',
        center:[-94.18246640804583, 34.96110848844138],
        zoom:9
      }),
      layers:[
        new TileLayer({
        source: new OSM()
        })
      ]
    })
   
    this.map.on('moveend', function(e){
      var mapp = e.map
      console.log(mapp.getView().calculateExtent())
      fetch('http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp%3Astates&bbox='+mapp.getView().calculateExtent()[0]+','+mapp.getView().calculateExtent()[1]+','+mapp.getView().calculateExtent()[2]+','+mapp.getView().calculateExtent()[3]+'&outputFormat=application%2Fjson')
      .then(res => 
        res.json())
      .then(data => {
        console.log(data)
        this.features = data.features
        
        this.featlength = data.features.length
        console.log('feat lent ='+ this.featlength)
      })
      .catch(err => console.log(err))
    })
  }

}

app.component.html

<h3>{{ title }}</h3>

<div id="map" class="map"></div>

<div>Total feat = {{ featlength }}</div>
<ul>
  <li *ngFor="let feat of features">
    {{ feat.id }}
  </li>
</ul>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have added browserModule and CommonModule as well

What am I doing wrong?

Answer 1

This is most likely caused by the html getting rendered before a value is assigned to the variable & not getting updated once it is assigned a value. Adding an ngIf condition to the like such should fix this.

<div *ngIf="featlength ">Total feat = {{ featlength }}</div>

Answer 2

Do you see the error if you have at the top of the console? Can't bind to 'ngForOf' since it isn't a known property of 'li' - this should be dealt will, and will probably fix what's wrong with the rest of the page.

What you need to do is to make sure you import BrowserModule in the application's main module, and also import CommonModule in the child module (where this component is found)

Also see this answer