felix (7) [Avatar] Offline
#1
I cannot get the summary component to display the AAPL values. All I get is a white box.
I have tracked it down to the <h4>..</h4> block in summary.component.html. This way I only get displayed a white box:
        <div class="mdl-card__title">
            <h4 style="color: #fff; margin: 0">
                {{stock?.symbol?.toUpperCase()}}<br /> 
                {{stock?.lastTradePriceOnly | currency:'USD':true:'.2'}}<br /> 
                {{stock?.change | currency:'USD':true:'.2'}} ({{stock?.changeInPercent | percent}})
            </h4>
        </div>


however this works:

        <div class="mdl-card__title">
                {{stock?.symbol?.toUpperCase()}}<br /> 
                {{stock?.lastTradePriceOnly | currency:'USD':true:'.2'}}<br /> 
                {{stock?.change | currency:'USD':true:'.2'}} ({{stock?.changeInPercent | percent}})
        </div>


but the white background persists (shouldn't it be green)?

What am I missing?
jeremy.wilken (181) [Avatar] Offline
#2
The part that controls the background color is the ngClass on the card.

https://github.com/angular-in-action/stocks/blob/master/src/app/components/summary/summary.component.html#L1

Did you get to this step?
felix (7) [Avatar] Offline
#3
Absolutely yes. I had cross-checked with the book text and the sources on github before posting this question.

Hello-world debugging shows that isPositive() and isNegative() are actually called. It must be cause by some sort of angular/stylesheet-related thing; also for the <h4> text not being displayed - if I remove the style attribute then the stock data is actually displayed even if contained within the h4 brace. However I am completely new to all this frontend stuff so I don't know where to dig further.

Thanks for the support!
jeremy.wilken (181) [Avatar] Offline
#4
I would need you to push up your code to a github repo so I could see it, otherwise I can only guess that you've got a typo or missing step somewhere.

Did you try to clone the repo and run the final result directly?
202622 (3) [Avatar] Offline
#5
I know this is an old thread, but I ran into the same problem. The issue is within the CSS class (summary.component.css) from the book.
The three selector blocks have the following selectors apiece:
background: 33333;
background: 58B2F;
background: 62828;

This styling won't display properly. So while your code IS working, you can't see the text. Try to select everything on the page and you'll see the summary info is there.

To fix: cross referencing with the Github account, the background colors should be:
background: #333333;
background: #5582BF;
background: #C62828;