How to create a dynamic button using dynamic data and get dynamic values on the button click in angular

Question

Here i am getting below Dynamic data from server

{
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "lat":"25.6599899",
            "lng":"45.3664646",
            "status":"0"

        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "lat":"25.99899",
            "lng":"45.4646",
             "status":"1"

        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "lat":"25.2339899",
            "lng":"45.56664646",
            "status":"1"

        }
    ]
}

Here how to create the Dynamic buttons based on the Status value suppose if status=1 value having 3 members then 3 buttons have to be created with that particular names and ids and when the user clicks any button that particular of the person and name has to be displayed on alert

Have you tried writing any code yourself yet? (if not, you should try that first) — CertainPerformance
– CertainPerformance, Commented Mar 31, 2018 at 3:21
yeah im looping the data based on the condition and then i got only one confusion how can i get the name, id ,status values in the button? — Shyam Nair
– Shyam Nair, Commented Mar 31, 2018 at 3:23
Please provide some code that shows the work that you've done so far and where you are struggling. Additionally, the details around what is being asked is vague without enough information to determine what is needed, which will most likely not solicit too much help right now. — Daniel W Strimpel
– Daniel W Strimpel, Commented Mar 31, 2018 at 4:48
As already stated, please show the code you've actually written. Also a hint: this is the basic use case for frameworks like Angular (see ngFor). — Aluan Haddad
– Aluan Haddad, Commented Mar 31, 2018 at 5:16

Dhaval kansagara · Accepted Answer · 2018-03-31 05:29:12Z

3

As is understand like you need button for each status = 1 and on click need to display name of person.

ts code

Variable

public dynamicData = {
"data": [
  {
    "id": 4,
    "first_name": "Eve",
    "last_name": "Holt",
    "lat": "25.6599899",
    "lng": "45.3664646",
    "status": "0"

  },
  {
    "id": 5,
    "first_name": "Charles",
    "last_name": "Morris",
    "lat": "25.99899",
    "lng": "45.4646",
    "status": "1"

  },
  {
    "id": 6,
    "first_name": "Tracey",
    "last_name": "Ramos",
    "lat": "25.2339899",
    "lng": "45.56664646",
    "status": "1"

  }
]
};

Method

onButtonClick(data: any): void {
   alert(data.first_name + ' status is ' + data.status);
}

HTML Code

  <ng-container *ngFor="let data of dynamicData.data">
     <button [id]="data.id" class="btn btn-primary" (click)="onButtonClick(data)">
        {{data.first_name}}
     </button>
  </ng-container>

edited Mar 31, 2018 at 5:29

answered Mar 31, 2018 at 5:16

Dhaval kansagara

5615 silver badges17 bronze badges

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

3 Comments

Shyam Nair Over a year ago

Yeah but suppose if have 5 persons with status=0 and 3, persons with status =1 then for 5person 5 buttons with 5names on them and when I click on their individual name their individual name and I'd has to be displayed in alert and I have show all these in if else condition as both status 0,1,2 person count n buttons has to be displayed at a time

Dhaval kansagara Over a year ago

@TechieBoy i have revised my ans.

Shyam Nair Over a year ago

im able to dsiplay only one name even though i have more than 1

Collectives™ on Stack Overflow

How to create a dynamic button using dynamic data and get dynamic values on the button click in 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