Angular 4+. Assign value to variable

Question

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"...

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
– Leonardo Neninger, Commented Jan 30, 2018 at 20:09
@LeonardoNeninger Yes, i know that, but i want to know if i can do it inside de html — JpCrow
– JpCrow, Commented Jan 30, 2018 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
– Leonardo Neninger, Commented Jan 30, 2018 at 20:24
Related question (not a full dupe), stackoverflow.com/questions/38582293/… — Estus Flask
– Estus Flask, Commented Jan 30, 2018 at 21:10
From the Angular documentation: 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. — Martin Parenteau
– Martin Parenteau, Commented Jan 30, 2018 at 21:13

Estus Flask · Accepted Answer · 2018-01-30 21:01:31Z

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.

answered Jan 30, 2018 at 21:01

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JpCrow Over a year ago

Thanks, i was wondering there was a way to make it all in the html. :(

Estus Flask Over a year ago

I guess ngVar is the way to go then.

Andriy · Accepted Answer · 2018-01-30 20:17:53Z

0

You can try something like:

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

<div *ngIf="myHiddenValue.value==='ASDFG'">{{ myHiddenValue.value }}</div>

answered Jan 30, 2018 at 20:17

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

2 Comments

JpCrow Over a year ago

This is almost the same that im doing, i want to have the comparision that gives me true or false in one place only

Estus Flask Over a year ago

@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.

Collectives™ on Stack Overflow

Angular 4+. Assign value to variable

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related