[Fixed] String interpolation not working Angular 7

Issue

I am trying to display a dynamic property in my card value as below –

<div class="card-block pt-2 pb-0">
    <div class="media">
        <div class="media-body white text-left">
            <h3 class="font-large-1 mb-0">{{totalprofiles}}</h3>
                <span>Total Cost</span>
        </div>
        <div class="media-right white text-right">
            <i class="icon-bulb font-large-1"></i>
        </div>
    </div>
</div>

The property totalprofiles is a simple number field in my component, however it doesn’t get interpolated in the card or any where in the html template. Below is the code from component

@Component({
    selector: 'app-dashboard2',
    templateUrl: './dashboard2.component.html',
    styleUrls: ['./dashboard2.component.scss']
})

export class Dashboard2Component {
    totalprofiles = 100;
}

I am trying to figure out why. I am using Angular CLI version (7.0.2).

Update —

After doing multiple tries I can confirm that nothing seems wrong with the html template. I replaced the html template with the below code –

<div>
    <h3>{{totalprofiles}}</h3>
</div>

Even this doesn’t seem to be working, so I guess it is something with the component. Still trying to figure out and I will update after some more research.

Solution

This was difficult to figure out and I couldn’t find any answer, however I was able to solve the problem by creating another component and copying the template and component code from old components. Though this was more of a work-around but it did solve the problem.