Angular 7 Interview Questions

A list of top frequently asked Angular 7 Interview Questions and answers are given below.

1) What is Angular 7? How is it different from AngularJS?

Angular7 is the latest and recent version of Angular. AngularJS was the first version of Angular which is also known as Angular 1.0.

Angular7 is the complete rewrite of the Angular1.0. It supports two-way data binding, and some other features like ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6 etc.

2) What is Angular framework?

Angular is a TypeScript-based open-source web framework and a platform. It is used to build web/ mobile and desktop applications.

Main features of this framework are: Declarative templates, dependency injection, end to end tooling etc. These features make web development easy in Angular.

3) What is the difference between AngularJS and Angular?

Angular is a complete rewrite of AngularJS. It is a component-based framework in which an application is a tree of individual components.

Difference between AngularJS and Angular:

AngularJS	Angular
AngularJS is based on MVC architecture.	Angular is based on Service/Controller.
It uses JavaScript to build the application.	It uses TypeScript to build the application.
It follows controller concept.	It follows Component based UI approach.
It is not a mobile-friendly framework.	It is a mobile friendly framework.
It is very difficult to create a SEO friendly application in AngularJS.	By using Angular, you can easily create a SEO friendly application.

4) What is the difference between structural directive and attribute directive in Angular 7?

Structural directives are used to alter the DOM layout by removing and adding DOM elements. These directives are far better in changing the structure of the view. Examples of Structural directives are NgFor and Nglf.

Attribute Directives are used as characteristics of elements. For example, a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.

5) What is the difference among "declarations", "providers" and "import" in NgModule?

Difference among declarations", "providers" and "import" in NgModule:

declarations are used to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
providers are used to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency. A special case for providers is lazy loaded modules that get their own child injector. Providers of a lazy loaded module are only provided to this lazy loaded module by default (not the whole application as it is with other modules).
import makes the exported declarations of other modules available in the current module.

6) What are the key components of Angular?

Key components of Angular:

Components: Components are the basic building blocks of angular application and used to control HTML views.

Modules: Modules are the set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" and used to perform a single task.

Templates: Templates are used to represent the views of an Angular application.

Services: It is used to create components which can be shared across the entire application.

Metadata: This can be used to add more data to an Angular class.

7) Explain the Architecture overview of Angular.

Angular is the most popular web development framework for developing mobile and web applications. It uses cross platform mobile development called IONIC that's why it is not limited to web apps only.

There are 7 main building blocks of an Angular application:

Component
Templates
Metadata
Data Binding
Directives
Services
Dependency Injection

The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. Angular app is defined by a set of NgModules and it always has at least a root module that enables bootstrapping, and many more feature modules.

Components define Template views
Components use services

The NgModules make developers to organize an application into connected blocks of functionality.

The NgModule properties for the minimum "AppModule" generated by the CLI are as follows:

Declarations: Use to declare the application components.
Imports: Every application must import BrowserModule to run the app in a browser.
Providers: There are none to start.
Bootstrap: This is a root AppComponent that Angular creates and inserts into the index.html host web page.

8) How would you update Angular 6 to Angular 7?

You can update Angular 6 to Angular 7 by using the following command:

9) What is the UrlSegment Interface in Angular 7?

In Angular 7, the UrlSegment interface represents a single URL segment, constructor, properties and methods like this:

class UrlSegment {
constructor(path: string, parameters: {...})
path: string
parameters: {...}
toString(): string
}

The UrlSegment is a part of a URL between the two slashes and it contains a path and matrix parameters associated with the segment.

10) What is Do Bootstrap (ng Do Bootstrap) In Angular 7?

The ng Do Bootstrap is a new life-cycle hook added in Angular 7 and Do Bootstrap is an interface.

Example

//ng Do Bootstrap - Life-Cycle Hook Interface
classApp Module implements Do Bootstrap {
ng Do Bootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent);
  }
}

11) What are directives in Angular7?

In Angular7, directives are used to add behavior to an existing DOM element or an existing component instance.

For Example

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'green';
    }
}

Now this directive extends HTML element behavior with a green background as below:

Highlight me!

12) What are components in Angular7?

Components are the basic building blocks of an Angular app formed like a tree structure. Components are subset of directives but unlike directives, components always have a template and only one component can be instantiated per an element in a template.

For example:

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{title}}</h1>
      <div>Learn Angular6 with examples</div>
   </div> `,
})
export class AppComponent {
   title: string = 'Welcome to Angular world';
}

13) What is the difference between component and directive?

A component (@component) is a directive with a template. Some major difference between components and directives are:

Component	Directive
If you register a component, you have to use @Component meta-data annotation	If you register a directive, you have to use @Directive meta-data annotation
Components are used to break up the application into smaller components.	Directives are used to design re-usable components.
Components are used to create UI widgets.	Directives are used to add behavior to an existing DOM element.
Only one component can be present per DOM element.	Many directives can be used per DOM element.
@View decorator or templateurl/template are mandatory	Directives don't use View.

14) What is a template in Angular7?

A template is a HTML view where you display your data by binding controls to Angular component's properties. You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property.

For example:

Using inline template with template syntax

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: '
      <div>
         <h1>{{title}}</h1>
         <div>Learn Angular</div>
      </div>
   '
})
export class AppComponent {
   title: string = 'Hello World';
}

Using separate template file such as app.component.html

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})
export class AppComponent {
   title: string = 'Hello World';
}

15) What is a module?

Modules are the logical boundaries in the application. An application is divided into separate modules to separate the functionalities of the application.

For example: app.module.ts root module declared with @NgModule decorator

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Here, the NgModule decorator has three options:

The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application.
The declarations option is used to define components in the respective module.
The bootstrap option tells Angular which Component to bootstrap in the application.

16) What are the new features added in Angular7?

Following is a list of new features added in Angular7:

Angular7 displays an elegant look in the new update.
It provides virtual scrolling by using the scrolling package.
It facilitates you to use drag and drop property by using the @angular/cdk/drag-drop module.
In Angular7, libraries make changes to itself automatically with the updated version of the Material design.
Angular7 provides better error handling for @Output if property is not initialized.
Angular7 provides added support for Node v10.

Some more Angular7 features are:

Angular Console: It is a downloadable console to start and run Angular projects on your local machine.

@angular/fire: It is a latest update on npm, and has its first stable release for Angular7.

NativeScript: It facilitates you to make a single project that builds for both web and installed mobile.

StackBlitz: StackBlitz 2.0 is now released and includes the Angular Language Service and more features like tabbed editing.