CODEWITHSUNDEEP
angular
Jeet
Jeet

Reputation: 5659

String interpolation not working Angular 7

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.

Upvotes: 0

Views: 6727

Answers (3)

W S
W S

Reputation: 1

this might be the issue with your editor while using live server ,angular runs in port number http://localhost:4200/ your ide live server might run on different port .

  1. first solution ,directly run your project with this http://localhost:4200/

  2. second solution , make use of , ng serve --port5500 if its a live server in vscode editor, or use the port number that your favorite Ide uses by default as mentioned above.

ng serve --port;

this will resolve your issue.

Upvotes: 0

Irshad KK
Irshad KK

Reputation: 63

I had the same problem and i fixed it declaring the type of the variable declared to any.

export class Dashboard2Component {
    totalprofiles:any = 100;
}

Upvotes: 2

Jeet
Jeet

Reputation: 5659

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.

Upvotes: 0

Related Questions