<!-- app.component.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div *ngIf="title">
<h1>This is a {{title}}</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti eum quam consectetur
corporis excepturi, velit delectus inventore tenetur sapiente dolor dignissimos numquam
consequatur at? Excepturi voluptate accusantium, ut voluptatibus culpa recusandae ratione
harum rerum!
</p>
</div>
</body>
</html>
// app.component.ts
import { Component, NgZone } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cwh-todo-list';
constructor(private ngZone: NgZone) {
console.log("Constructor called");
// Use NgZone to run code outside Angular's zone
this.ngZone.runOutsideAngular(() => {
setTimeout(() => {
// This code will run outside Angular's zone
console.log("Timeout callback called");
this.ngZone.run(() => {
// Inside this callback, Angular's change detection is enabled
this.title = "Changed Title";
});
}, 2000);
});
}
}
I expected the setTimeout to get executed but the web page shows ” This is a {{title}} ” instead of changing from ” This is a cwh-todo-list ” to ” This is a Changed Title “.`