Angular 2 - calling class methods in template loop *ngFor

Question

I have an angular2 app where the component class is getting a little to big. I've decided to create a folder with 'Handler' classes, so i could put the related code in each handle class. In my component class i then create an instance of each handler and use these in the template

My component:

export class DesignerComponent {
public tab: TabHandler = new TabHandler(this);

My handler:

export class TabHandler {

public designerComponent: DesignerComponent;

constructor(designerComponent: DesignerComponent)
{
    this.designerComponent = designerComponent
}

add() {
    if (this.designerComponent.formModel.tabs.length < 1) {
        this.designerComponent.formModel.tabs.push(new TabModel("Tab"));
    }
    this.designerComponent.formModel.tabs.push(new TabModel("Tab"));
}

My template:

<li *ngFor="let tab of formModel.tabs; let i = index; ">
  <a href="#" [ngClass]="{'tab-selected': formModel.currentTab == tab}"
    class="tab-button"
    attr.contenteditable="{{formModel.currentTab == tab}}"
    (blur)="tab.changeShortTitle($event)"
    (dragover)="allowDrop($event,'tab')"
    (dragstart)="drag($event,i,'tab')"
    (drop)="drop($event,i)"
    (dragleave)="dragleave()"
    (click)="tab.select(tab)">
    {{tab.shortTitle}}
  </a>
</li>
<li id="add-tab-buttonholder">
  <a href="#" (click)="tab.add()"><i class="fa fa-plus" aria-hidden="true"></i></a>
</li>

the last <li id="add-tab-buttonholder"> <a href="#" (click)="tab.add()

works because it's outside of the *ngFor loop.

I have tried to create an empty function in the class, and call it in the lopp, but that also fails with the same error message

ORIGINAL EXCEPTION: TypeError: self.context.$implicit.select is not a function

You should change your template.. instead of calling add(), you should call tab.add(). But without seeing your template, this is hard to answer — Poul Kruijt
– Poul Kruijt, Commented Jul 14, 2016 at 8:25

Maximilian Riegler · Accepted Answer · 2016-07-14 08:56:33Z

1

Your loop variable has the same name as the TabHandler in your class. Your loop variable overrules the class member inside the loop, that's why it can't execute the select method on it.

I'd suggest renaming the TabHandler since only tab is misleading anyway:

export class DesignerComponent {
    public tabHandler: TabHandler = new TabHandler(this);

And in your template:

<li *ngFor="let tab of formModel.tabs; let i = index; ">
    <a href="#" [ngClass]="{'tab-selected': formModel.currentTab == tab}"
        class="tab-button"
        attr.contenteditable="{{formModel.currentTab == tab}}"
        (blur)="tab.changeShortTitle($event)"
        (dragover)="allowDrop($event,'tab')"
        (dragstart)="drag($event,i,'tab')"
        (drop)="drop($event,i)"
        (dragleave)="dragleave()"
        (click)="tabHandler.select(tab)">
            {{tab.shortTitle}}
    </a>
</li>
<li id="add-tab-buttonholder">
    <a href="#" (click)="tabHandler.add()"><i class="fa fa-plus" aria-hidden="true"></i></a>
</li>

answered Jul 14, 2016 at 8:56

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

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

1 Comment

Borgen Data Bjørn Kristiansen Over a year ago

Thank you ! Think i need a brake when these error are not found :)

Collectives™ on Stack Overflow

Angular 2 - calling class methods in template loop *ngFor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related