Is it possible to programmatically select a item in a list?
I have the following list to be showed:
<li *ngFor="let player of players" [class.selected]="player === selectedPlayer" (click)="onSelect(player)">
<a>
<span class="badge">{{player.victories}}</span>
<span class="badge2">{{player.matches}}</span>
{{player.name}}
</a>
</li>
I pass the selectedPlayer to a desendant component using a symple function:
onSelect(player: Player): void {
this.selectedPlayer = player;
}
So the selected item is used to detail the player in another component.
The problem is: if I refresh the list the previously selectedPlayer will be lost, but I want to stay selected.
html angular typescript
edited Nov 23 '18 at 17:12
ksav
5,34921331
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
add a comment |
I have the following list to be showed:
<li *ngFor="let player of players" [class.selected]="player === selectedPlayer" (click)="onSelect(player)">
<a>
<span class="badge">{{player.victories}}</span>
<span class="badge2">{{player.matches}}</span>
{{player.name}}
</a>
</li>
I pass the selectedPlayer to a desendant component using a symple function:
onSelect(player: Player): void {
this.selectedPlayer = player;
}
So the selected item is used to detail the player in another component.
The problem is: if I refresh the list the previously selectedPlayer will be lost, but I want to stay selected.
html angular typescript
edited Nov 23 '18 at 17:12
ksav
5,34921331
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
you have to save it, just add a flag in each row and according to change, you update you list, so if it's refresh, you can continue to have the selected items
– Steve Ruben
Nov 23 '18 at 17:13
Initially selectedPlayer is empty, and when [class.selected]="player === selectedPlayer" tries to do this, it finds selectedPlayer to be empty. Hence, its false, and its not highlighting.
– Aijaz
Nov 23 '18 at 18:05
What exactly do you mean by refresh the list? Do you reload the page?
– SiddAjmera
Nov 23 '18 at 18:38
Its possible to add players to the list, and when thats done the list is refreshed (downloaded again).
– Felipe Hogrefe Bento
Nov 23 '18 at 19:03
add a comment |
I have the following list to be showed:
<li *ngFor="let player of players" [class.selected]="player === selectedPlayer" (click)="onSelect(player)">
<a>
<span class="badge">{{player.victories}}</span>
<span class="badge2">{{player.matches}}</span>
{{player.name}}
</a>
</li>
I pass the selectedPlayer to a desendant component using a symple function:
onSelect(player: Player): void {
this.selectedPlayer = player;
}
So the selected item is used to detail the player in another component.
The problem is: if I refresh the list the previously selectedPlayer will be lost, but I want to stay selected.
html angular typescript
edited Nov 23 '18 at 17:12
ksav
5,34921331
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
I have the following list to be showed:
<li *ngFor="let player of players" [class.selected]="player === selectedPlayer" (click)="onSelect(player)">
<a>
<span class="badge">{{player.victories}}</span>
<span class="badge2">{{player.matches}}</span>
{{player.name}}
</a>
</li>
I pass the selectedPlayer to a desendant component using a symple function:
onSelect(player: Player): void {
this.selectedPlayer = player;
}
So the selected item is used to detail the player in another component.
The problem is: if I refresh the list the previously selectedPlayer will be lost, but I want to stay selected.
html angular typescript
html angular typescript
edited Nov 23 '18 at 17:12
ksav
5,34921331
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
edited Nov 23 '18 at 17:12
ksav
5,34921331
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
edited Nov 23 '18 at 17:12
ksav
5,34921331
edited Nov 23 '18 at 17:12
ksav
5,34921331
edited Nov 23 '18 at 17:12
ksav
5,34921331
5,34921331
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
asked Nov 23 '18 at 17:08
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
298
you have to save it, just add a flag in each row and according to change, you update you list, so if it's refresh, you can continue to have the selected items
– Steve Ruben
Nov 23 '18 at 17:13
Initially selectedPlayer is empty, and when [class.selected]="player === selectedPlayer" tries to do this, it finds selectedPlayer to be empty. Hence, its false, and its not highlighting.
– Aijaz
Nov 23 '18 at 18:05
What exactly do you mean by refresh the list? Do you reload the page?
– SiddAjmera
Nov 23 '18 at 18:38
Its possible to add players to the list, and when thats done the list is refreshed (downloaded again).
– Felipe Hogrefe Bento
Nov 23 '18 at 19:03
add a comment |
you have to save it, just add a flag in each row and according to change, you update you list, so if it's refresh, you can continue to have the selected items
– Steve Ruben
Nov 23 '18 at 17:13
Initially selectedPlayer is empty, and when [class.selected]="player === selectedPlayer" tries to do this, it finds selectedPlayer to be empty. Hence, its false, and its not highlighting.
– Aijaz
Nov 23 '18 at 18:05
What exactly do you mean by refresh the list? Do you reload the page?
– SiddAjmera
Nov 23 '18 at 18:38
Its possible to add players to the list, and when thats done the list is refreshed (downloaded again).
– Felipe Hogrefe Bento
Nov 23 '18 at 19:03
you have to save it, just add a flag in each row and according to change, you update you list, so if it's refresh, you can continue to have the selected items
– Steve Ruben
Nov 23 '18 at 17:13
you have to save it, just add a flag in each row and according to change, you update you list, so if it's refresh, you can continue to have the selected items
– Steve Ruben
Nov 23 '18 at 17:13
Initially selectedPlayer is empty, and when [class.selected]="player === selectedPlayer" tries to do this, it finds selectedPlayer to be empty. Hence, its false, and its not highlighting.
– Aijaz
Nov 23 '18 at 18:05
Initially selectedPlayer is empty, and when [class.selected]="player === selectedPlayer" tries to do this, it finds selectedPlayer to be empty. Hence, its false, and its not highlighting.
– Aijaz
Nov 23 '18 at 18:05
What exactly do you mean by refresh the list? Do you reload the page?
– SiddAjmera
Nov 23 '18 at 18:38
What exactly do you mean by refresh the list? Do you reload the page?
– SiddAjmera
Nov 23 '18 at 18:38
Its possible to add players to the list, and when thats done the list is refreshed (downloaded again).
– Felipe Hogrefe Bento
Nov 23 '18 at 19:03
Its possible to add players to the list, and when thats done the list is refreshed (downloaded again).
– Felipe Hogrefe Bento
Nov 23 '18 at 19:03
add a comment |
2 Answers
2
active
oldest
votes
I just needed to "reselect" the correspondent selectedPlayer on the new list. Ts, html or Angular does the rest here (enlighten me if I'm wrong), in a way that I don't need to access the list and programmatically set the new selected.
For that I've made the following function:
private reSelectPlayer() {
for (let p of this.players) {
if (this.haveSelected) {
if (p.id === this.selectedPlayer.id) {
this.selectedPlayer = p;
}
}
}
}
Which I call on the refresh function:
private refreshPlayersList() {
this.playerService.getPlayerList().subscribe(
players => {
this.players = players
this.reSelectPlayer();
});
}
Notice that haveSelected is initialized with a false value and is setted to true when the user select an item on the list.
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
add a comment |
First of all, it's normal to add the behavior you want, you can add a flag.
Add a flag to the object. For this case, I will create a new object:
class pObject{
Player player;
isSelected boolean:= false;
}
Modified the selected function:
onSelect(obj: pObject){
this.pObject = obj;
this.isSelected = ! this.isSelected ;
}
Update the display:
enter code here
...
edited Nov 23 '18 at 18:02
Austen Holland
8201315
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450627%2fis-it-possible-to-programmatically-select-a-item-in-a-li-ngfor-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I just needed to "reselect" the correspondent selectedPlayer on the new list. Ts, html or Angular does the rest here (enlighten me if I'm wrong), in a way that I don't need to access the list and programmatically set the new selected.
For that I've made the following function:
private reSelectPlayer() {
for (let p of this.players) {
if (this.haveSelected) {
if (p.id === this.selectedPlayer.id) {
this.selectedPlayer = p;
}
}
}
}
Which I call on the refresh function:
private refreshPlayersList() {
this.playerService.getPlayerList().subscribe(
players => {
this.players = players
this.reSelectPlayer();
});
}
Notice that haveSelected is initialized with a false value and is setted to true when the user select an item on the list.
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
add a comment |
I just needed to "reselect" the correspondent selectedPlayer on the new list. Ts, html or Angular does the rest here (enlighten me if I'm wrong), in a way that I don't need to access the list and programmatically set the new selected.
For that I've made the following function:
private reSelectPlayer() {
for (let p of this.players) {
if (this.haveSelected) {
if (p.id === this.selectedPlayer.id) {
this.selectedPlayer = p;
}
}
}
}
Which I call on the refresh function:
private refreshPlayersList() {
this.playerService.getPlayerList().subscribe(
players => {
this.players = players
this.reSelectPlayer();
});
}
Notice that haveSelected is initialized with a false value and is setted to true when the user select an item on the list.
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
add a comment |
I just needed to "reselect" the correspondent selectedPlayer on the new list. Ts, html or Angular does the rest here (enlighten me if I'm wrong), in a way that I don't need to access the list and programmatically set the new selected.
For that I've made the following function:
private reSelectPlayer() {
for (let p of this.players) {
if (this.haveSelected) {
if (p.id === this.selectedPlayer.id) {
this.selectedPlayer = p;
}
}
}
}
Which I call on the refresh function:
private refreshPlayersList() {
this.playerService.getPlayerList().subscribe(
players => {
this.players = players
this.reSelectPlayer();
});
}
Notice that haveSelected is initialized with a false value and is setted to true when the user select an item on the list.
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
I just needed to "reselect" the correspondent selectedPlayer on the new list. Ts, html or Angular does the rest here (enlighten me if I'm wrong), in a way that I don't need to access the list and programmatically set the new selected.
For that I've made the following function:
private reSelectPlayer() {
for (let p of this.players) {
if (this.haveSelected) {
if (p.id === this.selectedPlayer.id) {
this.selectedPlayer = p;
}
}
}
}
Which I call on the refresh function:
private refreshPlayersList() {
this.playerService.getPlayerList().subscribe(
players => {
this.players = players
this.reSelectPlayer();
});
}
Notice that haveSelected is initialized with a false value and is setted to true when the user select an item on the list.
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
answered Nov 23 '18 at 19:12
Felipe Hogrefe BentoFelipe Hogrefe Bento
298
298
add a comment |
add a comment |
First of all, it's normal to add the behavior you want, you can add a flag.
Add a flag to the object. For this case, I will create a new object:
class pObject{
Player player;
isSelected boolean:= false;
}
Modified the selected function:
onSelect(obj: pObject){
this.pObject = obj;
this.isSelected = ! this.isSelected ;
}
Update the display:
enter code here
...
edited Nov 23 '18 at 18:02
Austen Holland
8201315
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
add a comment |
First of all, it's normal to add the behavior you want, you can add a flag.
Add a flag to the object. For this case, I will create a new object:
class pObject{
Player player;
isSelected boolean:= false;
}
Modified the selected function:
onSelect(obj: pObject){
this.pObject = obj;
this.isSelected = ! this.isSelected ;
}
Update the display:
enter code here
...
edited Nov 23 '18 at 18:02
Austen Holland
8201315
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
add a comment |
First of all, it's normal to add the behavior you want, you can add a flag.
Add a flag to the object. For this case, I will create a new object:
class pObject{
Player player;
isSelected boolean:= false;
}
Modified the selected function:
onSelect(obj: pObject){
this.pObject = obj;
this.isSelected = ! this.isSelected ;
}
Update the display:
enter code here
...
edited Nov 23 '18 at 18:02
Austen Holland
8201315
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
First of all, it's normal to add the behavior you want, you can add a flag.
Add a flag to the object. For this case, I will create a new object:
class pObject{
Player player;
isSelected boolean:= false;
}
Modified the selected function:
onSelect(obj: pObject){
this.pObject = obj;
this.isSelected = ! this.isSelected ;
}
Update the display:
enter code here
...
edited Nov 23 '18 at 18:02
Austen Holland
8201315
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
edited Nov 23 '18 at 18:02
Austen Holland
8201315
edited Nov 23 '18 at 18:02
Austen Holland
8201315
edited Nov 23 '18 at 18:02
Austen Holland
8201315
8201315
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
answered Nov 23 '18 at 17:22
Steve RubenSteve Ruben
32439
32439
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
add a comment |
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
The problem is not knowing which was the selected item. Is to reselect it without needing to click on the item in the list.
– Felipe Hogrefe Bento
Nov 23 '18 at 17:33
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450627%2fis-it-possible-to-programmatically-select-a-item-in-a-li-ngfor-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you have to save it, just add a flag in each row and according to change, you update you list, so if it's refresh, you can continue to have the selected items
– Steve Ruben
Nov 23 '18 at 17:13
Initially selectedPlayer is empty, and when [class.selected]="player === selectedPlayer" tries to do this, it finds selectedPlayer to be empty. Hence, its false, and its not highlighting.
– Aijaz
Nov 23 '18 at 18:05
What exactly do you mean by refresh the list? Do you reload the page?
– SiddAjmera
Nov 23 '18 at 18:38
Its possible to add players to the list, and when thats done the list is refreshed (downloaded again).
– Felipe Hogrefe Bento
Nov 23 '18 at 19:03