String interpolation not working Angular 7

Question

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.

Nothing seems to be wrong in the html.. any error in the console? — Pankaj Parkar
– Pankaj Parkar, Commented Feb 21, 2019 at 15:13
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it by including a minimal reproducible example. See also How do I ask a Good Question. I recommend you include a stackblitz.com — Igor
– Igor, Commented Feb 21, 2019 at 15:14
@PankajParkar , that is the problem nothing seems wrong with the html and component as well, I don't see any error on console too. :( — Jeet
– Jeet, Commented Feb 21, 2019 at 15:18
I have replicated the same code which you given in your question in the link stackblitz.com/edit/angular-v8bkyq and its working fine.. Only difference you can see in this link is component name as app instead of dashboard2.. — Maniraj Murugan
– Maniraj Murugan, Commented Feb 21, 2019 at 15:20
I also tried same in stackblitz.com/edit/angular-bvk21p and it works fine there. Now the question is what might be wrong ? — Jeet
– Jeet, Commented Feb 21, 2019 at 15:24

Irshad KK · Accepted Answer · 2019-04-07 07:38:42Z

2

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

export class Dashboard2Component {
    totalprofiles:any = 100;
}

answered Apr 7, 2019 at 7:38

Irshad KK

632 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeet · Accepted Answer · 2019-02-21 17:59:09Z

0

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.

answered Feb 21, 2019 at 17:59

Jeet

5,64710 gold badges50 silver badges80 bronze badges

Comments

W S · Accepted Answer · 2021-03-22 13:56:14Z

0

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 .

first solution ,directly run your project with this http://localhost:4200/
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.

answered Mar 22, 2021 at 13:56

W S

11 bronze badge

Collectives™ on Stack Overflow

String interpolation not working Angular 7

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related