Angular 7 - Make Last Item in Array A Link Using ngFor

Question

I have a list of menu items and I want to make the last item in the array a link.

Right now the menu items are built from a component, but I'm unsure of how to make the last item in the array a link.

ActionMenuItem.component.html

  <div *ngIf="expanded">
  <actionmenuitem *ngFor="let child of line.children" [line]="child" (inWorkspace)="toWorkspace($event)"></actionmenuitem>

ActionMenuItem.Component.ts

  onSelect(){
// If it has children, expand them && flip carat.
if(this.line.children.length > 0){

  this.expanded = !this.expanded;

  if(this.iconName == "expand_more"){
    this.iconName = "expand_less"
  } else {
    this.iconName = "expand_more"
  }

} else {
  this.inWorkspace.emit(this.line);
}

I’m trying to use the router to link to another view in the application — kjamp
– kjamp, Commented Oct 28, 2019 at 5:36

Banki Louis · Accepted Answer · 2019-10-28 05:44:59Z

5

Angular exposes the following variables which you can make use of:

first
last
even
index
odd

So to make the the last item a link you can do this

<div *ngFor="let child of line.children; let last = islast">
   <actionmenuitem *ngIf="islast" [line]="child" 
(inWorkspace)="toWorkspace($event)">
    </actionmenuitem>
</div>

answered Oct 28, 2019 at 5:44

Banki Louis

1452 silver badges4 bronze badges

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

4 Comments

kjamp Over a year ago

this makes sense but how would i add the link in this?

Banki Louis Over a year ago

@kjamp you can simply add the link inside your *ngFor. <a *ngIf="isLast">link here</a>

kjamp Over a year ago

i'm not getting this to work right.. it isn't showing my list properly

Nexonus Over a year ago

It should work with ...; let islast = last.

Adrita Sharma · Accepted Answer · 2019-10-28 05:54:26Z

4

Try like this:

Working Demo

<ng-container *ngFor="let child of line.children;let i=index">

    <actionmenuitem *ngIf="i != (line.children.length-1)" [line]="child" (inWorkspace)="toWorkspace($event)">
    </actionmenuitem>

    <a [routerLink]="[child]" *ngIf="i == (line.children.length-1)">{{child}}</a>
</ng-container>

edited Oct 28, 2019 at 5:54

answered Oct 28, 2019 at 5:44

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

2 Comments

kjamp Over a year ago

Ok this works, but in my list the array keeps repeating.. any way to fix this?

Adrita Sharma Over a year ago

Show your list.

Bilel-Zheni · Accepted Answer · 2019-10-28 13:48:18Z

1

you just need to fix last flag assignment:

let isLast = last or
last as isLast

answered Oct 28, 2019 at 13:48

Bilel-Zheni

1,3121 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular 7 - Make Last Item in Array A Link Using ngFor

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related