Angular (2.0+) provides a beautiful way of communicating with components using @Input and @Output decorators. And, it also provides different lifecycle hooks to perform various tasks at different stages of the component. “ngOnChanges” is also one such lifecycle hooks that let you listen for any property changes and do custom actions or execute business logic. Below is the basic syntax of “ngOnChanges”
x
@Component({ selector: 'app-component', template: '<div>Say Hello to {{ name }}</div>'})class MyComponent implements OnChanges { // TODO(issue/24571): remove '!'. @Input() name!: number; ngOnChanges(changes: SimpleChanges) { }}The problems with “ngOnChanges” are:
Angular (2.0+) provides a beautiful way of communicating with components using @Input and @Output decorators. And, it also provides different lifecycle hooks to perform various tasks at different stages of the component. “ngOnChanges” is also one such lifecycle hooks that let you listen for any property changes and do custom actions or execute business logic. Below is the basic syntax of “ngOnChanges”
TypeScript
x
1
@Component({
2
selector: ‘app-component’,
3
template: ‘<div>Say Hello to {{ name }}</div>’
4
})
5
class MyComponent implements OnChanges {
6
// TODO(issue/24571): remove ‘!’.
7
@Input() name!: number;
8
9
ngOnChanges(changes: SimpleChanges) {
10
11
}
12
}
The problems with “ngOnChanges” are: […]