0

Based on the response I get , I will be generating the divs dynamically . for instance if my response is 

Array = {response: {  
                  " para1" : "para1name", 
                   " para2" : "para2name"
              }
}

<div *ngFor="let x of Array; > 
<button>x.para1</button>
<div > content for para1</div>
</div>

I have to store all the properties from json into an array and iterate through it to display the divs. In this case I should have 2 divs But its not working . and also when I click on the button for para1 then div for para1 should be shown n when I click on para2 div I should hide div for para1 and should show div for para2 . how this can be accomplished.

Karthi
  • 57
  • 11

2 Answers2

1

Referring to that solution where you want to iterate usings keys of your json object https://stackoverflow.com/a/37431657/2013245

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    if (!value) {
      return value;
    } 

    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    } 
    return keys;
  } 
}

the above code will push your keys and values in an array whereby you can iterate.

Then in your component.ts, you can do something like this

<div *ngFor="let x of Array;" >
 <div *ngFor="#temp of x | keys"> 
   <button>temp.para1</button>
   <div> content for para1</div>
 <div>
</div>

Hope that helps.

ashley
  • 1,008
  • 17
  • 37
-1
show: boolean = false;

clicked() {

      console.log("clicked");
      this.show = !this.show;

}

your html code -

input type="submit" value="Search" (click)="clicked()"

<div *ngIf="show">
your div content to be displayed dynamically
</div>
Derrick
  • 3,669
  • 5
  • 35
  • 50
Malatesh d
  • 1