Real life Angular interview questions
No one is going to ask you what is Angular or the other 50 generic interview questions mentioned on all the other blogs.
I will level with you, in today's time no interviewer is going to ask you what is Angular. If they do, most probably it's their first time taking an interview. Or they are just mindlessly going to ask you questions from a preformulated list.
But seriously imagine this, you sit down for an interview and mention Angular in your resume. And the interviewer goes like, I better verify that he knows Angular for sure by asking him
- What is Angular?
- Why do we use Angular?
- What are its advantages?
- Difference between AngularJS and Angular?
That last one might be important if you are being interviewed for some junior developer role. Asking someone questions that are listed on most of the interview question list is of no point. For sure they would have read at least a few of those and know the answer. Questions asked should be about actually judging the knowledge, level of expertise, and experience.
So, here are some of the questions I personally like to ask in Angular interviews.
Let’s start off with something simple.
1. What is string interpolation in Angular?
I know, I know. But I said something simple.
String interpolation is just a mechanism that enables one-way data binding, from component (Model) to HTML (View). String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template.
Example:
<p> 2 + 2 = {{2+2}} </p>2. How can we format the values inside string interpolation?
The answer is Pipes. If you are familiar with Unix then you might be aware of pipes “|”. And how pipes are used to take input and transform it.
Similarly, pipes in Angular takes integers, strings, arrays, and date as input separated with | to be converted in the format as required. Pipes are simple functions you can use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
Example:
<p> {{ Hi there | lowercase}} </p> // hi there
<p> {{00.65765 | percent}} </p> // 65.765%3. How can you restrict navigation to some routes for a particular type of user?
For this use-case, the answer is Route Guards. Angular’s route guards are interfaces that can tell the router whether or not it should allow navigation to or from a requested route. The class that implements the guard interface contains the logic required to make the decision of whether navigation is allowed or not. Once the logic is run, it should return either a true or false to allow or prevent navigation.
There are five different types of guards and each of them is called in a particular sequence. The router’s behavior is modified differently depending on which guard is used. The guards are:
CanActivateCanActivateChildCanDeactivateCanLoadResolve
We won’t get too much into the details of each guard here but you can see the Angular docs for more.
4. What is an HTTP Interceptor?
Interceptor is just a fancy word for a function that receives requests/responses before they are processed/sent to the server. You should use interceptors if you want to pre-process many types of requests in one way. For example, you need to set the authorization header Bearer for all requests:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token') as string;
if (token) {
req = req.clone({
setHeaders: {
'Authorization': `Bearer ${token}`
}
});
}
return next.handle(req);
}
}5. How do you pass data from one component to another?
Well, this is an open-ended question, and as long as the interviewee talks about any one of the following it's good. If they mention multiple then great.
@Input and @Output decorators
In case that the components between which the interaction needs to happen have a Parent-Child relationship, then @Input can be used to pass data from parent to child and the opposite, @Output, can be used when you want to pass data from the child to the parent.
Check out the following link for more info and you can also find a working example here.
@ViewChild decorator (Parent to child only)
@ViewChild allows a parent component to access a child component's content. This is handy when we want to call a child component's function or reference its properties.
Check out the following link for more info
With a Service/Observable/RxJS
We can use the RxJS library to create a service. And inside this service, there is a BehaviorSubject that holds a current value. We define a variable to handle this data stream as an observable that will be used by other components. Lastly, we create the function that calls next on the BehaviorSubject to change its value.
The parent, child, and sibling components all receive the same data. We inject the said service in the components, then subscribe to the observable and start receiving the values.
Check out the following link for more info.
6. If you provide a service in two components‘ “providers” section of @Component decorator, how many instances of service shall get created?
The answer is 2. Since it is mentioned in the decorator section of both the components. Would have been one 1 if it was instead mentioned in the module.
7. Why do we need lazy loading of modules and how is it implemented?
Lazy loading of modules is needed to break the code into pieces. When downloading the app in the browser, it doesn’t load all of the application code. During the transition to the route with lazy loading, the module has to load the code into a browser.
Following is an example of using lazy loading modules:
{ path: ‘example’, loadChildren: ‘./example/example.module#ExampleModule’, component: PublicComponent }You can read more about it here.
8. What is Change Detection, how does Change Detection Mechanism work?
Change Detection is the process of synchronizing a model with a view. In Angular, the flow of information is unidirectional, even when using the ng Model to implement two-way binding, which is syntactic sugar on top of a unidirectional flow.
Change Detection Mechanism-moves only forward and never looks back, starting from the root (root) component to the last. This is the meaning of one-way data flow. The architecture of an Angular application is very simple — the tree of components. Each component points to a child, but the child does not point to a parent. One-way flow eliminates the need for a $digest loop.
9. What are some points to consider when optimizing an Angular application for performance?
There are many ways, some ideas include:
- AOT compilation
- Using optimized image formats like webp
- Bundling and uglifying the application
- Lazy loading Modules
- Separating dependencies and devDependencies
- Using OnPush and TrackBy
- Removing unnecessary 3rd party libraries and import statements
- Avoid computing values within the template.
Conclusion
As mentioned, questions asked should be about actually judging the knowledge, level of expertise, and experience. And hence the questions should depend upon the level of expertise of the interviewee and the position for which they are being interviewed.
You might choose to ask some or all of the above questions. And it's ok if someone doesn’t know the answer to all of them. But as an interviewer after listening to their answers, it sure helps to better determine if they will be a good fit for the role.
After all, you want much more than just a person who has good Angular skills? You need someone with professionalism, deep knowledge, good coding best practices, and a good team player.
If you enjoyed reading this, don’t forget the applause. 👏
Thank you.
