Angular 2 element attributes

Question

When we call a component in Angular 2 like so <my-component></my-component>. Is it possible to pass in attrs here so that they can be used within the component class?

example:

<my-component data-is-live="true"></my-component>

// class
export class MyComponent {
    constructor() {
        console.log($attrs);
    }
}

Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Dec 14 '16 at 18:02
Possible duplicate of [Angular 2 external inputs](http://stackoverflow.com/questions/33152914/angular-2-external-inputs) — Heretic Monkey, Dec 14 '16 at 18:13
http://stackoverflow.com/questions/39614451/angular-2-input-binding-does-not-work/39614592#39614592 — yurzui, Dec 14 '16 at 19:09

Robba · Accepted Answer · 2016-12-14T18:56:01.800

1

You can by simply specifying it as an input parameter:

@Component({
    selector: 'my-component',
    template: `
    <p>Is it live: {{isLive}} </p>
  `
})
export class MyComponent {
    @Input('is-live') isLive: string;

    ngOnInit() {
        console.debug(this.isLive);
    }
}

See this plunkr: http://plnkr.co/edit/2E6XcNW6cTOblyhBOEwI?p=preview

Note

You can't use an attribute starting with data-, Angular2 seems to ignore those.

edited Dec 14 '16 at 18:56

answered Dec 14 '16 at 18:05

Robba

7,684
12
48
76

How can i access that var in the constructor keeps returning undefined? – John williams Dec 14 '16 at 18:21
Don't access anything in the constructor. Instead use the ngOnInit() method as bindings aren't processed in the constructor yet. – Robba Dec 14 '16 at 18:23
Still cannot access that var in the ngOnInit method. – John williams Dec 14 '16 at 18:25
Give me a sec to get behind a computer, typing on a phone now. It could be that the 'data-' attribute prefix gives it special meaning. Please try it without it. – Robba Dec 14 '16 at 18:29
I've confirmed that you can't use an attribute starting with `data-`. I've updated (and properly formatted) the answer. – Robba Dec 14 '16 at 18:41
This returns undefined :S – John williams Dec 14 '16 at 18:51
Very odd, I've added a plunkr link that shows a working example. Hopefully this will allow you to find out why it doesn't work for you. – Robba Dec 14 '16 at 18:56
I can't see where you set that attribute in that example :S – John williams Dec 14 '16 at 18:59
Sorry, it's added in src/app.ts at line 11 – Robba Dec 14 '16 at 19:00
Ahh i see, i am currently building an app that uses stand alone components so i need to be able to add the attrs onto the the elements called in the main html file – John williams Dec 14 '16 at 19:03
Not entirely sure what you mean, but I'm happy you figured it out :) – Robba Dec 14 '16 at 19:04
Might have to go a different route by the looks of it – John williams Dec 14 '16 at 19:12

score -1 · Answer 2 · answered Dec 14 '16 at 17:55

-1

Yes, you can pass data between components (from parent to child for example) Here's a link with the different ways : official doc Hope that helps u :)

answered Dec 14 '16 at 17:55

Mourad Idrissi

3,455
5
17
29

That didn't answer my question, nowhere on that page illustrates how to do what i want to do. – John williams Dec 14 '16 at 18:01
@Johnwilliams the `@Input()` decorator is covered in that documentation, while the answer is not great (borderline just a link) it did in fact contain the solution you ended up accepting! – silentsod Dec 14 '16 at 18:13
Life is hard at times, i suggest you take it on the chin and just move on. – John williams Dec 14 '16 at 18:14
There are multiple solutions, I gave u the right link to choose the easy answer for u ;) You were going to make a little effort to find what @Robba wrote, m8 – Mourad Idrissi Dec 14 '16 at 20:19

Angular 2 element attributes

2 Answers2