CODEWITHSUNDEEP
javascriptangulartypescript
Mark
Mark

Reputation: 5108

Booleans in Angular 4 templates

I'm using Angular 4.

I have a simple component called Price Difference. I want to decide whether to show the header or not:

<price-difference showHeader="true"></price-difference>

And in PriceDifferenceComponent:

@Input() showHeader: boolean;

And in the template:

<div class="header-container" *ngIf="showHeader == true">
    <h3>some header</h3>
</div>

showHeader is {{ showHeader }}
<br /> 
showHeader == true is {{ showHeader == true }}

The header doesn't show even though showHeader is true. In the template I see:

showHeader is true 
showHeader == true is false

Go figure that one out.

How do I get the template to treat showHeader as a boolean value?

Upvotes: 0

Views: 38

Answers (1)

Alex F
Alex F

Reputation: 3549

You must put the [ ] around binded variable:

<price-difference [showHeader]="true"></price-difference>

Upvotes: 1

Related Questions