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>
&lt;div *ngIf="posts | async else loading"&gt;
{{ posts | json }}

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.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

TypeScript interface signature for the onClick event in ReactJS

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

The official 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


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


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}>

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

<Game />,