Onclick of the list item button name should display which is in array

Question

i have been trying to display the name of the array item onclick of the user button but onclick of that i m getting name of the user in console but not in page level

this is the app.component.ts file code

  users = DUMMY_USERS;
  selectedUserId?:string;

  get selectedUser(){
    return this.users.find((user) => user.id === this.selectedUserId)!;
  }
  onSelectUser(id:string){
   this.selectedUserId = id;
  }

this is the app.component.html file code

<app-header />
  <ul id="users">
    @for (user of users; track user.id){
      <li >
        <app-users 
        [user]="user"
         (select)="onSelectUser($event)"
        />
      </li>
     }
  </ul>
  @if(selectedUser){
   <app-tasks [name]="selectedUser.name"></app-tasks>
  }@else{
    <p id="fallback">if user not selected anything then else condition will display by default</p>
  }
    
</main>

i have been trying to display the name of the array item onclick of the user button but onclick of that i m getting name of the user in console but not in page level

users.component.html

<div>
        <button (click)="onSelectedUser()">
            <img [src]= "imagePath"> 
           <span>{{user.name}}</span> 
        </button>
    </div>

users.component.ts

interface User {
  id:string,
  avatar:string,
  name:string
}

@Input ({required:true}) user!: User

@Output() select =new EventEmitter<string>();

    get imagePath(){
      return '/assets/users/'+this.user.avatar;
    }

    onSelectedUser(){
      this.select.emit(this.user.name);
    }
}

this is the code i m trying it i m newly learning angular can some one please explain what is the issue here

Naren Murali · Accepted Answer · 2024-08-09 10:39:46Z

1

You have to emit the id, not the name from the child (users.component.ts).

onSelectedUser(){
  this.select.emit(this.user.id); // <- changed here!
}

Because selectedUser is looked up using id, not name. Since in your original code you are emitting name, the find statement always returns false, since we are looking up the user name and comparing it with the user id.

get selectedUser(){
    return this.users.find((user) => user.id === this.selectedUserId)!;
}

edited Aug 9, 2024 at 10:39

answered Aug 9, 2024 at 10:33

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

Onclick of the list item button name should display which is in array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related