56

I have a table which is being populated through the add client form. It works fine and the changes are displayed. The thing is I have a select list in which a user selects the specific source and then it is saved in ngmodel. Here is the code.

Select List

 <mat-select [(ngModel)]="model.source" name="source" placeholder="Select Source ">
      <mat-option [value]="1 ">Upwork</mat-option>
      <mat-option [value]="2 ">Refer from Friend</mat-option>
      <mat-option [value]="3 ">Other</mat-option>
    </mat-select>

Now in my table the value which displays is 1 or 2 or 3 based on the selection. I want to write something, a condition in interpolation like this.

Table Field

<ng-container matColumnDef="source">
  <mat-header-cell *matHeaderCellDef> Source </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.source ? if value is 1 : display (upwork), if value is 2 : display(refer from friend)}} </mat-cell>
</ng-container>

Some thing like this, I did like it in angularjs I am not sure about Angular

Usman Iqbal
  • 2,379
  • 5
  • 26
  • 50
  • 1
    Did you look at the examples in the template syntax docs? E.g. https://angular.io/guide/template-syntax#style-binding shows a ternary conditional expression, or you could use `ngSwitch` to replace the whole element. – jonrsharpe Nov 23 '17 at 13:54
  • @jonrsharpe man i cant see interpolation here, its just property bining – Usman Iqbal Nov 23 '17 at 14:01
  • The syntax is consistent throughout the template. For anything non-trivial, though, it might be better to write the logic in the class and just interpolate the resulting *value* in the template. Otherwise the template becomes very hard to read. – jonrsharpe Nov 23 '17 at 14:01

1 Answers1

104

You can use nested ternary if

{{element.source == 1 ? 'upwork' : (element.source == 2 ? 'refer from friend' : '')}}

or probably better

export class MyComponent {
  sourceNames = {1: 'upwork', 2: 'refer from friend', 3: 'other' };
}

{{sourceNames[element.source]}}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Template parse errors: Parser Error: Unexpected token : at column 24 in [{{element.source === 1 ? : 'upwork' : (element.source === 2 ? 'refer from friend' : '')}} ] in ng:///AppModule/ClientsComponent.html@53:42 ("header-cell *matHeaderCellDef> Source [ERROR ->]{{element.source === 1 ? : 'upwork' : (element.source === 2 ? 'refer from friend' : '')}} – Usman Iqbal Nov 23 '17 at 13:59
  • Please update your question and add the code that that causes the error message and the error message. Code in comments is unreadable. – Günter Zöchbauer Nov 23 '17 at 14:00
  • There was a redundant `:`. I removed it in my answer. – Günter Zöchbauer Nov 23 '17 at 14:01
  • what about the third condition, will it be like this ? {{element.source === 1 ? 'upwork' : (element.source === 2 ? 'refer from friend' : ' ' : (element.source === 3 ? ' other' : ' ' ) ) } } – Usman Iqbal Nov 23 '17 at 14:05
  • Just use `'other'` instead of `''` with the code of my answer. I'll also add a better answer. – Günter Zöchbauer Nov 23 '17 at 14:08
  • The fist option may not work due to the fact that value can be string. `element.source == 1` should do the trick – yurzui Nov 23 '17 at 14:12
  • Good catch `[value]="1 "` with the space after the number. With `==` instead of `===` it should work right? – Günter Zöchbauer Nov 23 '17 at 14:13
  • 1
    Seems even with `[value]="1"` angular will set `string` to model https://stackblitz.com/edit/angular-f212bc?file=app%2Fapp.component.ts – yurzui Nov 23 '17 at 14:15
  • Right, I assumed `[ngValue]`. My Angular + TS knowledge is becoming rusty :'-/ – Günter Zöchbauer Nov 23 '17 at 14:18
  • How is your mobile development?) – yurzui Nov 23 '17 at 14:20
  • Even worse :D Haven't done any mobile development before. But it is with [Flutter](https://flutter.io/) which uses Dart which makes me happy ;-). – Günter Zöchbauer Nov 23 '17 at 14:22
  • Angular 7: [matTooltip]="GridToolTip[index]" worked for me! instead – Zeeshanef Apr 04 '19 at 12:10
  • The nested method is great!! I found it more helpful when writing conditions I HTML only. Thanks !!! – Parth Developer May 21 '20 at 20:09