Using pipe in combination with *ngIf and Observables

Attempting to show a template until the posts Observable is ready:

Attempting to show a template until the posts Observable is ready:

    <ng-template #loading>
        <div>Loading...</div>
    </ng-template>
&lt;div *ngIf="posts | async else loading"&gt;
{{ posts | json }}
&lt;/div&gt;  

When the posts Observable is set, the posts | json renders like this:

    { "_isScalar": false, "source": { "_isScalar": true, "value": [ { "title": "Simulating HTTP Requsts", "content": "This is off the hook!!" } ] }, "operator": { "delay": 3000, "scheduler": { "actions": [], "active": false } } }

How do we get it to render just the value that we would normally get via posts | async?

I tried posts | async | json but that renders null first and then 3 seconds later it renders the value.

This is the stackblitz.

TypeScript interface signature for the onClick event in ReactJS

The official&nbsp;<a href="https://reactjs.org/tutorial/tutorial.html" target="_blank">reactjs.org</a>&nbsp;website contains an excellent introductory tutorial.

The official reactjs.org website contains an excellent introductory tutorial.

The tutorial snippets are written in JavaScript and I am trying to convert these to TypeScript.

I have managed to get the code working but have a question about using interfaces.

What should the correct "function signature" be for the onClick callback.

Is there a way to replace the 'any' keyword in the IProps_Square interface with an explicit function signature ?

Any help or suggestions would be really appreciated, many thanks Russell

index.html

<!DOCTYPE html>
<html lang="en">
<body>
<div id="reactjs-tutorial"></div>
</body>
</html> 

index.tsx

import * as React from 'react';   
import * as ReactDOM from 'react-dom'; 

interface IProps_Square {
message: string,
onClick: any,
}

class Square extends React.Component < IProps_Square > {
render() {
return (
<button onClick={this.props.onClick}>
{this.props.message}
</button>
);
}
}

class Game extends React.Component {
render() {
return (
<Square
message = { 'click this' }
onClick = { () => alert('hello') }
/>
);
}
}

ReactDOM.render(
<Game />,
document.getElementById('reactjs-tutorial')
);