Prime Vyapar

Tales from a Developer's Trenches

Advanced component configuration

Advanced component configuration - Angular - Prime Vyapar

Change Detection Strategy

The @Component decorator accepts a changeDetection option that controls the component's change detection mode. There are two change detection mode options.
In Angular, change detection is the process where the framework keeps track of changes in your application's data and updates the UI accordingly. By default, Angular uses a change detection strategy called
ChangeDetectionStrategy.Default is, unsurprisingly, the default strategy. In this mode, Angular checks whether the component's DOM needs an update whenever any activity may have occurred application-wide. Activities that trigger this checking include user interaction, network response, timers, and more.
ChangeDetectionStrategy.OnPush ,You might need to manually trigger change detection using the markForCheck() method when changes occur outside the component's inputs or events.
Overall, ChangeDetectionStrategy.OnPush is a powerful tool for optimizing Angular applications, but it's important to understand its implications and use it judiciously.

Code Snippet
Copy
                
                   
@NgModule({
  declarations: [.....],
  imports: [
    CommonModule,
    RouterModule,
    RouterModule.forChild(angularRoutes),
    FormsModule,
    SharedModule,
    HttpClientModule
  ],
  providers: [
    AngularService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AngularModule {

  public getComponenet() {
    return HomeComponent
  }
}

  • Manual Change Detection: You might need to manually trigger change detection using the markForCheck() method when changes occur outside the component's inputs or events. Immutable Data: It's recommended to use immutable data structures for inputs to avoid unintended change detection triggers.
  • Immutable Data: YoIt's recommended to use immutable data structures for inputs to avoid unintended change detection triggers.

Leave a Comment

This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.

Comments







With ❤️ Happy Coding





With ❤️ Happy Coding