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](http://stackoverflow.com/questions/37677122/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, Mar 24 '17 at 03:18
In particular, look at [this answer](http://stackoverflow.com/a/40143881/6680611) in the duplicate target. — cartant, Mar 24 '17 at 03:22

score 3 · Accepted Answer · answered Mar 24 '17 at 03:30

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

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. — Aluan Haddad, Mar 24 '17 at 05:39

score 0 · Answer 2 · answered Mar 24 '17 at 03:21

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 '17 at 03:21

Tyler Kirby

253
1
10

Angular.js 2: Access component of a directive

2 Answers2