Can I use Logical operators inside a delimeter [ ] or use 2 delimeters in angular?

Question

My co-worker says I cannot use Logical operators inside square [ ] bracket delimeters inside angular. But when I use it works perfectly fine. Is there any reason behind it? For example,

<mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of formfield.value" [value]="option.CountryCode || option.CountryName">{{option.CountryCode}} {{option.CountryName}}

is the above code written correctly or should I change syntax usage?

I tried to use 2 delimeters inside same tag with a logical operator added to it.

Answer 1

<mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of formfield.value" [value]="option.CountryCode || option.CountryName">{{option.CountryCode}} {{option.CountryName}}

This is okay, but for more readability you can use method and return the result like below.

[value]="getOptionValue(option)";

in .ts file please add the method :

getOptionValue(option : any): string{
  return ( option.CountryCode || option.CountryName );
}