@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>
);
}
}