Angular.js 2: Access component of a directive

Question

Consider the following snippet of Parent's template:

<div *ngFor= "let event of events" >
     <event-thumbnail [theEvent] = 'event'></event-thumbnail>                    
</div>

Also event-thumbnail component definition is:

export class EventThumbnailComponent{
  intoroduceYourself(){
      console.log('I am X');
  }
}

In Parent component class, I want to iterate over all generated event-thumbnail elements, access the component beneath each, and call introduceYourself function on single one of them.

Possible duplicate of Child listens for parent event in Angular 2? i.e. allow your EventThumbnailComponent to listen to the parents event, that way you don't have to iterate the dom elements manually. — Zze
– Zze, Commented Mar 24, 2017 at 3:18

DRiFTy · Accepted Answer · 2017-03-24 03:30:24Z

3

You want to use the @ViewChildren() decorator to get a list of all instances of a specific component type within the view:

class ParentComponent implements AfterViewInit {
    @ViewChildren(EventThumbnailComponent)
    eventThumbnails: QueryList<EventThumbnailComponent>;

    ngAfterViewInit(): void {
        // Loop over your components and call the method on each one
        this.eventThumbnails.forEach(component => component.introduceYourself());

        // You can also subscribe to changes...
        this.eventThumbnails.changes.subscribe(r => {             
            // Do something when the QueryList changes
        });
    }
}

The eventThumbnails property will be updated whenever an instance of this component is added to or removed from the view. Notice the eventThumbnails is not set until ngAfterViewInit.

See the docs here for more information: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

answered Mar 24, 2017 at 3:30

DRiFTy

11.4k11 gold badges63 silver badges78 bronze badges

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

2 Comments

Hans Over a year ago

Worked like a charm!

Aluan Haddad Over a year ago

Perfect answer. So nothing against you, @DRiFTy, but isn't it sad that we have regressed to a level of dom manipulation abstraction far below that offered by jQuery.

Tyler Kirby · Accepted Answer · 2017-03-24 03:21:17Z

0

Your child component should have @Input() theEvent to get access to the event you are passing. Then you can use the following lifecycle hook:

ngOnInit(){
   introduceYourself(){
      console.log('I am X');
   }
}

answered Mar 24, 2017 at 3:21

Tyler Kirby

2631 silver badge10 bronze badges

Collectives™ on Stack Overflow

Angular.js 2: Access component of a directive

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related