// 20 Essential Angular Interview Questions

Angular and AngularJS are two entirely different and unrelated frontend frameworks, although both are built by Google and have the same prefix in their name. AngularJS was released in 2010 and it was eventually replaced by Angular. Angular 7 is the latest version of Angular.

Angular is a TypeScript based development platform whereas AngularJS is a JavaScript-based platform.

Angular 7 comes with powerful methods to easily build frontend applications. These features include support for two-way data binding, Angular Elements, CLI workspaces, Extended library support, Animation improvements, RxJS, etc.

Note: Very common Angular 7 interview questions.

Angular consists of a few core components that help you build applications:

1. Components - Components are the building blocks of an Angular application. Each component consists of a Typescript class containing a decorator, an HTML template, and styles.
2. Templates - Templates are a form of HTML tags that are present in components. These templates are used to declare how a component must be rendered.
3. Modules - Modules are also considered as building blocks in Angular. However, modules have a specific set of capabilities or workflow.
4. Services - Services could be broadly defined as a class with a well-defined purpose.
5. Metadata - Metadata is used to add data to a class. This data helps Angular understand how a class needs to be processed.

Note: Important Angular 7 interview questions.

Ahead-Of-Time compilation or AOT compilation is one of the two compilation methods that Angular provides. In this particular type of compilation, the application complies during build time.

Bowsers do not understand components and templates, and hence Angular apps are compiled in the browser. The compiled code is then displayed; this type of compilation is called Ahead-Of-Time compilation.

Advantages of AOT:

1. Increased Security
2. Faster Rendering
3. Easier Error handling

AOT is also a common Angular 7 interview question as is often asked with an example.

Observables are used to pass messages between various parts of your Angular application. Observables are declarative and are used to deliver multiple values of any type.

Observables are commonly used in asynchronous programming and to handle multiple values.

Note: Commonly asked Angular 7 interview questions.

Angular TestBed is a primary API that is used to write unit tests for Angular Applications and Libraries.

It is commonly used as it allows you to test behavior and change detections that depend on the Angular Framework.

TestBed is commonly used and hence you are very likely to get an Angular 7 interview question based on it.

The Router event allows you to track the entire lifecycle of the route. This is done by emitting navigation events through the router.event property.

The sequence is as follows:

1. NavigationStart
2. RouteConfigLoadStart
3. RouteConfigLoadEnd
4. RoutesRecognized
5. GuardsCheckStart
6. ChildActivationStart
7. ActivationStart
8. GuardsCheckEnd
9. ResolveStart
10. ResolveEnd
11. ActivationEnd
12. ChildActivationEnd
13. NavigationEnd
14. NavigationCancel
15. NavigationError
16. Scroll

Note: Commonly asked Angular 7 interview question.

During login, the credentials are sent to an authentication API. This API is present on the server and validation is done there. After a JWT (JSON Web Token) is returned, this token has information about the user and is used to identify the user. This process is called Authentication.

After authentication, users are given various levels of permissions/ access. Some users may have access to all the pages and some might not. This process of restricting the content is called Authorization.

Activated routes provide access to information about the route associated with a component. These components are loaded in an outlet.

This method is used to traverse the RouterState tree and get information from the nodes.

• Declarations - Declarations are utilized to create directives for the current modules available. The selectors of the various directives are only matched with their HTML if they are declared or imported.
• Providers - Provides services and values known to the dependency injection. Since they are injected into other services or directives, providers must be added to the root scope.
• Import - Import is used to make declarations of other modules available in the current module.

UrlSegement can be used to add interfaces in Angular 7. The UrlSegment interface represents the constructor, URL segment, Properties, and methods that are present in the UrlSegment class.

Structural Directives - Structural directives are used to re-shape the DOM and HTML layout. All the modifications in the layout are done by manipulating the HTML elements.

Attribute Directives - Attribute directives have their own style and layout. This is possible because it is a single component, however, they do support multiple directives as well.

Two-way binding is a common Angular 7 interview question. It is a process in Angular that gives components a way to share data between the component class and its template. In essence, if the data is changed in one place it will automatically change the data at the other end.

Two-way binding is commonly used to listen for events and update values between parent and child components.

This is yet another very common Angular 7 interview question.

Directives or Attribute directives are used to add/ change the appearance & behavior of DOM elements and components.

The below code showcases how directives are used. This is a common Angular 7 interview question.

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[Highlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'red';
    }
}

Now, this code would display a red background when highlighted.

<p Highlight>Highlight me!</p>

Metadata is used to decorate a class and hence it is always represented in the decorator. This helps the class exhibit the desired behavior.

The below code is an example of using metadata in Class decorators:

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

@Component({
  selector: 'new-component',
  template: '<div>Class decorator</div>',
})
export class NewComponent {
  constructor() {
    console.log('This is a new component!');
  }
}

@NgModule({
  imports: [],
  declarations: [],
})
export class NewModule {
  constructor() {
    console.log('This is a new Module');
  }
}

Note: Commonly asked Angular 7 interview questions.

Dependency injection is a design pattern that allows a class to request dependencies from external sources.

Angular provides dependencies to classes upon instantiation. Although these dependencies are needed for the class to function, adding dependencies increases flexibility and modularity.

Note: Important Angular 7 interview questions.

Pipes receive input data and transform it into the desired output so that it can be displayed properly.

Example - In the below code we have used the DatePipe to display a date in the desired format.

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

@Component({
  selector: 'app-birthday',
  template: `<p>Date is {{ birthday | date }}</p>`
})
export class BirthdayComponent {
  day = new Date(2021, 7, 21); // July 7, 2021
}

String interpolation in Angular refers to the special type of syntax that makes use of template expressions to display component data.

Such template variables are enclosed within double curly braces {{}}. The expressions that are executed by JavaScript are added inside the curly braces and the output is embedded into HTML.

Note: Commonly asked Angular 7 interview question.

Components in an Angular application have a lifecycle right from its initiation. These are a set of processes that a component goes through from its initiation until it is destroyed. We use Angular hooks to tap into these phases and trigger changes in the life cycle.

These are the various lifecycle steps involved

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy()

Note: Commonly asked Angular 7 interview questions.

Router.navigate specifies a root URL through relative navigation.

This function can be used to navigate in Angular

toDetails(article: any) {
   this.router.navigate(['/blog/', blogId]);
} 

Note: Commonly asked Angular 7 interview questions.

The MVVM architecture is used to remove the tight coupling between components. MVVM architecture consists of three components:

1. Model - Models contain the structure of the application which includes the logic and the data behind an application. The logic includes the data sources, classes, and repositories.
2. View - View is the visual layer consisting of the HTML template of the application. Furthermore, it sends user actions to the ViewModel.
3. ViewModel - ViewModel acts as a bridge between both the View and Model. The view is data-bound to the ViewModel and hence any change made to the view is reflected on the ViewModel. The ViewModel subsequently changes the data inside the Model.

Note: Commonly asked Angular 7 interview question.