The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

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 (208) [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 (208) [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 (5) [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;