Angular2 binding using conditional operator

Question

I have a binding question 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 as follows:

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

As you can see, I bind the text with a variable, for example using selectedCompanyLabel. This way everything works fine, and if selectedCompanyLabel also changes the label change.

I would avoid this variable using something like:

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

But in this way the content is not tied. Therefore, if the company changes, the label is not updated.

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

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

Do you know why?

thanks a lot

Answer 1

Instead, I would use the following:

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

There are no quotes for company.name .

Answer 2

Not sure about your question what the problem is, but I think this is what you are looking for

 [text]="company?.name"