Changing name attribute dynamically in Angular 6

Question

This question may seem simple. I have a loop using *ngFor="let i of Items", and inside that loop there is an anchor tag

<a name=""></a>

I want the value of the name attribute to be a hash of the variable i.

So, I created a function in the .ts file called

public getAnchor(i: Item): string

However, using

<a name="getAnchor(i)"></a>

does not call the function, but simply displays it as text. And if I use

<a name="{{ getAnchor(i) }}"></a>

, the page crashes. I am new to Angular development. Can someone guide me on how to properly implement this? :)

Answer 1

Answer №1

Back in Angular 2, the standard practice was to use the following syntax:

[attr.name]="getAnchor(i)"

I am uncertain if this approach is still applicable in Angular 6. Feel free to experiment with it.

Answer 2

Back in Angular 2, the standard practice was to use the following syntax:

[attr.name]="getAnchor(i)"

I am uncertain if this approach is still applicable in Angular 6. Feel free to experiment with it.

Answer 3

You have the option to connect attributes in the following ways

<a [name]="getAnchor(i)"></a>

or you can also use this method

<a [attr.name]="getAnchor(i)"></a>

Please note: I am unsure about the effectiveness of the second approach.

Answer 4

You have the option to connect attributes in the following ways

<a [name]="getAnchor(i)"></a>

or you can also use this method

<a [attr.name]="getAnchor(i)"></a>

Please note: I am unsure about the effectiveness of the second approach.