DEV Community

Alexander
Alexander

Posted on

12 questions to Angular developer test experience (not only knowledge)

Pay attention: all these questions don't assume accurate answers, which means the most important part to hear how the candidate did it or will do it if didn't have experience with it.

1. How to create an Angular project from scratch?

There are two suitable answers, first CLI and how to use it and second more interesting how to do it manually: root module, AppComponent, bootstrap (what usually it is in main.ts file), WebPack and etc.

2. How to pass data from one component to another (parent to child, child to parent, parent to twice nested child)?

Here is quite simply, something about @Input @Output, through the service and state management

3. How to manipulate DOM inside template from component class?

First of all, I want to hear about ViewChild/ViewChildren, but there is more than one method like Render2, inject link to "document"

4. You need to create a form with dynamic validation, two text fields "first" and "second" if you put in "first" number "second" should be validated by number, if you put in "first" string "second" should validate by a string, how will you do it?

Just explaining how to use ReactiveForms, for example:

  • take the links to inputs
  • update validation rules use the setValidators/setAsyncValidators
  • and call updateValueAndValidity

5. Can you tell at least three approaches to optimize the Angular app?

Something about trackBy, LazyLoading, PreloadingStrategy, ChangeDetectionStrategy

6. You need to change CSS styles according to the CSS class on the component. How you will do it?

for example:

<my-component class="red"></my-component> // text inside should be red
<my-component class="green"></my-component> // text inside should be green

:host(.red) {
  color: red;
}

:host(.green) {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

7. You need to assign the browser event to the whole component but work with this event inside a component, how will you do it?

This's all about HostListener, of course, we can come up with a couple more variants, but a good way for that is HostListener.

@HostListener('click', ['$event.target'])
  onClick(e) {
   // code ...
 }
Enter fullscreen mode Exit fullscreen mode

8. Can you describe the pros and cons of the OnPush strategy?

Π‘ons: need to keep in mind 'markForCheck' function, or use streams as much as possible also changes inside objects which we get as inputs don't detect

Pros: performance

9. Can you describe two situations, you need a global scope for service and you need a local scope for service?

@Injectable({providedIn: 'root'}) // global for app

---------------------------------------------------
@Injectable()

and 
@Component({
    providers: [...here inject the service with local scope]
})
Enter fullscreen mode Exit fullscreen mode

10. You need to preload some data before loading the route, how to solve this issue?

It is about Resolve

11. You need to add the token to all requests to a server, how to solve it?

It's about HttpInterceptor

12. Can you describe the cases when you need to create your own directives?

Here the candidate should explain and give some examples what for we need to create directives

  • to change/add behaviors of html element
  • patch some functionality in third part lib through the directive

Conclusion

These questions push candidates to think through the experience and allow us to get more information about their experience.

Top comments (2)

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

These are all good questions to keep in mind when vetting potential new teammates and for keeping your own knowledge in check. Bookmarking for later.

A few others might be:

  1. Describe the component lifecycle hooks. When would you use each? Answer: too long to write here but the docs are pretty clear. Maybe have them describe the order they execute in to the best of their ability too.
  2. How would you protect a route? Answer: something about canactivate and more on http interceptors like for #11 above.
  3. To add to #8 above, when does change detection happen for OnPush? Answer: the input reference has changed, the component or one of its children triggers an event handler, change detection is triggered manually, an observable linked to the template via the async pipe emits a new value (copypasta from this outstanding article on the topic).
Collapse
 
roundedbread profile image
Alexander

Thank you, I definitely will add them to my list