Angular Binding to a @Attribute on a constructor

Question

I've a component test

test.component.ts

public getParameters() {
    return 'test.parameter';
}

test.component.html

<other-comp attr.data-target-panels="{{getParameters()}}">
</other-comp>

On this other component I've this constructor:

export class OtherComponent {

    constructor(@Attribute('data-target-panels') public targetPanels: string
    ) {

    }
}

How can i build this other-comp and binding the parameters value?

I try using

<other-comp attr.data-target-panels="{{getParameters()}}">
</other-comp>

and

<other-comp [attr.data-target-panels]="{{getParameters()}}">
</other-comp>

but it doesn't work.

I'm using an existing component so it's not that easy to change this logic — JMarques
– JMarques, Commented Oct 29, 2019 at 9:20

Pardeep Jain · Accepted Answer · 2019-10-29 09:06:20Z

1

If you are using some component in another component and binding value attribute binding with method, then method should be in the component where you are using component for example -

Component A -

<other-comp [datatargetpanels]="{{getParameters()}}">
</other-comp>

export class AComponent {

    constructor() {
    }
    public getParameters() {
       return 'Some data';
    } 
}

and In otherComponent you need to use @Input to get value like this -

export class otherComponent {
   @Input('datatargetpanels) 'datatargetpanels': string;
}

answered Oct 29, 2019 at 9:06

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

3 Comments

JMarques Over a year ago

So, I need to use input here. But what's the "real" use of @Attributes? Use it when we've some static data?

Pardeep Jain Over a year ago

@JMarques yes, Sorry but I am not fully sure about usage of @attribute, will update here once I study about it.

bigAl Over a year ago

@attribute is for constant string literals only. You can't bind an object to it (normally because these aren't available when the constructor is running). You have to use @Input() and pick up the input in the ngOnInit() hook.

Collectives™ on Stack Overflow

Angular Binding to a @Attribute on a constructor

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related