How can I fire onload events for elements in html component in angular2

Question

So this is a 2 in 1 question.

First, I try to run a function when an element in the html components is loaded. I tried this in different ways, for example: <div [onload]="myFunction()"> this leads to the fact that the function is called several times, or rather. I guess this is not the way to go, but I'm not familiar enough to get it to work correctly. Also I would like to send the item as a parameter. For example, executing <div #myDiv (click)="myFunction(myDiv)"> does work, but obviously it does not start when the specified item loads. What is appropriate here, or am I obligated to make a selector request ...

The next question is to inject ElementRef inside the component. Now the docs tell me that using the nativeElement property is not quite right. I do not understand why. Linking to an element in your component is good, isn't it? Or am I watching the anxiety section? I ask because if my first question is not an option, I would like to use this link to an element to execute the query Select my desired onload run elements in the ngOnInit function of the OnInit class.

All information is welcome as angular2 docs are not completely complete. Thanks.

 export class HomeComponent implements OnInit { public categories: Category[]; public items: Item[]; constructor ( public element: ElementRef, private _categoryService: CategoryService, private _itemService: ItemService, private _router: Router ){} public registerDropdown(element:HTMLElement): void { console.log(element); } private getCategories(): void { this._categoryService.getAll().then((categories:Category[])=> this.categories = categories); } private getItems(): void { this._itemService.getAll().then((items:Item[])=> this.items = items); } public ngOnInit(): any { this.getCategories(); this.getItems(); } } 

 <div id="home"> <div id="search"> <div class="container"> <!-- div in question, the [ngModel] is a shot in the dark --> <div #myDiv class="dropdown category" [ngModel]="registerDropdown(myDiv)"> <span class="placeholder">Selecteer categorieën</span> <div class="the-drop"> <ul class="ul"> <li *ngFor="#category of categories"> <input type="checkbox" />{{category.long}} </li> </ul> </div> </div> </div> </div> </div> 

Answer 1

To download events, go to this article , starting with the beginners error # 2.

For general events, I found that EventEmitter is useful as a way for child components (native markup labels) to inform the parent component of the child events. In the child case, create a custom event (a class variable decorated with @Output() ) that will be .emit() whenever you define, and you can include the parameters of your EventEmitter specified by <data type> . Then the parent can process the custom event and access the parameters that you invested in $event . I am using Angular 2 quick launch file.

Baby Script:

 import {Component, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'my-child', templateUrl: 'app/my-child.component.html' }) export class MyChildComponent { @Output() childReadyEvent: EventEmitter<string> = new EventEmitter(); ngOnInit(){ //do any lines of code to init the child console.log("this executes second"); //then finally, this.childReadyEvent.emit("string from child"); } } 

Parental Markup:

 <h3>I'm the parent</h3> <my-child (childReadyEvent)="parentHandlingFcn($event)"></my-child> 

Parent Script:

 import {Component} from '@angular/core'; import {MyChildComponent} from './my-child.component'; @Component({ selector: 'my-parent', templateUrl: 'app/my-parent.component.html', directives: [MyChildComponent] }) export class MyParentComponent { ngOnInit(){ console.log("this executes first"); } parentHandlingFcn(receivedParam: string) { console.log("this executes third, with " + receivedParam); //string from child } } 

Note. You can also try EventEmitter<MyChildComponent> with .emit(this)

Answer 2

You can grab an instance of your div using Query , and then in ngOnInit run the registerDropdown method and pass to nativeElement from QueryList<ElementRef>

 export class HomeComponent implements OnInit{ public categories: Category[]; public items: Item[]; constructor ( public element: ElementRef, private _categoryService: CategoryService, private _itemService: ItemService, private _router: Router, @Query('myDiv') private elList: QueryList<ElementRef> ){} public registerDropdown(element:HTMLElement): void { console.log(element); } ... public ngOnInit(): any { this.getCategories(); this.getItems(); this.registerDropdown(elList.first.nativeElement); } } 

Answer 3

On further reading, it seems that implementing Spy is the best way to achieve this:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#spy