Angular2 not rendering "static" text on page loads

Question

So this is kinda difficult to explain so I have a sort video of the issue with annotations

It seems like static text is not rendering (see the H3 tag). The dynamic stuff like {{ foo.bar }} and things in loops seem to work fine. It is happening to all pages as far as I can tell.

I used the AngularClass repo as a starting point.

When the page is loaded directly or refreshed (F5 etc)

When its accessed via a link from another page

template file

<h3>GPS raw data</h3>
<div class="row" *ngIf="gps && gps.location">
    <div class="col-md-4">
        <strong>Time:</strong> {{ gps.location.timestamp }}
    </div>
    <div class="col-md-4">
        <strong>Latitude:</strong> {{ gps.location.latitude }}
    </div>
    <div class="col-md-4">
        <strong>Longitude:</strong> {{ gps.location.longitude }}
    </div>
</div>

There is no errors in the console.

edit

Another image to possibly clear up what the actual problem is. Note the HTML has content in the title, its hard coded. But its not displayed.

What is the issue. Even after watching the video ,I can't understand. — micronyks
– micronyks, Commented Oct 16, 2016 at 15:47
Did you have annotations on? it explains step by step in the annotations. Anyway, see the latest image I have added. — dogmatic69
– dogmatic69, Commented Oct 16, 2016 at 18:46

micronyks · Accepted Answer · 2016-10-16 15:51:45Z

1

1) 1st solution, it should be *ngIf and not ng-if

<div class="row" *ngIf="gps && gps.location">                    //<<<===here
    <div class="col-md-4">
        <strong>Time:</strong> {{ gps.location.timestamp }}
    </div>
    <div class="col-md-4">
        <strong>Latitude:</strong> {{ gps.location.latitude }}
    </div>
    <div class="col-md-4">
        <strong>Longitude:</strong> {{ gps.location.longitude }}
    </div>
</div>

2) 2nd solution, don't use *ngIf and use ?. operator as shown below,

<div class="row" > 
    <div class="col-md-4" >
        <strong>Time:</strong> {{ gps?.location.timestamp }}      //<<<==here
    </div>
    <div class="col-md-4">
        <strong>Latitude:</strong> {{ gps?.location.latitude }}   //<<<==here
    </div>
    <div class="col-md-4">
        <strong>Longitude:</strong> {{ gps?.location.longitude }} //<<<==here
    </div>
</div>

answered Oct 16, 2016 at 15:51

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

2 Comments

dogmatic69 Over a year ago

the ngIf has been changed, but that is not the problem. Please see the updated image. Its nothing to do with the template variables. Its the static text that is not showing.

dogmatic69 Over a year ago

damn, its working fine in firefox. Has the same buggy behaviour in chrome (what I was using) and chromium.

Nathan Tuggy · Accepted Answer · 2017-06-24 06:28:36Z

0

I encountered the same issue on Chrome and fixed it by removing the font-size style applied on that element. Not sure why, might be a bug of Chrome.

edited Jun 24, 2017 at 6:28

Nathan Tuggy

2,23727 gold badges33 silver badges38 bronze badges

answered Jun 24, 2017 at 6:04

wildwind

34 bronze badges

Collectives™ on Stack Overflow

Angular2 not rendering "static" text on page loads

edit

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

edit

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related