Angular2 bind using conditional operator

Question

I have a question about the binding in angular2.

I wrote a simple component, this is the code:

@Component({
    selector: 'drawer-item',
    templateUrl: '../res/views/drawer-item.html'
})
export class DrawerItemComponent
{
    @Input() text:string;
    @Input() icon:string;
    @Input() textClass:string;
}

<div class="drawer-item-text word-wrap {{textClass}}"> {{text}}</div>
<i class="mdi mdi-{{icon}} drawer-item-img"></i>

I use it like this:

<drawer-item (click)="selectCompany()" [text]="selectedCompanyLabel" [icon]="selectedCompanyIcon" [textClass]="selectedCompanyClass"></drawer-item>

As you can see I'm binding the text with variable, for example with selectedCompanyLabel. In this way everything works great, and if selectedCompanyLabel change tha label changes as well.

I would avoid that variable using something like:

[text]="company ? 'company.name' : 'Select a company'"

But is this way the content is not binded. So if company changes, the label is not updated.

But if I use that strategy in a style, it works! For example something like works great:

<div class="company ? 'italic' : 'bold'"> ... </div>

Do you know why?

Thanks a lot

Thierry Templier · Accepted Answer · 2016-04-11 13:10:56Z

22

I would use the following instead:

[text]="company ? company.name : 'Select a company'"

No quotes for company.name.

answered Apr 11, 2016 at 13:10

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2016-04-11 13:11:04Z

6

Not sure from your question what the problem is but I guess this is what you're looking for

[text]="company?.name"

answered Apr 11, 2016 at 13:11

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

Angular2 bind using conditional operator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related