I went on an interview today for a senior dev position at a large bank by world trade center today, and it was a great experience. They had an open floor plan and everyone had a super-wide monitor which looked pretty awesome. There were stocks shows playing on tv's hanging from the ceiling and people were relatively dressed up, but the people who interviewed me seemed nice. I probably won't get an offer because the one interviewer asked me TWO relatively simple Angular questions that kind of stumped me. I don't think I would have really liked it there for long but big thanks to this person for pointing out these gaps in my knowledge.
OnPush
I think this can be a more difficult question if it is worded in a clever way. For example, he interviewer says, "so, have you used many change detection strategies in Angular?" as if to imply that there are a vast array of these strategies to choose from. But we can see from the documentation here that there is only Default and OnPush. Default just means that change detection will always run. OnPush allows you to deactivate the change detection until you explicitly trigger it (by calling this.cd.detectChanges(); ) or by changing an @Input of the component. The point of this is basically to make your app feel lighter and not run into the "too many watchers" issues that was common with large AngularJS projects.
AfterContentChecked
Of course all of the front-end frameworks have the concept of components now, the building blocks blocks of your application, and they all have their own lifecycle hooks, functions that the framework promises to call at certain times so that you can insert your own code to be run at that time. The question I was asked was "What's the difference between ngAfterViewInit(), ngAfterContentChecked(), and ngAfterViewChecked()". You can always check the official Angular docs lifecycle hooks page here to see if they've changed at all, but below I've tried to explain each one briefly so if you are asked in an interview you an just say what it is, and correctly, and move on to the next question. Also, feel free to leave a comment if you think these could be improved!
(Angular Lifecycle Hooks)
ngOnChanges() - First hook to be called when Angular sets and resets input properties. Receives a SimpleChanges object of current and previous property values.
ngOnInit() - Called once when component starts up after ngOnChanges and initial values have been set.
ngDoCheck() - Allows you to act on changes the Angular won't / can't detect.
ngAfterContentInit() - Called after displays content content into the component's view / the view that a directive is in.
ngAfterContentChecked() - Called after Angular change detector checks the content projected into the directive/component.
ngAfterViewInit() - Called after Angular checks and initializes the component's views and child views / the view that a directive is in.
ngAfterViewChecked() - Called after Angular checks the component's views and child views / the view that a directive is in.
ngOnDestroy() - Called just before Angular destroys the directive/component. Unsubscribe Observables here and detach event handlers to avoid memory leaks.
ngOnInit() - Called once when component starts up after ngOnChanges and initial values have been set.
ngDoCheck() - Allows you to act on changes the Angular won't / can't detect.
ngAfterContentInit() - Called after displays content content into the component's view / the view that a directive is in.
ngAfterContentChecked() - Called after Angular change detector checks the content projected into the directive/component.
ngAfterViewInit() - Called after Angular checks and initializes the component's views and child views / the view that a directive is in.
ngAfterViewChecked() - Called after Angular checks the component's views and child views / the view that a directive is in.
ngOnDestroy() - Called just before Angular destroys the directive/component. Unsubscribe Observables here and detach event handlers to avoid memory leaks.
Other Takeaways From The Interview
One thing I realized is that if you are going for a developer role using a specific front-end framework then you need to have the lifecycle hooks down pat! That means that you should be able to speak about what each one does, when it is called, and the order they are called relative to each other. Also, if you are going for a job using Angular don't get the lifecycle confused with those from React or another front-end framework! He also asked me a question that basically boiled down to "use an object / map instead of an array for better time complexity" (and actually, I this would be a good candidate for it's own blog post...). Welp, that's all for now, but I hope you've been able to learn something here and hope to see you back around here soon. ✌Happy coding! ✌
RSS Feed