How to get checkbox status whether checked or unchecked inside child component in Angular 5

I'm trying to render checkbox inside child component and display some text based upon checkbox checked or not.

Checkbox is checked or unchecked based upon input property value (checked) coming from parent component.

<input #checkInput type="checkbox" [checked]="checked" />

And display text active or disabled with below code.

<span>
    <ng-container *ngIf="checkInput.checked">Active</ng-container>
    <ng-container *ngIf="!checkInput.checked">Disabled</ng-container>
</span>

The parent component data is comping from API. So to simulate some delay, I wrapped inside setTimeout and render table inside parent component. The table row contains child component selector like below.

<tbody>
      <tr *ngFor="let org of organisations">
        <td width="120px"></td>
        <td></td>
        <td><app-child [checked]="org.active" checkedText="Active" uncheckedText="Disabled"></app-child></td>
        <td><a class="button secondary">Edit</a></td>
      </tr>
    </tbody>

My expectation is if 'checked' property is true, which is comping from parent component to child component, the text next to the checkbox inside child component should display 'active' instead of 'disabled'. However, it's not happening. It's displaying 'disabled' when loaded initially.

I've created a plunker to demonstrate the behavior. Can anyone please let me know why the text on initial load is disabled even though the checkbox is checked?

The link to plunker: https://plnkr.co/edit/mqmVYdbMF9qGduQYLYXa?p=preview

Thank you.