Angular how to pass array in to component

Question

How do I pass an array from template to component file. I have an if condition which is dependent on the index of the loop. Please help me to find the right approach. Something like this https://jsfiddle.net/HB7LU/7638

<ul>
  <li *ngFor="let data of list_value | keyvalue; let i=index;" (click)="getListValue(i,data)">
  <li>
  <ul>
     <li *ngFor="let item of data.value" *ngIf="data[i].active">
     <li>
  <ul>
<ul>

example.componet.ts file

export class SomeComponent{

   list_value: Array<any> = [];
   active: boolean;

   getListValue(index: String, data: any) {
       console.log("Test",data[index]);
       list_value[index].active = !list_value[index].active
   }
}

I want to achieve a sloution like this jsfiddle.net/HB7LU/7638 — Ravi
– Ravi, Commented Jul 19, 2019 at 5:21

Amrit · Accepted Answer · 2019-07-19 05:37:05Z

2

One of the way to pass data to component is by using @input in angular like this:

<ul>
  <li *ngFor="let data of list_value | keyvalue; let i=index;" (click)="getListValue(i,data)">
  <li>
  <ul>
     <li *ngFor="let item of data.value" *ngIf="data[i].active">
      <app-selector *ngSwitchCase="'observations'" [inputdata]=item></app-selector>

     <li>

and in your component.ts file which loads inside *ngFor:

import { Component, OnInit, Input, NgModule, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss']
})
export class ObservationsComponent implements OnChanges{
  @Input() inputdata: any;
}
ngOnChanges() {
        console.log(this.inputdata)

    }

answered Jul 19, 2019 at 5:37

Amrit

2,1831 gold badge24 silver badges42 bronze badges

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

Comments

Sudip Sarker · Accepted Answer · 2019-07-19 05:31:48Z

0

If you want to pass the array, just pass the list_value. *ngFor is just like a for loop, it iterates over an array. Data itself maybe an array (as it is of type 'any'). But the index you are sending in the function is the index where data is in list_value[index]

Write *ngIf="data.active"

Also as it is shown in the link given, you don't need the index. Just write data.active = !data.active

answered Jul 19, 2019 at 5:31

Sudip Sarker

4213 silver badges7 bronze badges

3 Comments

Ravi Over a year ago

Thanks for you reply.. I tried your solution and partially it works. The only problem is that that when we click on the new menu's item, the previous menu should be collapsed but that is not hapening...

Sudip Sarker Over a year ago

Template parse errors: Can't have multiple template bindings on one element. Use only one attribute prefixed with * as you are using *ngFor and *ngIf in the same line. use [hidden]='!data.active' in place of *ngIf

Ravi Over a year ago

No i didnt get you.. How ngif will make sure the other menu is getting collapse like this jsfiddle.net/HB7LU/7638

Sandeep Sing Gangwar · Accepted Answer · 2019-07-19 05:42:16Z

0

Hopefully below code will helpful

<ul>
  <li *ngFor="let data of list_value;let i=index" (click)="getListValue(i,data)">    
      <span>{{data.name}}</span>
      <ul>

                <li *ngFor="let subItem of data.subItems" [hidden]="!data.active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
  </li> 
</ul>

Component ts

   export class SomeComponent{
     list_value: Array<any> = [
            {          
                name: "Item1",
                subItems: [
                    {name: "SubItem1"},
                    {name: "SubItem2"}
                ]
            },
            {
                name: "Item2",            
                subItems: [
                    {name: "SubItem3"},
                    {name: "SubItem4"},
                    {name: "SubItem5"}
                ]
            },
            {
                name: "Item3",
                subItems: [
                    {name: "SubItem6"}
                ]
            }
        ];;   
       getListValue(index: number, data: any) {      
           this.list_value[index].active = !this.list_value[index].active
       }
    }

Workign App https://stackblitz.com/edit/angular-gtqnmh

answered Jul 19, 2019 at 5:42

Sandeep Sing Gangwar

498 bronze badges

2 Comments

Ravi Over a year ago

This is coming as undefined.. this.list_value[index].active... from where are getting this "active" value

Sandeep Sing Gangwar Over a year ago

We are extending object inside getListValue function.

Collectives™ on Stack Overflow

Angular how to pass array in to component

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related