This object does not have support for the attribute or method "getAttribute"

Question

This object does not have support for the attribute or method "getAttribute"

I've searched for solutions, but nothing seems to work for me and now I'm feeling quite lost. My current setup involves Cordova, Ionic, and Angular 2.

Below is the HTML snippet:

 <ion-col *ngFor="let value of myButtonsFirstRow" width-25>
  <button #elem ptcolor (click)="volumeClick(elem)" attr.floatValue="{{value}}">
    {{value | fraction}}
  </button>
</ion-col>

And this is my TypeScript code:

volumeClick(htmlElem: HTMLElement) {
  this.volumeSelected = +htmlElem.getAttribute('floatValue'); 
}

My aim is to retrieve the value from an attribute that I created in my HTML. However, it seems like I can't access the getAttribute method. Although the htmlElem variable is set, I am unable to see the method, and I know there's something wrong with what I'm doing, but I can't figure out what!

Any help would be greatly appreciated.

angular typescript cordova ionic-framework

Answer 1

Answer №1

Absolutely, the reason for this behavior is that elem represents an Ionic component. There are several methods to achieve the desired outcome:

1) Regrettably, the Button component lacks a public method or property for accessing nativeElement or attribute. The following code should suffice:

volumeClick(elem: any) {
    this.volumeSelected = +elem._elementRef.nativeElement.getAttribute('floatValue'); 
}

2) Another approach is to retrieve the attribute using $event in your template like so:

<button (click)="volumeClick($event)" attr.floatValue="{{value}}"> {{value}}</button>

Your method would then appear as follows:

volumeClick(event: any) {
  this.volumeSelected = +event.currentTarget.getAttribute('floatValue'); 
}

PLEASE NOTE: I have used currentTarget because the Button component contains multiple children.

3) Alternatively, you can simply pass the value to the click event:

<button (click)="volumeClick(value)">{{value}}</button>

volumeClick(value: any) {
  this.volumeSelected = value; 
}

Or take a more straightforward approach:

<button (click)="volumeSelected = value">{{value}}</button>

Answer 2

Absolutely, the reason for this behavior is that elem represents an Ionic component. There are several methods to achieve the desired outcome:

1) Regrettably, the Button component lacks a public method or property for accessing nativeElement or attribute. The following code should suffice:

volumeClick(elem: any) {
    this.volumeSelected = +elem._elementRef.nativeElement.getAttribute('floatValue'); 
}

2) Another approach is to retrieve the attribute using $event in your template like so:

<button (click)="volumeClick($event)" attr.floatValue="{{value}}"> {{value}}</button>

Your method would then appear as follows:

volumeClick(event: any) {
  this.volumeSelected = +event.currentTarget.getAttribute('floatValue'); 
}

PLEASE NOTE: I have used currentTarget because the Button component contains multiple children.

3) Alternatively, you can simply pass the value to the click event:

<button (click)="volumeClick(value)">{{value}}</button>

volumeClick(value: any) {
  this.volumeSelected = value; 
}

Or take a more straightforward approach:

<button (click)="volumeSelected = value">{{value}}</button>

Answer 3

Answer №2

When working with a template variable, you will receive an ElementRef as a reference. To interact with the actual HTMLElement, simply access it using ElementRef.nativeElement

handleClick(htmlElement: ElementRef) {
  this.selectedVolume = +htmlElement.nativeElement.getAttribute('floatValue'); 
}

Answer 4

When working with a template variable, you will receive an ElementRef as a reference. To interact with the actual HTMLElement, simply access it using ElementRef.nativeElement

handleClick(htmlElement: ElementRef) {
  this.selectedVolume = +htmlElement.nativeElement.getAttribute('floatValue'); 
}

This object does not have support for the attribute or method "getAttribute"

Answer №1

Answer №2

Similar questions

The icon for caret down in FontAwesome is not displaying when using ngClass

Generate a dynamic key object in Angular/TypeScript

Include a class in ul > li elements upon page load in Angular4

Using NodeJS API gateway to transfer image files to S3 storage

When working with Typescript, you can declare an interface and split its definition across multiple files

Tips for dynamically loading a child component and passing data from the child component to the parent component

Encountering an issue connecting to the backend server for the

Assuming control value accessor - redirecting attention

The contents table remains fixed in the top right corner as you scroll

Upon successfully logging into the app, Azure AD B2C integrated with MSAL and Angular will automatically redirect users to the login page

What is the best way to create a method that waits for a POST request to complete?

At what point is the ngOnInit function invoked?

What is the best way to retrieve a {collection object} from a JavaScript map?

Utilizing indexing for list data presentation in Angular instead of relying on property names

What is the best way to track events in angular-meteor when a user logs in, logs out, or when there is a change in the user

Is it possible to streamline the process of importing all CommonModule modules during bootstrap with the new standalone feature in Angular?

Using Typescript and JSX to render a component that has been passed as an argument

Exploring Angular 2: Unlocking the Power of Directives within Components

What is the best way to display HTML in this particular situation?

Determine the type of a function to assign to the parent object's property