Use local variable in template html without component Angular2+

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 ?

edited Nov 22 '18 at 14:15

asked Nov 22 '18 at 13:56

MatDepInfo

286

add a comment |

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 ?

edited Nov 22 '18 at 14:15

asked Nov 22 '18 at 13:56

MatDepInfo

286

add a comment |

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 ?

edited Nov 22 '18 at 14:15

asked Nov 22 '18 at 13:56

MatDepInfo

286

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 ?

html angular

edited Nov 22 '18 at 14:15

asked Nov 22 '18 at 13:56

MatDepInfo

286

edited Nov 22 '18 at 14:15

asked Nov 22 '18 at 13:56

MatDepInfo

286

edited Nov 22 '18 at 14:15

asked Nov 22 '18 at 13:56

MatDepInfo

286

asked Nov 22 '18 at 13:56

MatDepInfo

286

asked Nov 22 '18 at 13:56

MatDepInfo

286

add a comment |

2 Answers
2

active

oldest

votes

You can use *ngFor structural directive

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

   DIV #{{value}}

</div>

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

Why didn't I think of this? I wonder :D

– SiddAjmera
Nov 22 '18 at 14:12

In fact I can't use ngFor in my case

– MatDepInfo
Nov 22 '18 at 14:16

1

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

– SiddAjmera
Nov 22 '18 at 14:23

add a comment |

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 '18 at 14:19

answered Nov 22 '18 at 14:06

trichetriche

26k42152

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.

– SiddAjmera
Nov 22 '18 at 14:10

Ok but how to increment it ?

– MatDepInfo
Nov 22 '18 at 14:11

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

– trichetriche
Nov 22 '18 at 14:13

@SiddAjmera see my edit

– trichetriche
Nov 22 '18 at 14:16

@MatDepInfo you should provide a Minimal, Complete, and Verifiable 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 ?

– trichetriche
Nov 22 '18 at 14:17

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53432556%2fuse-local-variable-in-template-html-without-component-angular2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You can use *ngFor structural directive

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

   DIV #{{value}}

</div>

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

Why didn't I think of this? I wonder :D

– SiddAjmera
Nov 22 '18 at 14:12

In fact I can't use ngFor in my case

– MatDepInfo
Nov 22 '18 at 14:16

1

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

– SiddAjmera
Nov 22 '18 at 14:23

add a comment |

You can use *ngFor structural directive

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

   DIV #{{value}}

</div>

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

Why didn't I think of this? I wonder :D

– SiddAjmera
Nov 22 '18 at 14:12

In fact I can't use ngFor in my case

– MatDepInfo
Nov 22 '18 at 14:16

1

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

– SiddAjmera
Nov 22 '18 at 14:23

add a comment |

You can use *ngFor structural directive

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

   DIV #{{value}}

</div>

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

You can use *ngFor structural directive

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

   DIV #{{value}}

</div>

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

answered Nov 22 '18 at 14:11

Suresh Kumar Ariya

4,4781215

Why didn't I think of this? I wonder :D

– SiddAjmera
Nov 22 '18 at 14:12

In fact I can't use ngFor in my case

– MatDepInfo
Nov 22 '18 at 14:16

1

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

– SiddAjmera
Nov 22 '18 at 14:23

add a comment |

Why didn't I think of this? I wonder :D

– SiddAjmera
Nov 22 '18 at 14:12

In fact I can't use ngFor in my case

– MatDepInfo
Nov 22 '18 at 14:16

1

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

– SiddAjmera
Nov 22 '18 at 14:23

Why didn't I think of this? I wonder :D

– SiddAjmera
Nov 22 '18 at 14:12

In fact I can't use ngFor in my case

– MatDepInfo
Nov 22 '18 at 14:16

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

– SiddAjmera
Nov 22 '18 at 14:23

add a comment |

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);

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

edited Nov 22 '18 at 14:19

answered Nov 22 '18 at 14:06

trichetriche

26k42152

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.

– SiddAjmera
Nov 22 '18 at 14:10

Ok but how to increment it ?

– MatDepInfo
Nov 22 '18 at 14:11

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

– trichetriche
Nov 22 '18 at 14:13

@SiddAjmera see my edit

– trichetriche
Nov 22 '18 at 14:16

@MatDepInfo you should provide a Minimal, Complete, and Verifiable 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 ?

– trichetriche
Nov 22 '18 at 14:17

|
show 2 more comments

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);

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

edited Nov 22 '18 at 14:19

answered Nov 22 '18 at 14:06

trichetriche

26k42152

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.

– SiddAjmera
Nov 22 '18 at 14:10

Ok but how to increment it ?

– MatDepInfo
Nov 22 '18 at 14:11

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

– trichetriche
Nov 22 '18 at 14:13

@SiddAjmera see my edit

– trichetriche
Nov 22 '18 at 14:16

@MatDepInfo you should provide a Minimal, Complete, and Verifiable 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 ?

– trichetriche
Nov 22 '18 at 14:17

|
show 2 more comments

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);

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

edited Nov 22 '18 at 14:19

answered Nov 22 '18 at 14:06

trichetriche

26k42152

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);

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

console.log(!!'');

console.log(!!0);

console.log(!!5);

console.log(!!'');

console.log(!!0);

console.log(!!5);

edited Nov 22 '18 at 14:19

answered Nov 22 '18 at 14:06

trichetriche

26k42152

edited Nov 22 '18 at 14:19

answered Nov 22 '18 at 14:06

trichetriche

26k42152

answered Nov 22 '18 at 14:06

trichetriche

26k42152

answered Nov 22 '18 at 14:06

trichetriche

26k42152

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.

– SiddAjmera
Nov 22 '18 at 14:10

Ok but how to increment it ?

– MatDepInfo
Nov 22 '18 at 14:11

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

– trichetriche
Nov 22 '18 at 14:13

@SiddAjmera see my edit

– trichetriche
Nov 22 '18 at 14:16

@MatDepInfo you should provide a Minimal, Complete, and Verifiable 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 ?

– trichetriche
Nov 22 '18 at 14:17

|
show 2 more comments

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.

– SiddAjmera
Nov 22 '18 at 14:10

Ok but how to increment it ?

– MatDepInfo
Nov 22 '18 at 14:11

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

– trichetriche
Nov 22 '18 at 14:13

@SiddAjmera see my edit

– trichetriche
Nov 22 '18 at 14:16

@MatDepInfo you should provide a Minimal, Complete, and Verifiable 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 ?

– trichetriche
Nov 22 '18 at 14:17

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.

– SiddAjmera
Nov 22 '18 at 14:10

Ok but how to increment it ?

– MatDepInfo
Nov 22 '18 at 14:11

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

– trichetriche
Nov 22 '18 at 14:13

@SiddAjmera see my edit

– trichetriche
Nov 22 '18 at 14:16

@MatDepInfo you should provide a Minimal, Complete, and Verifiable 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 ?

– trichetriche
Nov 22 '18 at 14:17

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk