Angular Element has ExpressionChangedAfterItHasBeenCheckedError when change input value

Question

I download Angular Element demo from https://angular.io/guide/elements#example-a-popup-service

and use custom element in html and give a message but it will show expressionchangedafterithasbeencheckederror in console.

I just changed AppComponet html code like this

@Component({
  selector: 'app-root',
  template: `
    <input #input value="Message">
    <popup-element [message]="'aa'"></popup-element>
  `,
})
export class AppComponent implements OnInit{

  constructor(injector: Injector, public popup: PopupService) {
    // Convert `PopupComponent` to a custom element.
    const PopupElement = createCustomElement(PopupComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
}

And it will show "aa" message in page and there is a error in browser console.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: undefined'. Current value: 'null: aa'.
    at viewDebugError (core.js:25716)
    at expressionChangedAfterItHasBeenCheckedError (core.js:25693)
    at checkBindingNoChanges (core.js:25868)
    at checkNoChangesNodeInline (core.js:30037)
    at checkNoChangesNode (core.js:30010)
    at debugCheckNoChangesNode (core.js:30917)
    at debugCheckRenderNodeFn (core.js:30849)
    at Object.eval [as updateRenderer] (PopupComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:30834)
    at checkNoChangesView (core.js:29845)

How can I solve this problem?