How To Get A child element inside a particular div from list of div in angular-CodePudding

I am new to angular. I have list of people. Each div has people name and send request button. when send request button is clicked, the button becomes invisible and 'tick' button becomes visible.

I can access this feature in angularjs using 'this'.

<div >
        <div >
         <div >
           <div >
             <img src="/assets/noprofile.jpg">
           </div>
           <div >
             <i>Thomas Rak</i>
           </div>
       </div>
       </div>
       <div>
         <i (click)="clickhua($event)">Add</i>
         <i [hidden]="sent"  aria-hidden="true"></i>
       </div>
     </div>
     
     <div >
        <div >
         <div >
           <div >
             <img src="/assets/noprofile.jpg">
           </div>
           <div >
             <i>John</i>
           </div>
       </div>
       </div>
       <div>
         <i (click)="clickhua($event)">Add</i>
         <i [hidden]="sent"  aria-hidden="true"></i>
       </div>
     </div>

If user click on Add Of "John" only add icon of john should get hidden and tick icon should become visible

CodePudding user response：

Why not pass in the index of what you are clicking on. Ex:

clickhua({index: 0})

Then your method definition would be something like:

clickhua(event: {index: number}) {
}

With respect to making sure the right hidden is shown, you can likewise create a corresponding object for it. Ex:

hiddenArray: {
  index: number,
  hidden: boolean
}[]

At initialization you can just define that array having just 2 values. Then in your clickhua what you can do is:

let isHidden = this.hiddenArray.find(x => x.index == event.index).hidden;
this.hiddenArray.find(x => x.index == event.index).hidden = !isHidden

Also create a getter that accepts a specific id:

getIsHidden(index: number) : boolean {
   return this.hiddenArray?.find(x => x.index == index).hidden;
}

In your HTML just do

[hidden]="getIsHidden(0)"

StackBlitz: https://stackblitz.com/edit/angular-fnvbgr?file=src/app/app.component.ts

In essence, given that your code block is just the html and the icons don't work, the point of the stackblitz is that you can leverage objects and use them to track the state of the individual buttons and what was clicked or not.

CodePudding user response：

I would say the naive solution is to sent the tick icon as part of the clickkhua and just hide it there:

<div >
  <div >
    <div >
      <div >
        <img src="/assets/noprofile.jpg" />
      </div>
      <div >
        <i>Thomas Rak</i>
      </div>
    </div>
  </div>
  <div>
    <i (click)="clickhua($event, icon1)">Add</i>
    <i #icon1 [hidden]="sent"  aria-hidden="true"></i>
  </div>
</div>

<div >
  <div >
    <div >
      <div >
        <img src="/assets/noprofile.jpg" />
      </div>
      <div >
        <i>John</i>
      </div>
    </div>
  </div>
  <div>
    <i (click)="clickhua($event, icon2)">Add</i>
    <i #icon2 [hidden]="sent"  aria-hidden="true"></i>
  </div>
</div>

clickhua(event: Event, tickIcon: HTMLElement) {
    const addIcon = event.target as HTMLElement;

    addIcon.style.display = 'none';
    tickIcon.style.display = 'block';
}

But as you can see, that's a lot of code repetition. I would say the right approach is to use some sort of model to represent these items in the DOM. Since you're a beginner I will just let you try and figure how to do it by yourself first.