How to trigger the function after DOM markup is loaded in angular style application except onload

Question

I need to show a Simple current time with an angular based-application.So have tried a demo.

In the body onload function execute the piece of function.

<body onload="startTime()">
function startTime() {

}

i don't want in javascript function to execute. Onload is a javascript predefined function,In angular is there any directive like ngload ? need to write the custom directive for this or

Nginit is behave like similar or can i call the function inside run block means what are the difference from angular run vs javascript onload?

if using ng-init,need an controllor,without controller run block is there to execute the angular function. is there any other options available to show on the Dom loaded.

@AshBringer, i don't have the controller , just have module inside the module without controller only custom directive works, how ng-init will work ? Without custom directive or run block is there any other options available in angular — Mohamed Sahir
– Mohamed Sahir, Commented Jan 30, 2017 at 13:07

StangSpree · Accepted Answer · 2018-01-30 18:54:29Z

2

Use ngAfterViewInit from angular API.

You can use ngAfterViewInit as a life cycle hook by importing it from angular/core.

Typical implementation of it would look like following:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {
   public ngAfterViewInit() {
     // Do the logic here
   }
}

Ref: https://angular.io/api/core/AfterViewInit

edited Jan 30, 2018 at 18:54

answered Jan 29, 2018 at 21:32

StangSpree

4391 gold badge5 silver badges24 bronze badges

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

1 Comment

dave2118 Over a year ago

This was the only way I was able to get this to work, thank you! Using length kept returning 0, while a collection was loaded.

Alexandre Nascimento · Accepted Answer · 2017-01-30 13:14:24Z

1

You can use angular's $window object:

$window.onload = function(e) {
  //your magic here
}

answered Jan 30, 2017 at 13:14

Alexandre Nascimento

1831 gold badge5 silver badges20 bronze badges

1 Comment

Mohamed Sahir Over a year ago

is there any angular directive like javascript onload? else use inject the window service and call onload

Surya R Praveen · Accepted Answer · 2023-04-26 13:55:13Z

Method 1

Using After View Init

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, AfterViewInit  {
   public ngAfterViewInit() {
     // Do the logic here
   }
}

Method 2

Using Router NavigationEnd

NavigationEND is an event trigger when navigation ends successfully, after the event is unsubscribed the page is full loaded, subscribe and execute the function.

import {  Component,  OnInit} from '@angular/core';
import {  Router, NavigationEnd,} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit{

  constructor(    private router: Router,  ) {  }

  ngOnInit(): void {
    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        takeUntil(this.unsubscribe$)
      )
      .subscribe((event) => {
        this.siteTrafficData();
      });
  }

  siteTrafficData() {
         // Do the logic here
  }
}

Collectives™ on Stack Overflow

How to trigger the function after DOM markup is loaded in angular style application except onload

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related