12 questions to Angular developer test experience (not only knowledge)
Tags: angular, frontend, interview, webdev
Published: 2021-03-11 09:52:21

**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:

```jsx
<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;
}
```

## 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.

```jsx
@HostListener('click', ['$event.target'])
  onClick(e) {
   // code ...
 }
```

## 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?

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

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

and 
@Component({
	providers: [...here inject the service with local scope]
})
```

## 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.