Select specific element with angular

Question

I'm using a ngFor loop to GET a number of elements from a server.

Target: Every element has a View all button, that when is pressed I want to display the entire JSON object that has been generated by that element

Problem: When I press it, I only get the first element.

Code:

<div class="display" *ngFor="let field of fields" >
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button class="view" onclick="document.getElementById('ViewAll').style.display = 'block'">View all</button>

  <div  *ngFor="let field of fields" id="ViewAll">
    <p>ID: {{field.ID}}</p>
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <p>Others: {{field.others}}</p>
  </div>

What is wrong? What have I to change?

I think on click of viewAll button, you just want to show the name,crop,description in JSON of that particular element ? — Durgesh Pal
– Durgesh Pal, Commented Jul 17, 2020 at 15:35
@DurgeshPal exactly.But if i have more then one object i can't show the second one.Example:Let's say i have the folowing JSON file :[{"name": "Field1","Crop": "CropType","Description": "...","ID": "0"},{"name": "Field2","Crop": "CropType2","Description": "...","ID": "1"}].When i press the button on the second generated element i get the first element from JSON — Robert Dumbrava
– Robert Dumbrava, Commented Jul 17, 2020 at 15:38
Use *ngIf="visible" in the below div in which you are showing JSON and assign it true on click of view all. — Durgesh Pal
– Durgesh Pal, Commented Jul 17, 2020 at 15:50

Ganesh · Accepted Answer · 2020-07-17 16:14:51Z

3

It's always not recommended to use the document in Angular template. Because mostly Angular will manage the DOM with it's own background processes.

You can achieve this with the help of another boolean variable.

...

<div class="display" *ngFor="let field of fields" >
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button class="view" (click)="viewAllBoolean = true">View all</button>
</div>

<ng-container *ngIf="viewAllBoolean">
  <div *ngFor="let field of fields">
    <p>ID: {{field.ID}}</p>
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <p>Others: {{field.others}}</p>
  </div>
</ng-container>

...

Happy Coding.. :)

edited Jul 17, 2020 at 16:14

answered Jul 17, 2020 at 15:18

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

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

3 Comments

Martin Parenteau Over a year ago

It is also not recommended to use onclick. You should use (click) instead. By the way, what is <ng-template *ngFor="viewAllBoolean"> supposed to do? I doubt that this is valid template syntax.

Ganesh Over a year ago

Agree and replaced the ng-template tag with ng-container for ngIf to check the boolean flag. (I supposed use ngIf before as well). Thank you for pointed it out. :))

Martin Parenteau Over a year ago

One more observation: I suggest to remove id="ViewAll". There should not be more than one element with a given id, and that id is not used anyway.

Collectives™ on Stack Overflow

Select specific element with angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related