Top Angular Interview Questions and Answers
CTA
Angular is one of the most popular JavaScript single-page application frameworks. It is also quite vast and difficult to navigate. Even more difficult is to get answers to the interview questions on Angular as it is very confusing to know which parts of the Angular framework you should familiarize yourself with. Hence, we have come up with a compilation of Angular interview questions and answers that are asked in these interviews most frequently
1 What are Components in Angular?
Components are the basic building blocks of the user interface in an Angular application. Every component is associated with a template and is a subset of directives. An Angular application typically consists of a root component, which is the AppComponent, that then branches out into other components creating a hierarchy.
How are Angular expressions different from JavaScript expressions?
The first and perhaps, the biggest difference is that Angular expressions allow us to write JavaScript in HTML which is not the case when it comes to JavaScript expressions.
Next, Angular expressions are evaluated against a local scope object whereas JavaScript expressions are against a global window object. Lets understand that better with an example :
Consider the following component named test:
As one can see that Angular expression is used to display the message property of a component. Since we are using Angular expressions, in the present template, we cannot access a property outside of its local scope, which in this case is TestComponent.
This proves that Angular expressions are always evaluated based on the scope object rather than the global object.
The next difference is how Angular expressions handle null and undefined.
Consider the following JavaScript example:
If you run the above code, you will see undefined displayed on the screen. Although it’s not ideal to leave any property undefined, the user does not need to see this.
Now consider the following Angular example:
If you render the above component, you will not see undefined being displayed on the screen.
Next, in Angular expressions, one cannot use loops, conditionals and exceptions.
The difference which makes Angular expressions quite beneficial is the use of pipes. Angular uses pipes(called filters in AngularJS), which can be used to format data before displaying it. Let’s see one predefined pipe in action:
In the above code, we have used a predefined pipe called lowercase, which transforms all the letters in lowercase. Therefore, if you render the above component, you will see “hello world” being displayed. In contrast, JavaScript does not have the concept of pipes.
1 What is Pipe transform Interface in Angular?
An interface used by pipes to accomplish a transformation. Angular calls the transform function with the value of a binding as the first argument and any arguments as the second parameter in list form. This interface is used to implement custom pipes.
Example:
2 What exactly is a parameterized pipe?
To fine-tune its output, a pipe can receive any number of optional parameters. The parameterized pipe is constructed by first stating the pipe name followed by a colon (:) and then the parameter value. If the pipe supports several arguments, use colons to separate the values.
Example: Lets look at a birthday with a certain format (dd/MM/yyyy):
Class Decorators are the highest-level decorators that determine the purpose of the classes. They indicate to Angular that a specific class is a component or module. And the decorator enables us to declare this effect without having to write any code within the class.
Example:
It is a component or module in which no code in the class is required to tell Angular. We only need to design it, and Angular will take care of the rest.
Method decorators, as the name implies, are used to add functionality to the methods defined within our class.
Example: @HostListener, is a good example of method decorators.
The @HostListener decorator is used before the onHostClick () method in the above example code.
These are the second most popular types of decorators. They enable us to enhance some of the properties in our classes. We can certainly understand why we utilize any certain class property by using a property decorator.
There are many property decorators available for example @Input(), @Output, @ReadOnly(), @Override()
Example:
The input binding would be sent via a component property binding: