Comma separated list using angular ngfor and ngif

up vote
1
down vote

favorite

I have a comma separated list that displays an array of four items.

What I'm trying to do is this:

item1

item1, item2

item1, item2, item3

item1, item2, item3, item4 ...

What is happening is this:

item1,

item1, item2,

item1, item2, item3,

item1, item2, item3, item4 ...

Here is my code:

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

Here is some list results:

Item1,  Item2,  Item3,  Item4 …

Item1, 

Item1,  Item2,  Item3,  Item4 …

Item1,  Item2,

edited Nov 20 at 13:59

asked Nov 20 at 13:46

nless

125

1

I don't really see any difference between what you're trying to do and what's happening. Please specifically point out what's the difference. Would also be really helpful if you could post some code from your Component as well.
– SiddAjmera
Nov 20 at 13:49

@Sidd see the commas at the end of each line at the top well I don't want them in see the difference between the two blocks?
– nless
Nov 20 at 13:53

how the list looks like, please share
– ashish pal
Nov 20 at 13:55

is it like this [1,2,3,4,5,6,7,8,9]
– ashish pal
Nov 20 at 13:56

add a comment |

up vote
1
down vote

favorite

I have a comma separated list that displays an array of four items.

What I'm trying to do is this:

item1

item1, item2

item1, item2, item3

item1, item2, item3, item4 ...

What is happening is this:

item1,

item1, item2,

item1, item2, item3,

item1, item2, item3, item4 ...

Here is my code:

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

Here is some list results:

Item1,  Item2,  Item3,  Item4 …

Item1, 

Item1,  Item2,  Item3,  Item4 …

Item1,  Item2,

edited Nov 20 at 13:59

asked Nov 20 at 13:46

nless

125

1

I don't really see any difference between what you're trying to do and what's happening. Please specifically point out what's the difference. Would also be really helpful if you could post some code from your Component as well.
– SiddAjmera
Nov 20 at 13:49

@Sidd see the commas at the end of each line at the top well I don't want them in see the difference between the two blocks?
– nless
Nov 20 at 13:53

how the list looks like, please share
– ashish pal
Nov 20 at 13:55

is it like this [1,2,3,4,5,6,7,8,9]
– ashish pal
Nov 20 at 13:56

add a comment |

up vote
1
down vote

favorite

I have a comma separated list that displays an array of four items.

What I'm trying to do is this:

item1

item1, item2

item1, item2, item3

item1, item2, item3, item4 ...

What is happening is this:

item1,

item1, item2,

item1, item2, item3,

item1, item2, item3, item4 ...

Here is my code:

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

Here is some list results:

Item1,  Item2,  Item3,  Item4 …

Item1, 

Item1,  Item2,  Item3,  Item4 …

Item1,  Item2,

edited Nov 20 at 13:59

asked Nov 20 at 13:46

nless

125

I have a comma separated list that displays an array of four items.

What I'm trying to do is this:

item1

item1, item2

item1, item2, item3

item1, item2, item3, item4 ...

What is happening is this:

item1,

item1, item2,

item1, item2, item3,

item1, item2, item3, item4 ...

Here is my code:

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

Here is some list results:

Item1,  Item2,  Item3,  Item4 …

Item1, 

Item1,  Item2,  Item3,  Item4 …

Item1,  Item2,

angular

edited Nov 20 at 13:59

asked Nov 20 at 13:46

nless

125

edited Nov 20 at 13:59

asked Nov 20 at 13:46

nless

125

edited Nov 20 at 13:59

asked Nov 20 at 13:46

nless

125

asked Nov 20 at 13:46

nless

125

asked Nov 20 at 13:46

nless

125

1

I don't really see any difference between what you're trying to do and what's happening. Please specifically point out what's the difference. Would also be really helpful if you could post some code from your Component as well.
– SiddAjmera
Nov 20 at 13:49

@Sidd see the commas at the end of each line at the top well I don't want them in see the difference between the two blocks?
– nless
Nov 20 at 13:53

how the list looks like, please share
– ashish pal
Nov 20 at 13:55

is it like this [1,2,3,4,5,6,7,8,9]
– ashish pal
Nov 20 at 13:56

add a comment |

1

I don't really see any difference between what you're trying to do and what's happening. Please specifically point out what's the difference. Would also be really helpful if you could post some code from your Component as well.
– SiddAjmera
Nov 20 at 13:49

@Sidd see the commas at the end of each line at the top well I don't want them in see the difference between the two blocks?
– nless
Nov 20 at 13:53

how the list looks like, please share
– ashish pal
Nov 20 at 13:55

is it like this [1,2,3,4,5,6,7,8,9]
– ashish pal
Nov 20 at 13:56

I don't really see any difference between what you're trying to do and what's happening. Please specifically point out what's the difference. Would also be really helpful if you could post some code from your Component as well.
– SiddAjmera
Nov 20 at 13:49

@Sidd see the commas at the end of each line at the top well I don't want them in see the difference between the two blocks?
– nless
Nov 20 at 13:53

how the list looks like, please share
– ashish pal
Nov 20 at 13:55

is it like this [1,2,3,4,5,6,7,8,9]
– ashish pal
Nov 20 at 13:56

add a comment |

3 Answers
3

active

oldest

votes

up vote
0
down vote

accepted

In your example you seem to want to eliminate the final commas and have an ellipses if the length of the list exceeds four items.

You can use the last exported template variable to detect if you're on the last element. This is the best condition to test for to prevent displaying a separator after the last element.

You can use the SlicePipe to display up to four items and in the last element detect if you need ellipses because the length of the source array is greater than four.

The behavior in the example will not display ellipses if there are only four items in the list. You can change it if you want.

<span *ngFor="let item of record.referrerItemList | slice:0:4; let $last=last">

    {{item}}

    <span *ngIf="!$last; LastElem" class="list-format">,&nbsp;</span>

    <ng-template #LastElem>

        <span *ngIf="record.referrerItemList.length > 4" class="hellip-format">

            &hellip;

        </span>

    </ng-template>

</span>

edited Nov 20 at 14:21

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

This solution does also works amended this comment. Thanks
– nless
Nov 20 at 14:10

add a comment |

up vote
0
down vote

You can use *ngFor's last exported value to avoid adding the comma to the last element:

<span *ngFor="let item of record.referrerItemList; let i=index; let isLast=last">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="!isLast && i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

For more info, see https://angular.io/api/common/NgForOf.

answered Nov 20 at 13:56

Zircon

3,439724

Thanks a lot this works! @Zircon
– nless
Nov 20 at 14:05

add a comment |

up vote
0
down vote

just a little change should work, in place of i < 3 i!=record.referrerItemList.length-1 will work because only the last one you don't want the comma.

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i!=record.referrerItemList.length-1">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

edited Nov 20 at 14:19

answered Nov 20 at 14:09

ashish pal

3039

Sorry this solution doesn't meet the requirements to the question.
– nless
Nov 20 at 14:16

This is the results I get with this logic: Item1, Item2, Item3, Item4, , … , , , Item1 Item1, Item2, Item3, Item4, …
– nless
Nov 20 at 14:24

add a comment |

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',
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%2f53394433%2fcomma-separated-list-using-angular-ngfor-and-ngif%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
0
down vote

accepted

In your example you seem to want to eliminate the final commas and have an ellipses if the length of the list exceeds four items.

You can use the last exported template variable to detect if you're on the last element. This is the best condition to test for to prevent displaying a separator after the last element.

You can use the SlicePipe to display up to four items and in the last element detect if you need ellipses because the length of the source array is greater than four.

The behavior in the example will not display ellipses if there are only four items in the list. You can change it if you want.

<span *ngFor="let item of record.referrerItemList | slice:0:4; let $last=last">

    {{item}}

    <span *ngIf="!$last; LastElem" class="list-format">,&nbsp;</span>

    <ng-template #LastElem>

        <span *ngIf="record.referrerItemList.length > 4" class="hellip-format">

            &hellip;

        </span>

    </ng-template>

</span>

edited Nov 20 at 14:21

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

This solution does also works amended this comment. Thanks
– nless
Nov 20 at 14:10

add a comment |

up vote
0
down vote

accepted

In your example you seem to want to eliminate the final commas and have an ellipses if the length of the list exceeds four items.

You can use the last exported template variable to detect if you're on the last element. This is the best condition to test for to prevent displaying a separator after the last element.

You can use the SlicePipe to display up to four items and in the last element detect if you need ellipses because the length of the source array is greater than four.

The behavior in the example will not display ellipses if there are only four items in the list. You can change it if you want.

<span *ngFor="let item of record.referrerItemList | slice:0:4; let $last=last">

    {{item}}

    <span *ngIf="!$last; LastElem" class="list-format">,&nbsp;</span>

    <ng-template #LastElem>

        <span *ngIf="record.referrerItemList.length > 4" class="hellip-format">

            &hellip;

        </span>

    </ng-template>

</span>

edited Nov 20 at 14:21

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

This solution does also works amended this comment. Thanks
– nless
Nov 20 at 14:10

add a comment |

up vote
0
down vote

accepted

In your example you seem to want to eliminate the final commas and have an ellipses if the length of the list exceeds four items.

You can use the last exported template variable to detect if you're on the last element. This is the best condition to test for to prevent displaying a separator after the last element.

You can use the SlicePipe to display up to four items and in the last element detect if you need ellipses because the length of the source array is greater than four.

The behavior in the example will not display ellipses if there are only four items in the list. You can change it if you want.

<span *ngFor="let item of record.referrerItemList | slice:0:4; let $last=last">

    {{item}}

    <span *ngIf="!$last; LastElem" class="list-format">,&nbsp;</span>

    <ng-template #LastElem>

        <span *ngIf="record.referrerItemList.length > 4" class="hellip-format">

            &hellip;

        </span>

    </ng-template>

</span>

edited Nov 20 at 14:21

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

In your example you seem to want to eliminate the final commas and have an ellipses if the length of the list exceeds four items.

You can use the last exported template variable to detect if you're on the last element. This is the best condition to test for to prevent displaying a separator after the last element.

You can use the SlicePipe to display up to four items and in the last element detect if you need ellipses because the length of the source array is greater than four.

The behavior in the example will not display ellipses if there are only four items in the list. You can change it if you want.

<span *ngFor="let item of record.referrerItemList | slice:0:4; let $last=last">

    {{item}}

    <span *ngIf="!$last; LastElem" class="list-format">,&nbsp;</span>

    <ng-template #LastElem>

        <span *ngIf="record.referrerItemList.length > 4" class="hellip-format">

            &hellip;

        </span>

    </ng-template>

</span>

edited Nov 20 at 14:21

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

edited Nov 20 at 14:21

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

answered Nov 20 at 13:57

Daniel Gimenez

10.4k22446

This solution does also works amended this comment. Thanks
– nless
Nov 20 at 14:10

add a comment |

This solution does also works amended this comment. Thanks
– nless
Nov 20 at 14:10

This solution does also works amended this comment. Thanks
– nless
Nov 20 at 14:10

add a comment |

up vote
0
down vote

You can use *ngFor's last exported value to avoid adding the comma to the last element:

<span *ngFor="let item of record.referrerItemList; let i=index; let isLast=last">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="!isLast && i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

For more info, see https://angular.io/api/common/NgForOf.

answered Nov 20 at 13:56

Zircon

3,439724

Thanks a lot this works! @Zircon
– nless
Nov 20 at 14:05

add a comment |

up vote
0
down vote

You can use *ngFor's last exported value to avoid adding the comma to the last element:

<span *ngFor="let item of record.referrerItemList; let i=index; let isLast=last">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="!isLast && i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

For more info, see https://angular.io/api/common/NgForOf.

answered Nov 20 at 13:56

Zircon

3,439724

Thanks a lot this works! @Zircon
– nless
Nov 20 at 14:05

add a comment |

up vote
0
down vote

You can use *ngFor's last exported value to avoid adding the comma to the last element:

<span *ngFor="let item of record.referrerItemList; let i=index; let isLast=last">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="!isLast && i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

For more info, see https://angular.io/api/common/NgForOf.

answered Nov 20 at 13:56

Zircon

3,439724

You can use *ngFor's last exported value to avoid adding the comma to the last element:

<span *ngFor="let item of record.referrerItemList; let i=index; let isLast=last">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="!isLast && i < 3">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

For more info, see https://angular.io/api/common/NgForOf.

answered Nov 20 at 13:56

Zircon

3,439724

answered Nov 20 at 13:56

Zircon

3,439724

answered Nov 20 at 13:56

Zircon

3,439724

answered Nov 20 at 13:56

Zircon

3,439724

Thanks a lot this works! @Zircon
– nless
Nov 20 at 14:05

add a comment |

Thanks a lot this works! @Zircon
– nless
Nov 20 at 14:05

Thanks a lot this works! @Zircon
– nless
Nov 20 at 14:05

add a comment |

up vote
0
down vote

just a little change should work, in place of i < 3 i!=record.referrerItemList.length-1 will work because only the last one you don't want the comma.

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i!=record.referrerItemList.length-1">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

edited Nov 20 at 14:19

answered Nov 20 at 14:09

ashish pal

3039

Sorry this solution doesn't meet the requirements to the question.
– nless
Nov 20 at 14:16

This is the results I get with this logic: Item1, Item2, Item3, Item4, , … , , , Item1 Item1, Item2, Item3, Item4, …
– nless
Nov 20 at 14:24

add a comment |

up vote
0
down vote

just a little change should work, in place of i < 3 i!=record.referrerItemList.length-1 will work because only the last one you don't want the comma.

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i!=record.referrerItemList.length-1">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

edited Nov 20 at 14:19

answered Nov 20 at 14:09

ashish pal

3039

Sorry this solution doesn't meet the requirements to the question.
– nless
Nov 20 at 14:16

This is the results I get with this logic: Item1, Item2, Item3, Item4, , … , , , Item1 Item1, Item2, Item3, Item4, …
– nless
Nov 20 at 14:24

add a comment |

up vote
0
down vote

just a little change should work, in place of i < 3 i!=record.referrerItemList.length-1 will work because only the last one you don't want the comma.

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i!=record.referrerItemList.length-1">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

edited Nov 20 at 14:19

answered Nov 20 at 14:09

ashish pal

3039

just a little change should work, in place of i < 3 i!=record.referrerItemList.length-1 will work because only the last one you don't want the comma.

<span *ngFor="let item of record.referrerItemList; let i=index">

    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i!=record.referrerItemList.length-1">,&nbsp;</span>

    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>

</span>

edited Nov 20 at 14:19

answered Nov 20 at 14:09

ashish pal

3039

edited Nov 20 at 14:19

answered Nov 20 at 14:09

ashish pal

3039

answered Nov 20 at 14:09

ashish pal

3039

answered Nov 20 at 14:09

ashish pal

3039

Sorry this solution doesn't meet the requirements to the question.
– nless
Nov 20 at 14:16

This is the results I get with this logic: Item1, Item2, Item3, Item4, , … , , , Item1 Item1, Item2, Item3, Item4, …
– nless
Nov 20 at 14:24

add a comment |

Sorry this solution doesn't meet the requirements to the question.
– nless
Nov 20 at 14:16

This is the results I get with this logic: Item1, Item2, Item3, Item4, , … , , , Item1 Item1, Item2, Item3, Item4, …
– nless
Nov 20 at 14:24

Sorry this solution doesn't meet the requirements to the question.
– nless
Nov 20 at 14:16

This is the results I get with this logic: Item1, Item2, Item3, Item4, , … , , , Item1 Item1, Item2, Item3, Item4, …
– nless
Nov 20 at 14:24

add a comment |

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

搜尋此網誌

Ytukyg