2

Im trying to assign a variable in my html in angular 4+. Is this possible?

What im trying to achieve is to assign a comparison to a variable, so i do not have to make always the same in all the cases i have.

Here is an example i want to achieve:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">

     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> some text</span>
 // here more divs
     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> other text</span>
 // more divs...
     <span *ngIf="o.type == 'EXAMPLE_TYPE'"> last text</span>  

</mat-list-item>

So, my question is, is there any way to declare something like?

<div #isExampleType="o.type == 'EXAMPLE_TYPE'" >

And then use it in the *ngIf="isExampleType"...

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
JpCrow
  • 4,881
  • 4
  • 32
  • 46
  • Yo can do that using .map funciton on the retrieving data's logic. http.get(...).map(o => {o.type == 'EXAMPLE_TYPE';return o;}) – Leonardo Neninger Jan 30 '18 at 20:09
  • @LeonardoNeninger Yes, i know that, but i want to know if i can do it inside de html – JpCrow Jan 30 '18 at 20:16
  • I dont know why you are trying to to that way. I think that another way than can help you is create a directive that receive the "o" variable an you can reference it from your controller as ViewChild – Leonardo Neninger Jan 30 '18 at 20:24
  • Related question (not a full dupe), https://stackoverflow.com/questions/38582293/how-to-declare-a-variable-in-a-template-in-angular2 – Estus Flask Jan 30 '18 at 21:10
  • From [the Angular documentation](https://angular.io/guide/template-syntax#template-reference-variables--var-): `A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.` – ConnorsFan Jan 30 '18 at 21:13

2 Answers2

3

This particular case is conveniently solved with component method:

<span *ngIf="isExampleType(o)"> some text</span>

Or a pipe:

<span *ngIf="o | exampleType"> some text</span>

Both will have nearly zero performance impact

There is no good built-in way to assign a variable like that. #isExampleType is template variable and doesn't serve this purpose.

The closest thing is let in structural directives, like ngIf:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">
  <ng-container *ngIf="o.type == 'EXAMPLE_TYPE'; let isExampleType">
     <span *ngIf="isExampleType"> some text</span>
     ...
  </ng-container>
</mat-list-item>

However, the side effect is that it provides cloaking behaviour. Since isExampleType is expected to be truthy, o.type == 'EXAMPLE_TYPE' || ' '; let isExampleType trick won't work.

The dirty workaround is to use ngFor instead. It will work as expected but provide unreasonable performance overhead:

<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">
  <ng-container *ngFor="let isExampleType of [o.type == 'EXAMPLE_TYPE']">
     <span *ngIf="isExampleType"> some text</span>
     ...
  </ng-container>
</mat-list-item>

A good alternative is custom ngVar structural directive, like explained here.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
0

You can try something like:

<input #myHiddenValue type="hidden" value="ASDFG">

<div *ngIf="myHiddenValue.value==='ASDFG'">{{ myHiddenValue.value }}</div>
Andriy
  • 14,781
  • 4
  • 46
  • 50
  • This is almost the same that im doing, i want to have the comparision that gives me true or false in one place only – JpCrow Jan 30 '18 at 20:32
  • @JpCrow The thing you're doing will result in syntactic error, because template variables cannot be used like that. While this answer is a hack but it's workable. – Estus Flask Jan 30 '18 at 21:02