Angular web component does not work as it should

Question

I've created a simple Angular 6 project due to I want to create a web component. (GitHub URL). You can clone the repo with git clone https://github.com/CSantosM/angular-elements-demo.git.

I have followed this tutorial and I have create the web component with success. However, when I test this web component in another application with JavaScript it doesn't work completelly.

The problem is the *ngIf="display" of the button.component.ts html github code:

<div  *ngIf="display">
 <h3>Hello {{_userName}}</h3>
 <div class="button-row">
   <button mat-icon-button color="primary" (click)="toggleBlue()">
   <mat-icon aria-label="Example icon-button with a heart icon" 
      matTooltip="Like">favorite</mat-icon>
   </button>
 </div>
 <mat-icon *ngIf="blue">alarm</mat-icon>
</div>

Inserting the web component in my JavaScript app located here and changing the input web component dynamically, the button doesn't work as it should.

My index.html is (github code):

<div id="main" style="text-align: center;">
    <h1>Insert your name</h1>
    <form onsubmit="sendName(); return false" style="padding: 80px; margin: auto">
        <p>
            <label>User:</label>
            <input type="text" id="user" value="User1" required>
        </p>
        <p>
            <input type="submit" value="JOIN">
        </p>
    </form>
</div>

<custom-button name=""></custom-button>

<!-- WebComponent JS -->
<script type='application/javascript' src='custom-button.js'></script>
<!-- WebComponent JS -->

<script>

    function sendName() {

        var user = document.getElementById('user').value;
        var ov = document.querySelector('custom-button');
        ov.userName = user;
    }

</script>

When I press the button of this app, the sendName() function is called and the userName input changes, the angular variable named display changes to true and the web component can be seen. (github code)

If I don't include the display variable, the web component works as it should.

Here you can see the behavior:

Is a known error by Angular? Why with a simple *ngIf, the web component doesn't work fine? How can resolve this?

Thanks in advance.

Answer 1

I published the issue in angular github repo and the workaround they provide me is here