Angular is one of the first web frameworks that made a mark in the frontend development community. Initially, it came out as AngularJS in 2010 but because of the changing web, it was rewritten in 2016. Today, Angular is one of the most frontend frameworks in the world. It is a core part of the MEAN stack. In this article, we will list 50 Angular questions with answers.

Question 1:What is Angular?

Answer 1: Angular is an open-source web framework developed by Google.

Question 2: Which programming language is used in Angular?

Answer 2: Angular is a TypeScript-based framework, so the programming language used in it is TypeScript.

Question 3: What is TypeScript?

Answer 3: TypeScript is a programming language that is a superset of TypeScript. It is developed by Microsoft.

Question 4: Differentiate between TypeScript and JavaScript?

Answer 4: Following are the differences between TypeScript and JavaScript:

• TypeScript is object-oriented while Javascript is a scripting language.
• The interface is present in TypeScript but not in JavaScript.
• TypeScript supports static typing while JavaScript doesn’t.

Question 5: Is Angular similar to AngularJS?

Answer 5: Both of them are frontend frameworks but they are different.

Question 6:  What is AngularJS and how is it different from Angular?

Answer 6: AngularJS is a JavaScript-based web framework. Angular 2 or above versions are simply known as Angular. Angular is a rewritten TypeScript-based version of AngularJS.

Question 7: Which is the latest major version of Angular?

Answer 7: Angular 12 

Question 8:  What are the benefits of using Angular [Angular interview questions]?

Answer 8: Benefits of using Angular are:

• It provides everything you need.
• It provides two-way data binding.
• It uses TypeScript that provides powerful features.
• It is backed by Google
• It provides better productivity.

Question 9: What are the components in Angular?

Answer 9: A component is the most basic part of the UI created using Angular. They are the building blocks of an Angular application.

Question 10:  What is an Angular component made up of?

Answer 10: An Angular component is made up of:

• HTML template
• TypeScript class
• CSS selector

Question 11: How to create a component in Angular?

Answer 11: A component in Angular can be created by:

• using the Angular CLI.
• creating a file with .component.ts extension.

Question 12: Which command is used to create an Angular component?

Answer 12: “ng generate component” followed by component name will create an Angular component.

Question 13: What is the meaning of the component template?

Answer 13:  A component template is an HTML file that describes how the component will render in the browser.

Question 14: What is the use of @Component decorator?

Answer 14:  The @Component decorator is used to define the information of the component. It takes a metadata object that holds this information.

Question 15: What is the use of the CSS selector in the @Component decorator?

Answer 15: The CSS selector is used to define the place where the component will be instantiated. For example, if the component name is “demo.component.ts” and the selector is “app-demo”, then this means, the “demo.component.ts” will be instantiated every time “app-demo” appears in the template.

Question 16: How to define templates in Angular?

Answer 16: Templates can be defined in two ways:

• Directly within the component, meaning, giving HTML code as the value of “template”.
• By giving reference to an external file.

Question 17: What are lifecycle methods [Angular interview questions and answers]?

Answer 17:   In Angular, every component has different stages and these stages are known as lifecycle methods.

Question 18: Name all the lifecycle methods in Angular?

Answer 18:  There are 8 lifecycle methods in Angular.

• ngOnChanges()
• ngOnInit()
• ngDoCheck()
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• ngOnDestroy()

Question 19: Which is the best place to write code for fetching data?

Answer 19:  ngOnInit() is recommended for fetching data. 

Question 20: What is the difference between constructor and ngOnInit()?

Answer 20:  Following are the differences between constructor and ngOnInit().

• Constructor is the default method of the TypeScript class while ngOnInit is an Angular lifecycle method. 
• Constructor is used for initialization while ngOnInit is used to define Angular bindings.

Question 21: Which lifecycle method is called when the value of a data-bound property is changed?

Answer 21: ngOnChanges() method is called.

Question 22:  What are directives in Angular?

Answer 22: Angular provides classes to add additional features to elements. Such classes are in-built as well as they can be created manually. These classes are called directives.

Question 23: Is component a directive?

Answer 23: Yes, the components in Angular are directives.

Question 24: What are the different types of directives in Angular?

Answer 24: Different types of directives in Angular are:

• Component
• Attribute directives
• Structural directives

Question 25: What is the difference between attribute and structural directives?

Answer 25: Both of these directives are used to attach DOM elements but the attribute directives are used to change the behavior or appearance of an element while structural directives are used to change the DOM layout.

Question 26: Name a few built-in attribute directives.

Answer 26: NgClass, NgStyle, and NgModel

Question 27: Which directive is used to add two-way data binding to a form element?

Answer 27: NgModel is used to add two-way data binding to a form element.

Question 28: What are the commonly used built-in structural directives?

Answer 28: NgIf, NgFor, and NgSwitch

Question 29: Describe the purpose of NgIf and NgFor.

Answer 29: Suppose we have a list of students. We need to display the names along with their exam results. If the student has scored more than 70%, we have to display “You passed” and if not, then we have to display “You failed”. In such cases, we can use NgIf to display the message according to the score of the student. 

Similarly, to display the entire list of students, we can use NgFor.

Question 30: Which command is used to create a directive?

Answer 30: ng generate directive followed by the directive name is used to create a directive in Angular.

Question 31: What are services in Angular?

Answer 31: Services in Angular are the objects that are instantiated in the application only once during its lifetime. ‘

Question 32: What are the uses of Angular?

Answer 32: Services are used for:

• Sharing data
• Implement application logic
• External Interaction

Question 33: Explain a scenario where services should be used. [Angular interview questions and answers]

Answer 33: Suppose we have an array that contains the details such as employee name, age, id, and gender. This array is present in the “EmployeeComponent” and this component displays the names of all the employees. Now, we have another component named “EmployeeDetailsComponent” and we need to display all the details of the array in it. How can we do it? We can simply copy-paste the array in “EmployeeDetailsComponent” and use it. It will work fine but it violates the programming principles such as “Do Not Repeat Yourself”. So here we can create a service to share data among these components.

Question 34: What is the use of @Injectable decorator?

Answer 34: The @Injectable decorator is used to supply the metadata that will allow Angular to inject the metadata into a component. This metadata will be injected as a dependency. 

Others

Question 35: What is the purpose of NgModule?

Answer 35: As an Angular application grows, it becomes more and more complex. More and more declarations are made. The purpose of NgModule is to group each declaration together. 

Question 36: How to group components, directives, and pipes together in NgModule?

Answer 36: The declarations property is used to group components, directives, and pipes together in NgModules.

Question 37: What are the differences between observables and promises?

Answer 37: Following are the differences between observables and promises.

• Observables emit multiple values while promises emit only a single value.
• Observables can be canceled while promises cannot.
• Observables can be asynchronous and synchronous while promises are asynchronous.

Question 38: What is text interpolation?

Answer 38: Angular allows incorporating of string in HTML template dynamically. This technique is known as text interpolation.

Question 39: Suppose we have a button and it is disabled. We need to enable this button after 5 seconds. How to do this?

Answer 39: This can be done by using property binding. We can create a property, say, “enableButton” and initialize it to “false”. Then, using the setTimeout() method, we can change its value to “true” after 5 seconds. In the end, we have to bind this property in the template with the “disabled” property. 

Question 40: Suppose, we have a component named “EmployeeComponent”. This component has a child component named “EmployeeDetailsComponent”. We need to pass an array that has the details to the “EmployeeDetailsComponent” from the “EmployeeComponent”. How to do this?

Answer 40: First, we need to pass the data from the “EmployeeComponent” to the “EmployeeDetailsComponent”. Then, to capture the data in the “EmployeeDetailsComponent”, we can use the @Input decorator. 

Question 41: How to pass data from a child component to a parent component in Angular?

Answer 41: To pass data from the child to parent component in Angular, we can use @ViewChild decorator.

Question 42: What is a pipe? How to build custom pipes in Angular?

Answer 42: A pipe in Angular is used to transform some input data into the desired output. Custom pipes can be built using the @Pipe decorator. 

Question 43: How to communicate with backend services in Angular?

Answer 43: Angular provides HttpClient service to communicate with the backend. 

Question 44: What are the advantages of HttpClient?

Answer 44: The advantages of HttpClient are:

• It offers testability features.
• It can intercept requests and responses,
• It supports observable APIS.

Question 45: Name the types of compilation in Angular.

Answer 45: Just-in-Time (JIT) and Ahead-of-Time (AOT)

Question 46: What is the major difference between JIT and AOT?

Answer 46: The major difference between JIT and AOT is that JIT compiles the app at runtime in the browser while AOT compiles the app at build time. 

Question 47: Give the advantages of AOT. [Angular JS Scenario based interview questions]

Answer 47: The advantages of AOT are:

• It offers faster rendering.
• Download size is smaller.
• It provides better security.

Question 48: Explain lazy loading.

Answer 48: Lazy loading is a feature in which Angular, instead of downloading the web pages in big bundles, downloads them in chunks. Thus increasing the performance. 

Question 49: What is Angular material?

Answer 49: It is a user-interface library that provides high quality, versatile, and frictionless components that can be used with Angular to create interactive websites. 

Question 50: What is Angular bootstrapping? Name its types.

Answer 50: Angular bootstrapping allows developers to create a way in which the Angular application will start. There are two types of Angular bootstrapping – manual and automatic.