How to get reference of component itself and defined variable in Angular 2

Question

How to get a reference of the component "Cart" itself instead of using querySelector() in class Cart?

Also, I want to know is there anyway to access the variable #i from class Cart?

@Component(
    selector: '[cart]',
    templateUrl: 'cart.html')
class Cart  {

    handling(){
         querySelector("div[cart]");
    }
}

<div cart>
   <ul>
      <li *ngFor="#i of items.values">{{i}}</li>
   </ul>
</div>

Can you explain what are you trying to do. You can inject ElementRef into your cart constructor constructor(private _element:ElementRef) to get the Angular2 element wrapper. nativeElement property has to underlying dom — Chandermani
– Chandermani, Commented Apr 6, 2016 at 2:59
Why would you want to access #i, it's a value from items which is available in Cart anyway. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 6, 2016 at 3:20
Hi Chandermani. Thanks for your helpful hint, it solve my first problem. — Roger Chan
– Roger Chan, Commented Apr 6, 2016 at 3:26
Hi Günter Zöchbauer. Not only #i. In fact, I want to know anyway can access variables defined in a template? — Roger Chan
– Roger Chan, Commented Apr 6, 2016 at 3:29

Günter Zöchbauer · Accepted Answer · 2016-05-02 11:20:44Z

6

@Component(
    selector: '[cart]',
    templateUrl: 'cart.html')
class Cart  implements AfterViewInit {
    // as mentioned by @Chandermani
    ElementRef _element;
    Cart(this._element);

    @ViewChildren('myLi') ElementRef myLis;
    // or for a single element or just the first one
    // @ViewChild('myLi') ElementRef myLi;

    ngAfterViewInit() {
      // not initialized before `ngAfterViewInit()`
      print(myLis);
    }

    handling(){
         querySelector("div[cart]");
    }
}

<div cart>
   <ul>
      <li #myLi *ngFor="let i of items.values">{{i}}</li>
   </ul>
</div>

edited May 2, 2016 at 11:20

answered Apr 6, 2016 at 4:26

Günter Zöchbauer

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

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

4 Comments

Roger Chan Over a year ago

Thanks Günter! It is very helpful.

Cuel Over a year ago

What exactly does "Cart(this._element);" do here?

Günter Zöchbauer Over a year ago

@Cuel it's like constructor(private _element:ElementRef) in TS

Cuel Over a year ago

Ah. Lots of nifty stuff :)

Collectives™ on Stack Overflow

How to get reference of component itself and defined variable in Angular 2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related