I am trying to call a function onload element, like a onload="function()" in Javascript.

So this is the code:

<div class="img-circle" [id]="pet.id" (load)="imgLoad( pet.id, pic )"></div>

Function is working fine, I try with (click) and works, but I try with (load), (onload), (loaded) and not working.

I am trying to call a function onload element, like a onload="function()" in Javascript.

So this is the code:

<div class="img-circle" [id]="pet.id" (load)="imgLoad( pet.id, pic )"></div>

Function is working fine, I try with (click) and works, but I try with (load), (onload), (loaded) and not working.

• javascript
• angular
• events
• dom-events
• event-binding

• 2 Why dont use it constructor or ngOnInit for load ? – Mohammad Daliri Commented May 13, 2018 at 5:45
• Do you want autofocus on div? – Mohammad Daliri Commented May 13, 2018 at 6:00
• But the this div is inside a ngFor and de values of params get the value when the ngFor load values – Guilherme de Mello Commented May 13, 2018 at 6:00
• Without autofocus, just div load – Guilherme de Mello Commented May 13, 2018 at 6:04

3 Answers 3

The proper way of replacing the onload function is by using ngOnInit. Just implement OnInit on the app ponent.

More info: https://angular.io/api/core/OnInit

Try HostListener.

@HostListener('document:click', ['$event'])
runThisMethod() {
  // your code goes here.
}

When mouse is clicked on document, then run this method. However for custom div, use directives + HostListener. For Ex:

<app-myComponent appChbgcolor> {{title}} </app-myComponent>
    @Directive({
        selector: '[appChbgcolor]'
    })

    export class ChangeBgColorDirective {
        constructor(private el: ElementRef, private renderer: Renderer) {
            this.ChangeBgColor('red');
        }

        ChangeBgColor(color: string) {
            this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
        }

        @HostListener('onload') onClick() {
           window.alert('Host Element Clicked');
        }
    }

In my function i trying to aplication a style in this div, the params was to set a background-image: url(base64);

So... I change to this, and works

[ngStyle]="{ 'background-image': 'url(' + pic + ') '}

Event-binding (load,onload,loaded) doesn't exists.