@Component({ 
  selector: 'hello-message', 
  templateUrl: './hello.message.component.html'
}) 

export class HelloMessage { 
  name = 'Nano'; 
}

<p>
  Hello {{ name }}!
</p>

import React from 'react';

export default class HelloMessage extends React.PureComponent { 
  render() { 
    return ( 
      <p> 
        Hello {this.props.name} 
      </p> 
    ); 
  } 
} 

@Component({
  selector: "hello-message",
  templateUrl: "./hello.message.component.html"
})

export class HelloMessage {
  model = new User("Nano");
}

<div>
  <label>Name:</label>
  <input [(ngModel)]="model.name" />
  <p>Hello {{ model.name }}!</p>
</div>

export default class HelloMessage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { name: "Nano" };
  }

  handleInputChange = e => {
    this.setState({ name: e.currentTarget.value });
  };

  render() {
    const { name } = this.state;
    return (
      <div>
        <label>Name:</label>
        <input value={name} onChange={this.handleInputChange} />
        <p>Hello {name}!</p>
      </div>
    );
  }
}