Angular access DOM sibling element to alter css class

Question

How do I gain access to the respective sibling element of my button from the ngFor iteration on my collection?

Dom Element, I'm attempting to access this DOM element, so I can alter the sibling element div.popup class. As shown in the Codepen example linked at the bottom of the post.

I'm very new with angular, please advise.

      <button
        #popBtn
        href="#"
        id="info"
        class="info popup-trigger"
        title="info"
        (click)="PopUp($event)"
      >
        Popup
      </button>

Prior to the posting here, I read on the following articles but I couldn't understand completely or relate to it.

Pass a reference to DOM object with ng-click

how to get DOM element with ng-click

How to get the element html clicked in a ngFor to add a css class?

Overview of code

Component.html

<section class="ArticlesGrid">
  <div *ngFor="let article of articles" class="windowsBox">
    <article class="ui-titlebar">
      <h4 class="ui-titletext">{{article.title}}</h4>
    </article>
    <div class="windowsScreen">
      <button
        #popBtn
        href="#"
        id="info"
        class="info popup-trigger"
        title="info"
        (click)="PopUp($event)"
      >
        Popup
      </button>

      <div class="popup" role="alert">
        <div class="popup-container">
          <a href="#" class="popup-close img-replace">Close</a>
          <p>{{article.content}}}</p>
        </div>
      </div>
    </div>
    <p class="windowsTech">
      Technologies:
      <span class="THtml"></span>
      <span class="TCss"></span>
      <span class="TJs"></span>
    </p>
  </div>
</section>

Component.ts

  PopUp(event: Event) {
    //console.log(this.viewBtn.nativeElement.nextElementSibling.classList.toggle("is-visible"));
    console.log(event);
    // this.viewBtn.nativeElement.
  }

SandBox Mockup

https://stackblitz.com/edit/angular-collection-popup?file=src/app/app.component.html

Function to mirror

https://codepen.io/Gugiui/pen/vweXYR

Thanks for reading my question. I hope you can advise/guide me

Sanjay Choudhary · Accepted Answer · 2021-05-23 07:38:59Z

1

add template reference variable on popup div -

<div class="popup" role="alert" #popupDiv>

pass it in button click function -

(click)="PopUp($event, popupDiv)"

change class in PopUp method using plain javascript -

PopUp(event: Event, element) {

    element.classList.remove('popup');
    element.classList.add('test');
    console.log(element.classList);
  }

answered May 23, 2021 at 7:38

Sanjay Choudhary

3494 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Angular access DOM sibling element to alter css class

Overview of code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Overview of code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related