How to add attributes to parent dom elements of component in angular2?

Question

I have the following:

...
<div class="container">
  <div class="fancy">
    <fancybutton></fancybutton>
  </div>
  <button (click)="addAttribute()">Remove</button>
  <button (click)="remAttribute()">Add</button>
</div>

... My question is, How can I make it so that when the user hits "addAttribute()" it adds "testattribute" to the parent dom element of the component like this:

  <div class="fancy" testattribute="a">
    <fancybutton></fancybutton>
  </div>

This is my fancy-button component, below is the parent template that i have the fancy-button integrated in within the home.component.html:

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

@Component({
  selector: 'home',  // <home></home>
  providers: [
    Title
  ],
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})

You could use *ngIf in order to hide the test button, then set the test button to a function that is called when you hit your addAtrribute button. similar to a show/hide effect — Bean0341
– Bean0341, Commented Oct 24, 2016 at 14:15
This looks like an XY problem to me. Why do you want to add a "testattribute" to the div? What's your end goal? And how is the fancybutton relevant to the question? — JB Nizet
– JB Nizet, Commented Oct 24, 2016 at 14:17
I have attributes in there for absolute positioning: top: 40px, left: 50px. I my goal is to make it so that I can click I button to change the absolute position of the container that has fancybutton in it, but is implemented inside of the fancybutton component. — Rolando
– Rolando, Commented Oct 24, 2016 at 15:18

Günter Zöchbauer · Accepted Answer · 2016-10-24 14:28:48Z

1

<div class="container">
  <div class="fancy" [attr.testattribute]="isAttr">
    <fancybutton></fancybutton>
  </div>
  <button (click)="isAttr = true">Remove</button>
  <button (click)="isAttr = false">Add</button>
</div>

answered Oct 24, 2016 at 14:28

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

user6882389 · Accepted Answer · 2016-10-24 14:25:14Z

0

I have a possible solution (untested at time of writing):

Add the name and value of the parameters to the addAttribute()call as follows:

addAttribute("testattribute", "a");

You'll also need to add this.parentElement to the beginning of the call:

this.parentElement.addAttribute("testattribute", a");

Let me know if this solution works for you.

answered Oct 24, 2016 at 14:25

user6882389

2 Comments

Rolando Over a year ago

Where is the reference to "this" coming from inside of the component? this.parentElement is undefined.

Rolando Over a year ago

Does not work. Not sure where referennce to "this" comes from.

Collectives™ on Stack Overflow

How to add attributes to parent dom elements of component in angular2?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related