Angular Interview Questions

Angular is one of the most promising languages. Rich in feature set, this technology is worth to work hard for. Below is the list of best Angular interview questions and answers. These questions have been divided as per levels - beginner, intermediate and advanced.

1 .
What is ViewEncapsulation ?
ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not. There are three ways to do this in Angular: 
 
Emulated : styles from other HTML spread to the component.
 
Native : styles from other HTML do not spread to the component.
 
None : styles defined in a component are visible to all components.
2 .
What is RouterOutlet ?
RouterOutlet is a substitution for templates rendering the components. In other words, it represents or renders the components on a template at a particular location.
3 .
What is the purpose of using package.json in the angular project ?
With the existence of package.json, it will be easy to manage the dependencies of the project. If we are using typescript in the angular project then we can mention the typescript package and version of typescript in package.json.
4 .
Write some code for a basic class in TypeScript with a constructor and a method.
Here‘s a simple class that is created with a greeting message which can be retrieved with the greet() function.
class Greeter {
  greeting: string;
     constructor(message: string) {
        this.greeting = message;
      }
       greet() {
         return "Hello, " + this.greeting;
       }
     }

  let greeter = new Greeter("world");
5 .
What is the main difference between constructor and ngOnInit ?
The constructor is a feature of the class itself, not Angular. The main difference is that Angular will launch ngOnInit after it has finished configuring the component. Meaning, it is a signal through which the @Input() and other banding properties and decorated properties are available in ngOnInit, but are not defined within the constructor by design.
6 .
What are HTTP Interceptors ?
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. 
7 .
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.
8 .
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.
 
Exemple for using lazy loading modules:
{ path: ‘example’, loadChildren: ‘./example/example.module#ExampleModule’, component: PublicComponent },
9 .
How to prevent security threads in Angular App? What are all the ways we could secure our App ?
Some of them are :

* Avoid using/injecting dynamic HTML content to your component.

* If using external HTML which is coming from database or somewhere outside the application, sanitize it before using.

* Try not to put external urls in the application unless it is trusted. Avoid url re-direction unless it is trusted.

* Consider using AOT compilation or offline compilation.

* Try to prevent XSRF attack by restricting the api and use of the app for known or secure environment/browsers.
10 .
How to optimize Angular app ?
* Consider lazy loading instead of fully bundled app if the app size is more.

* Make sure that any 3rd party library, which is not used, is removed from the application.

* Have all dependencies and dev-dependencies are clearly separated.

* Make sure the application doesn’t have un-necessary import statements.

* Make sure the application is bundled, uglified, and tree shaking is done.

* Consider AOT compilation.