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

user_11129951 0
Viewed 71

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 class="item">
        <div class="imgNameDiv">
         <div class="imgName">
           <div class="img">
             <img src="/assets/noprofile.jpg">
           </div>
           <div class="name">
             <i>Thomas Rak</i>
           </div>
       </div>
       </div>
       <div>
         <i (click)="clickhua($event)">Add</i>
         <i [hidden]="sent" class="fa fa-check" aria-hidden="true"></i>
       </div>
     </div>
     
     <div class="item">
        <div class="imgNameDiv">
         <div class="imgName">
           <div class="img">
             <img src="/assets/noprofile.jpg">
           </div>
           <div class="name">
             <i>John</i>
           </div>
       </div>
       </div>
       <div>
         <i (click)="clickhua($event)">Add</i>
         <i [hidden]="sent" class="fa fa-check" 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

angularjs-directive angular html
2 Answers

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.

user_45260120

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

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

<div class="item">
  <div class="imgNameDiv">
    <div class="imgName">
      <div class="img">
        <img src="/assets/noprofile.jpg" />
      </div>
      <div class="name">
        <i>John</i>
      </div>
    </div>
  </div>
  <div>
    <i (click)="clickhua($event, icon2)">Add</i>
    <i #icon2 [hidden]="sent" class="fa fa-check" 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.

user_103827690
Related