interpolation not working properly while dynamically change value

🐞 bug report

interpolation throws error while dynamically change value

Description

I have tried to update value dynamically using interpolation but it throws below error:

I have created components like below :

import { Component, ViewEncapsulation} from '@angular/core';
 
@Component({
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 encapsulation: ViewEncapsulation.None
})
 
export class AppComponent {
 constructor() { }
 public rtedataSource: string = "<p>One</p>";
 checkRTE(){
 this.rtedataSource ="asffsdffsf"
 }
}

Error:

🔬 Minimal Reproduction

1. Download below sample: Angular_issue.zip

2. give below commands

npm i

ng serve

🔥 Exception or Error

But if i use changeDetection: ChangeDetectionStrategy.OnPush, it doesn’t throws any error and interpolation working fine.

Reference code:

import { Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef} from'@angular/core';
 
@Component({
selector:'app-root',
templateUrl:'app.component.html',
styleUrls: ['app.component.css'],
encapsulation:ViewEncapsulation.None,
changeDetection:ChangeDetectionStrategy.OnPush
})
 
exportclassAppComponent {
constructor(privateref:ChangeDetectorRef) {
ref.detach();
setInterval(() => { this.ref.detectChanges(); }, 100);
 }
publicrtedataSource:string="<p>One</p>";
checkRTE(){
this.rtedataSource="asffsdffsf"
 }
}

🌍 Your Environment

Angular Version:

Angular CLI: 7.0.3
Node: 8.9.3
OS: win32 x64
Angular:
...

 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.3
@angular-devkit/core         7.0.3
@angular-devkit/schematics   7.0.3
@schematics/angular          7.0.3
@schematics/update           0.10.3
rxjs                         6.3.3
typescript                   3.1.3

Anything else relevant?

I just want to know why this happening?

[mlc-mlapis]

@kumaresan-subramani Then I think it is the issue for https://github.com/syncfusion/ej2-angular-ui-components/issues.

[mlc-mlapis]

@kumaresan-subramani OK, from that simple demo it was not clear. If you know the reason why didn’t you explain it? And what do you expect now? Do you think that somebody would analyze how <ejs-tooltip> component is working, which timeline is exactly using and so on?

If it is a real Angular problem then demonstrate it using the pure code without using any libs.