Angular Interview Questions

If you are here reading this post, you might be preparing for interviews. I promise that I'll jot down the most frequently asked interview questions and answers based on my interview experience as of 2021. 

Hope this article will help you in cracking your dream job.

1.What is Angular?

Angular is an open-source web application framework that uses TypeScript programming language. Developed by Google.

Framework: Predefined structure of something.

2. What is AngularJS?

Angular is an open-source web application framework that uses JavaScript programming language. Developed by Google. It is an older version of Angular.

3. What are the differences between AngularJS and Angular?

AngularJS :

• AngularJS is actually the first version of Angular (Angular1).
• AngularJS framework uses JavaScript language.
• It is not supported on mobile devices.
• It is slower than Angular.
• It doesn’t support dependency injection.
• It follows MVC architecture.
• Managing huge applications is difficult.

Angular :

• From version 2(Angular 2), it is simply called Angular.
• AngularJS framework uses TypeScript language.
• It is supported on mobile devices.
• It is faster than AngularJS.
• It supports dependency injection.
• It follows Modular architecture.
• Managing huge applications is easier.

4. What is the latest version of Angular?

Angular 11 is the latest version released in Nov 2020.

They may ask you the latest version of angular you've worked on and its features.

5. What are the life cycle hooks of angular?

Constructor − This is called whenever an object is created for a class. Whereas, in angular, we won't create objects for class.

ngOnChanges − This is called every time there is a change in @Input coming to the component.

ngOnInit − This is called whenever a component has been initialized.

ngDoCheck − This is for the detection and to act on changes that Angular can't or won't detect on its own. It allows us to implement our own change detection algorithm for the given component.

ngAfterContentInit − This is called in response after Angular projects external content into the component's view.

ngAfterContentChecked − This is called in response after Angular checks the content projected into the component.

ngAfterViewInit − This is called in response after Angular initializes the component's views and child views.

ngAfterViewChecked − This is called in response after Angular checks the component's views and child views.

ngOnDestroy − This is the cleanup phase just before Angular destroys the directive/component.

6. What are the differences between constructor and ngOnInit?

• Constructor is related to class while initializes objects of that class. ngOnInit is related to angular.
• Constructor is used in instantiating dependencies. ngOnInit place to put the code that we need to execute at very first as soon as the class is instantiated.

7. What are the building blocks of angular?

1. Components
2. Modules
3. Directives
4. Decorators
5. Pipes
6. Data Binding
7. Templates
8. Metadata
9. Services
10. Dependency Injection

Mostly, they may ask these topics separately.

Components : 

It is basically a class in Angular. An angular will have at least one component.

It encapsulates logic file, style file, and Html file. When we render a page this would a part of a webpage. 

Example : 

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

}

A component class will be decorated with a @Component decorator. It takes parameters like selector, templateUrl, styleUrls, styles, template, etc.

A selector is a custom tag of the component. Whenever we want to render our component we can simply mention this selector in an HTML.

<my-app></my-app>

A templateUrl is the URL of a template file for an Angular component. 

A template is an inline HTML code. When Html code is less, we can template parameter rather than templateUrl.

  template: '<h1>Hello World!</h1>'

A styleUrls is one or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component

A style is one or more inline CSS stylesheets to use in this component.

  styles: ['h1{color : red;}']

Modules :

It is basically a class in Angular. An angular will have at least one module.

It encapsulates related components, directives, pipes, services, which together perform some tasks. In other words, an angular app is a group of modules.

 Example :