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

Answer 1

I would use the following instead:

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

No quotes for company.name.

Answer 2

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

[text]="company?.name"