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.
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.
Share Improve this question edited Jan 30, 2017 at 13:09 Mohamed Sahir asked Jan 30, 2017 at 13:03 Mohamed SahirMohamed Sahir 2,5439 gold badges49 silver badges78 bronze badges 1- @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 Commented Jan 30, 2017 at 13:07
3 Answers
Reset to default 2Use 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.ponent.html',
styleUrls: [ './app.ponent.css' ]
})
export class AppComponent implements AfterViewInit {
public ngAfterViewInit() {
// Do the logic here
}
}
Ref: https://angular.io/api/core/AfterViewInit
You can use angular's $window object:
$window.onload = function(e) {
//your magic here
}
Method 1
Using After View Init
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.ponent.html',
styleUrls: [ './app.ponent.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.ponent.html',
styleUrls: ['./app.ponent.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
}
}