CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
rcarcia02
rcarcia02

Reputation: 967

Changing the text inside my button that uses an ngFor

In my NativeScript app, I am trying to use a *ngFor to display the number of players that the user chose on a separate screen. This will say "Player 1, Player 2, etc." Then, when they click that button to select a player, I want to be able to change the text that says "Player ..." to say the player's name that's chosen. As you'll see, I tried using document.getElementById to choose the element but wasn't quite sure how to change the text once I got there.

Here's a simplified example of what I'm trying to do. I've simplified it so that instead of reading in the user's input (size), it's just set to 6. Also, I don't have the list of players come up or anything and am just trying to change the text of the button to anything at this moment. The rest will be easy once I figure out how to do that.

https://play.nativescript.org/?template=play-ng&id=67JcNJ&v=5

Any help would be appreciated!

Upvotes: 0

Views: 1283

Answers (3)

Manoj
Manoj

Reputation: 21898

You could simply pass the $event object to the tap event handler and do event.object.text to update the button text. But since you have a property binding on the button element, it might change back to actual value from array during a change detection cycle. So this.playersArray[id - 1] = "Player Name"; could work unless you don't want to change the source array.

event.object will be the button which was tapped. It's not a HTML button so you can't use HTML specific properties. Checkout the Button component for all available list of properties.

Also document.getElementById is HTML specific, it suppose to be .getViewById('yourViewId') from parent view. You might want to go through the basics of {N} components.

Updated Playground

Upvotes: 0

Crhistian
Crhistian

Reputation: 1272

Hmm, I'm guessing document doesn't exist in mobile which is why it doesn't work for you. I would do this:

public selectPlayer(id): void {
    this.playersArray[id - 1] = "Player Name";
  //document.getElementById(id + "player").innerText = "Player Name";
}

Upvotes: 0

hugomac
hugomac

Reputation: 366

It's better to use index to identify the item in ngFor

In home.component.html,

<Button [text]="(i == this.selectedIndex)? 'Player ' + key + ' is selected' : 'Player ' + key" *ngFor="let key of playersArray; let i = index;" (tap)="selectPlayer(i)"></Button>

In home.component.ts, add these

public selectedIndex = -1;

public selectPlayer(index) {
  this.selectedIndex = index;
}

P.S. Should avoid touching the DOM directly in Angular

Upvotes: 1

Related Questions