CODEWITHSUNDEEP
loopsangularangular2-template
Chris Angular
Chris Angular

Reputation: 65

Angular 2 databinding in the object

When you loop through the object , is there a way I can dynamically put angular handlers inside angular handlers?

I am able to loop through the items and display.

In first item with id 1, it has number (4,5) - These are ID's from the main editor array. So instead of rendering a string that is 4 and 5 I would like to render the object from editor with ID 4 and Object with ID 5.

If I do {{editor[0].id}} - it works, but the [0] is not dynamic. So I tried {{editor[{{subitem}}].id}} - but that give me an error.

Here is HTML

<ul>
    <li *ngFor="let item of editor">
        {{item.id}}
        <ul>
            <li *ngFor="let subitem of item.children">
                {{subitem}}
                {{editor[0].id}}
            </li>
        </ul>
    </li>
</ul>

Angular 2 component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements OnInit {

      editor = {};
      constructor() {
        this.editor = editor;
         console.log('editor is', this.editor[1].item);
      }


      ngOnInit() {
      }

}

    const editor = [
        {
         id: 1, 
         item: 'pen',
         menuView: 'edit-view',
         mainView: 'edit-view',
         children:[4 , 5]
        },
        {id: 2, item: 'ruller', menuView: 'edit-view',mainView: 'edit-view'},
        {id: 3, item: 'pencil', menuView: 'pencil-view',mainView: 'pencil-view'},
        {id: 4, item: 'black', menuView: 'pen-black',mainView: 'pen--black'},
        {id: 5, item: 'white', menuView: 'pen-white',mainView: 'pen-white'},
 {id: 6, item: 'edit', menuView: 'edit-white',mainView: 'edit-white'},
 {id: 7, item: 'edit', menuView: 'edit-white',mainView: 'edit-white'}
    ];

How to show in the first loop only element with ID 1, 6,7 ? Do I create a custom pipe? If I got an array of 1000 id is a pipe the best thing?

Upvotes: 2

Views: 377

Answers (3)

yurzui
yurzui

Reputation: 214175

As your object is actually array of objects you can use custom pipe to filter array:

@Pipe({
  name: 'findById'
})
export class FindByIdPipe {
  transform(arr: any[], id: number) {
    return arr.find(x => x.id === id);
  }
}

then in your template

{{ (editor | findById: subitem).item }}

Plunker Example

Upvotes: 2

Aravind
Aravind

Reputation: 41571

<li *ngFor="let item of editor">
        {{item.id}}
        <ul *ngIf="item.children">
            <li *ngFor="let subitem of item.children">
            {{getChild(subitem) | json}}

            </li>
        </ul>
    </li>

You should have the below method

getChild(id){
    console.log(_.find(this.editor, { 'id': id}));
    return _.find(this.editor, { 'id': id});
  }

Note: I am using lodash library because I love it. LIVE DEMO

Upvotes: 2

Carlos Mermingas
Carlos Mermingas

Reputation: 3892

Not sure if I understood but... You have to use the index. Look for "Local Variables" in this page

<ul>
    <li *ngFor="let item of editor; let editorIndex = index">
        {{item.id}}
        <ul>
            <li *ngFor="let subitem of item.children">
                {{subitem}}
                {{editor[editorIndex].id}}
            </li>
        </ul>
    </li>
</ul>

Or you can just use item:

<ul>
    <li *ngFor="let item of editor">
        {{item.id}}
        <ul>
            <li *ngFor="let subitem of item.children">
                {{subitem}}
                {{item.id}}
            </li>
        </ul>
    </li>
</ul>

Upvotes: 0

Related Questions