Angular LifeCycles: NgDoCheck

Here we go with another one, Lets talk about ngDoCheck. Relatively simple one but very powerful. Like always! Lets start with the set up

Simple set up of a parent component that using a input child component I created and we can see in the browser its just a simple input with a placeholder saying “Enter Something”.

Now we are going to go the the TypeScript of the parent component and implement the doCheck.

Inside of the ngDoCheck we simply just console.log out “there has been changes” to see just the insane amount of times this thing triggers when you do almost anything.

Here all we did was click on then off the input bar and it triggers multiple times.

Now one thing to really notice is we don’t have the input child component hooked up to the parent component. Meaning when we are typing something in the input bar, no data is being sent to the parent component.

The variable “input” in the child component is never being sent up to the parent buuuuttt when we type something into the input field. We will still see ngDoCheck trigger. So any child component that get the smallest change will still trigger the ngDoCheck on the parent. so you can have 5 child components all doing small changes just triggering the doCheck like crazy. Powerful stuff but as my Uncle ben once said. With great power comes great bragging rights! or something like that, anyways. Component design can become very complex. One thing to avoid is not to over engineer. Simplicity is golden! Really ask yourself do you really need this lifeCycle and if you do find a way to make it add value. Don’t just shove it in as a quick fix to something and say you'll really fix it legit later because we all know your not!

Hope that’s was helpful!

Connect with me on linkedIn: www.linkedin.com/in/joshua-markasky47

follow me on Twitter: https://twitter.com/MarkaskyJ

Checkout my YouTube channel: https://www.youtube.com/channel/UCgRkJcniRghYpSpzKQlEYvQ