How to Build & Launch Better Apps or Websites

Questions
Answers
Coaching
Angular Roadmap
Curated articles on building web, desktop or mobile apps or websites using Angular and / or Ionic Angular

How To Manipulate Angular DOM

Learn More

  1. ElementRef is a class, which consists of all native DOM elements. Using nativeElement object we can access all DOM elements in Angular.
  2. @Viewchild/@Viewchildren - Select child or all children elements from the DOM
  3. AfterViewInit - One of this Lifecycle hook is called after the Angular component initialized its view.
  4. Template reference - Reference to a particular DOM element.
  5. @Input() - Data binding to communicate component and directive.
  6. ngOnInit() - Initial Life-cycle hook, which is called after Angular created the component
  7. QueryList - Return type. It just a list of items. Angular updates QueryList while add or remove list items. It initialized only before the ngAfterViewInit() lifecycle hook.
  8. QueryList - Return type. It just a list of items. Angular updates QueryList while add or remove list items. It initialized only before the ngAfterViewInit() lifecycle hook.

Wha are the 8 LifeCycle Hooks in Angular

Learn More

  1. ngOnChanges()
  2. ngOnInit()
  3. ngDoCheck()
  4. ngAfterContentInit()
  5. ngAfterContentChecked()
  6. ngAfterViewInit()
  7. ngAfterViewChecked()
  8. ngonDestroy()
  • ChangeDetectionStrategy.OnPush - Use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to ChangeDetectionStrategy.Default (CheckAlways). Change detection can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.
  • ChangeDetectorRef.detectChanges()
  • ChangeDetectorRef.markForCheck()

What is the difference between Angular's markForCheck and detectChanges?

Change detectors can be detached either by using ChangeDetectorRef.detach() or by specifying ChangeDetectionStrategy.OnPush change detection strategy

ChangeDetectorRef.detectChanges() triggers change detection immediately, while ChangeDetectorRef.markForCheck() doesn't trigger change detection immediately

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit } from '@angular/core';
@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
  constructor(private cd: ChangeDetectorRef) {}}

ChangeDetectorRef.detectChanges()

ChangeDetectorRef.detectChanges() runs change detection immediately for the current component and all its children.

If it's critical that the view update synchronously before some other action, use detectChanges() because markForCheck() may not actually update your view in time

If you are changing the state in a component with more ancestors than descendants you may get a performance increase by using detectChanges() since you aren't unnecessarily running change detection on the component's ancestors.

ChangeDetectorRef.markForCheck()

ChangeDetectorRef.markForCheck() will not run change detection, but mark the current component and all its parents up to the root, as needing to run change detection.

Next time change detection runs anywhere, it will run also for those components which were marked.

The actual change detection for the component will happen either as part of the current or next Change Detection cycle and the parent component will be checked even if they had detached change detectors. 

If you want to reduce the number of times change detection is called use ChangeDetectorRef.markForCheck().

If you can't be sure that ChangeDetectorRef.detectChanges() isn't currently running change detection, use ChangeDetectorRef.markForCheck() because detectChanges() may error in this case.

 ↴ 

Subscribe to Angular UI Toolkit Newsletter

Download "The Angular UI Toolkit" or Get the latest posts delivered to your inbox ...

We respect your email privacy