title: @angular/elements how can I update my custom element at the end of a rest call?
body: <p>So I have this easy component:</p>
  
  <pre><code>import {
    Component,
    ViewEncapsulation,
    OnInit,
  } from '@angular/core';
  
  import { HttpClient } from '@angular/common/http';
  import { BehaviorSubject } from 'rxjs';
  
  @Component({
    selector: 'custom-element',
    template: '&lt;div&gt;{{ chuckText$ | async }}&lt;/div&gt;',
    styleUrls: ['./button.component.css'],
    encapsulation: ViewEncapsulation.Native
  })
  
  export class ButtonComponent implements OnInit {
  
    public chuckText$ = new BehaviorSubject&lt;string&gt;('');
  
    public constructor(
      private http: HttpClient
    ) {
    this.chuckText$.next('Default Text');
  }
  
    ngOnInit() {
      // nothing too fancy, just for testing purpose
      this.http.get('https://api.chucknorris.io/jokes/random')
        .subscribe((data: any) =&gt; {
          console.log(data.value);
          this.chuckText$.next(data.value);
        });
    }
  }
  </code></pre>
  
  <p>After building my component and adding it in a simple angularJS app, (I need to add a custom element to an old app) I get my element with the default text and the http.get result in the console, but my component has not been updated, as shown in the picture.</p>
  
  <p><a href="https://i.stack.imgur.com/HlrRp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HlrRp.png" alt="Like this"></a></p>
  
  <p>I'm clearly missing something that is just not obvious to me. Any idea on why the content does not update?
  As a reminder this feature is released but in an experimental state, maybe it's just that.</p>
  
  <p>For reference this is my app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule, Injector } from '@angular/core';
  import { createCustomElement } from '@angular/elements';
  import { HttpClientModule } from '@angular/common/http';
  import { ButtonComponent } from './button/button.component';
  
  @NgModule({
    declarations: [ButtonComponent],
    imports: [BrowserModule, HttpClientModule],
    entryComponents: [ButtonComponent],
  })
  export class AppModule {
  
    constructor(private injector: Injector) {
      const customElement = createCustomElement(ButtonComponent, { injector });
      customElements.define('custom-button', customElement);
    }
  
    ngDoBootstrap() { }
  }
  </code></pre>