ChangeDetectionStrategy

Change Detection is responsible to update the UI when it detect data change. There are two kinds of ChangeDetectionStrategy

• OnPush
• Default

When we use OnPush, the components will only rely on inputs. If those input references do not change, Angular 2 will skip running change detection on that component.

Our app now has two kinds of components: smart and dumb components. So we can use OnPush for all of our dumb components, which are ChannelListComponent, ChatAreaDialogComponent, ChatAreaBottomComponent.

1. Add changeDetection: ChangeDetectionStrategy.OnPush in @Component({...}),
2. Add import { ChangeDetectionStrategy } from '@angular/core'; on the top for each file.

Learn more

If you want to have a deep understanding of ChangeDetectionStrategy, you can read Angular 2 Change Detection Explained.

Run the live example for this part.