You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Angular lifecycle: The Difference Between Afterviewinit and Aftercontentinit

Angular lifecycle: The Difference Between Afterviewinit and Aftercontentinit

. 3 min read

Learn how to answer one of the most frequently asked questions on angular

interviews: what is the difference between Afterviewinit and Aftercontentinit?

If you love angular, curious about it and want to use the technology as much as
you can in your applications — you might have used these two rarely used angular
lifecycle hooks.

ngAfterviewinit & ngAftercontentinit

‘Hooks’ are a way to get notified at a certain point or on a specific event.

A component has a lifecycle managed by Angular. Angular creates it, renders it,
creates and renders its children, checks it when its data-bound properties
change and destroys it before removing it from the DOM.
In this article, we
will only be focusing on ngAfterviewinit & ngAftercontentinit lifecycle hooks

ngAfterViewInit (Afterviewinit )

Afterviewinit Interface needs to implement for this lifecycle hook.

Respond after Angular initializes the component’s views and child views / the
belief that a directive is in.

Called once after the first ngAfterContentChecked().

well not recommended but there are specific use cases where we have to go with
some jquery plugins lets say we have date picker plugin and its initialize
something like

You should use angular date pipe this is only for demonstation
pur
pose

$("#datetime").datepicker();

now in the above example, this plugin will only work when it finds the element
with id=” DateTime” in short the HTML should render before we call this plugin

the question is where should we place this line of code, now we have two options
first is constructor and second is ngoninit: but this will not work in both the
cases because when the constructor and ngoninit is called it is not confirmed
that the view has loaded correctly
so as per our problem we want to get
notified at the earliest possible place where the view has loaded, and of
course, the ngafterviewinit is that place
so after the view has initialized
ngafterviewinit function will execute, and we can securely place our datepicker
initialization code here at this point we are guaranteed that we have the HTML
rendered in our DOM

Prerequisite

content projection

What is content projection? I am assuming you have basics of angular in that
case we have selector associated with every component right and when we render
it we use it like

<some-component></some-component>

and this will render the HTML of the component at a run time now suppose you
have a condition were want to pass some data between our component selector and
then render it in component

<div>
   Some html content from parent component
</div>

and to pass it

<some-component>
  <div>
     Some html content from parent component
  </div>
</some-component>

this can be achieved from the content projection to render this outer supplied
content in your component at a specific place we will use `<ng-content

`

//in some.component.html

<div>

//where ever you want to render the content projected from outside //will say 

</div>

this is a very high-level view of content projection

ngAfterContentInit (AfterContentinit )

AfterContentinit Interface needs to implement for this lifecycle hook

Respond after Angular initializes the component’s views and child views / the
view that a directive is in.

Called once after the first ngAfterContentChecked().

AfterContent hooks are similar to the AfterView hooks. The critical
difference is in the child component.

  • The AfterView hooks concern ViewChildren, the child components whose element
    tags appear within the component's template.
  • The AfterContent hooks concern ContentChildren, the child components that
    Angular projected into the component.

The following AfterContent hooks take action based on changing values in a
content child, which can only be reached by querying for them via the property
decorated with @ContentChild.

AfterContentComponent (class excerpts)

export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
  private prevHero = '';
  comment = '';

// Query for a CONTENT child of type `ChildComponent`
  
(ChildComponent) contentChild: ChildComponent;

ngAfterContentInit() {
    // contentChild is set after the content has been initialized
    this.logIt('AfterContentInit');
    this.doSomething();
  }

ngAfterContentChecked() {
    // contentChild is updated after the content has been checked
    if (this.prevHero === this.contentChild.hero) {
      this.logIt('AfterContentChecked (no change)');
    } else {
      this.prevHero = this.contentChild.hero;
      this.logIt('AfterContentChecked');
      this.doSomething();
    }
  }
  // ...
}

Thanks a lot for reading it your claps can inspire us to write more

A Passionate developer with 6 years of hands-on experience and a man behind
Smartcodehub Visit Smart Code Hub