Use local variable in template html without component Angular2+

Question

I want to use a local variable into my html template to use it in css classes but without linking it with the component. I want to do that :

[local_html_variable = 1]

    <div class="css-{{ local_html_variable }}">
            Div #1
        </div>

[local_html_variable + 1]

        <div class="css-{{ local_html_variable }}">
            Div #2
        </div>

[local_html_variable + 1]

        <div class="css-{{ local_html_variable }}">
            Div #3
        </div>

        ...

to get

<div class="css-1">
        Div #1
    </div>

    <div class="css-2">
        Div #2
    </div>

    <div class="css-3">
        Div #3
    </div>

    ...

Important : the number of div is dynamic. But I don't achieve it. I tried with <ng-template let-localHtmlVariable> but didn't work.. Any idea ?

Suresh Kumar Ariya · Accepted Answer · 2018-11-22 14:11:36Z

2

You can use *ngFor structural directive

<div *ngFor="let value of [1,2,3]" class="css-{{value}}">
   DIV #{{value}}
</div>

answered Nov 22, 2018 at 14:11

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

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

2 Comments

MatDepInfo Over a year ago

In fact I can't use ngFor in my case

SiddAjmera Over a year ago

@MatDepInfo, please consider adding all the relevant details and conditions upfront, so as to avoid additional noise to the thread.

score 0 · Accepted Answer · 2018-11-22 14:19:51Z

0

Here is a very situational answer that takes advantages of truhy/falsy values :

<ng-container *ngIf="1 as i">
  Number is {{ i }}
</ng-container>

Use it in your classes in the container itself :

<div class="css-{{ i }}">With interpolation</div>
<div [class]="'css-' +  i">With input</div>

Here is the stackblitz : https://stackblitz.com/edit/angular-3wm4en?file=src%2Fapp%2Fapp.component.html

EDIT explanation :

In javascript, every value can be transalted to boolean : they are truthy or falsy values.

The quick boolean parse operator is the !! double negation.

Let's try :

console.log(!!'');
console.log(!!0);
console.log(!!5);

When we use this notation, the evaluation use the same principle : it tests if the given value is truthy or falsy. In numbers, 1 being truthy, the test checks out, and the as i notation simply creates a template variable.

For information, falsy values are 0, '', null, undefined, infinity, NaN.

edited Nov 22, 2018 at 14:19

answered Nov 22, 2018 at 14:06

user4676340

5 Comments

SiddAjmera Over a year ago

Whoa. That's amazing. I didn't know that. Niceee :) Can you please add some explanation to your post BTW? What exactly are you using here? I haven't seen anything like this before.

MatDepInfo Over a year ago

Ok but how to increment it ?

user4676340 Over a year ago

@MatDepInfo With a i + 1 in your interpolation. You can try with i++ and it'll show you why you shouldn't use that !

user4676340 Over a year ago

@MatDepInfo you should provide a minimal reproducible example of what you expect, random examples like that are always source of mistakes. If you don't know the number of divs, do you at least have some number that says how much divs you have ?

user4676340 Over a year ago

@MatDepInfo You don't use increments in a template. Because at every change detection, Angular will read the increment, and you will see how strange it gets. Why can't you use ngFor ?

Collectives™ on Stack Overflow

Use local variable in template html without component Angular2+

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related