https://github.com/aershov24/angular-interview-questions

🔴 Angular Interview Questions and Answers (+ Ivy Update for Angular 9) for your next Angular Developer Interview
https://github.com/aershov24/angular-interview-questions

angular angular2 angular4 angular5 angular6 angular7 angular8 angular9 interview-practice interview-preparation interview-questions

Last synced: about 2 months ago
JSON representation

🔴 Angular Interview Questions and Answers (+ Ivy Update for Angular 9) for your next Angular Developer Interview

Host: GitHub
URL: https://github.com/aershov24/angular-interview-questions
Owner: aershov24
Created: 2020-01-21T07:16:22.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2020-01-24T03:40:59.000Z (over 5 years ago)
Last Synced: 2025-04-03T03:06:19.666Z (3 months ago)
Topics: angular, angular2, angular4, angular5, angular6, angular7, angular8, angular9, interview-practice, interview-preparation, interview-questions
Homepage: https://www.fullstack.cafe/Angular
Size: 22.5 KB
Stars: 5
Watchers: 2
Forks: 7
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Angular Interview Questions and Answers

The Angular 9 RC is out, what an exciting time to be Angular developer. Ivy is here, Ivy is now the default rendering engine in Angular. Follow along and check latest Angular X Interview Questions and Answers with latest Ivy updates for 2020.

> You could also find all the answers here 👉 https://www.fullstack.cafe/Angular.

## Q1: What is Routing Guard in Angular? ⭐

**Answer:**

Angular’s route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.

🔗 **Source:** [medium.com](https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3)

## Q2: What is a module, and what does it contain? ⭐

**Answer:**

An Angular module is set of Angular basic building blocks like component, directives, services etc. An app can have more than one module.

A module can be created using `@NgModule` decorator.

```js
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/40073941/whats-the-difference-between-an-angular-component-and-module)

## Q3: What are pipes? Give me an example. ⭐

**Answer:**

A **pipe** takes in data as input and transforms it to a desired output. You can chain pipes together in potentially useful combinations. You can write your own custom pipes. Angular comes with a stock of pipes such as `DatePipe`, `UpperCasePipe`, `LowerCasePipe`, `CurrencyPipe`, and `PercentPipe`.

Consider:
```html

The hero's birthday is {{ birthday | date }}

```
In this page, you'll use pipes to transform a component's birthday property into a human-friendly date.

🔗 **Source:** [angular.io](https://angular.io/guide/pipes)

## Q4: What are the differences between AngularJS (angular 1.x) and Angular (Angular 2.x and beyond)? ⭐⭐

**Answer:**

Angular and AngularJS is basically a different framework with the same name.

Angular is more ready for the current state of web standards and the future state of the web (ES6\7, immutiablity, components, shadow DOM, service workers, mobile compatibilty, modules, typescript and so on and so on... )

Angular killed many main features in AngularJS like - controllers, $scope, directives (replaced with `@component` annotations), the module definition, and much more, even simple things like ng-repeat has not left the same as it was.

Also:
1. They added an angular `cli`.
2. Your angular code is written in ES6 Typescript and it compiles at runtime to Javascript in the browser.
3. You bind to your HTML similarly like how you would if in an Angular 1 directive. So variable like $scope and $rootScope have been deprecated.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/34114593/angular-vs-angular-2)

## Q5: What is a component? Why would you use it? ⭐⭐

**Answer:**

*Components* are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the `declarations` field of that NgModule.

```js
@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
name: string = 'World';
}
```

🔗 **Source:** [angular.io](https://angular.io/api/core/Component)

## Q6: What is the minimum definition of a component? ⭐⭐

**Answer:**

The absolute minimal configuration for a `@Component` in Angular is a template. Both template properties are set to optional because you have to define either `template` or `templateUrl`.

When you don't define them, you will get an exception like this:
```sh
No template specified for component 'ComponentName'
```
A selector property is not required, as you can also use your components in a route.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/46338698/minimum-definition-of-a-component-angular-4)

## Q7: What's the difference between an Angular component and module? ⭐⭐

**Answer:**

*Components* control views (html). They also communicate with other components and services to bring functionality to your app.

*Modules* consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/40073941/whats-the-difference-between-an-angular-component-and-module)

## Q8: What is a service, and when will you use it? ⭐⭐

**Answer:**

*Angular services* are singleton objects which get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.

The *separation of concerns* is the main reason why Angular services came into existence. An Angular service is a stateless object and provides some very useful functions.

🔗 **Source:** [dzone.com](https://dzone.com/articles/what-is-a-service-in-angular-js-why-to-use-it)

## Q9: What is the equivalent of ngShow and ngHide in Angular? ⭐⭐

**Answer:**

Just bind to the `hidden` property

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/35578083)

## Q10: You have an HTML response I want to display. How do I do that? ⭐⭐

**Answer:**

The correct syntax is the following:
```html

```
Working in `5.2.6`

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)

## Q11: How can I select an element in a component template? ⭐⭐

**Answer:**

You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor:

```js
constructor(myElement: ElementRef) { ... }
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)

## Q12: What is the equivalent of "ngShow" and "ngHide" in Angular? ⭐⭐

**Answer:**

Just bind to the hidden property:

```js
[hidden]="!myVar"
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)

## Q13: What is the difference between *ngIf vs [hidden]? ⭐⭐

**Answer:**

`*ngIf` effectively removes its content from the DOM while `[hidden]` modifies the `display` property and only instructs the browser to not show the content but the DOM still contains it.

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)

## Q14: What is the difference between "@Component" and "@Directive" in Angular? ⭐⭐

**Answer:**

* **Directives** add behaviour to an existing DOM element or an existing component instance.
* **A component**, rather than adding/modifying behaviour, actually creates its own view (hierarchy of DOM elements) with attached behaviour.

Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements.

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)

## Q15: What does this line do? ⭐⭐

**Questions Details:**

```js
@HostBinding('[class.valid]') isValid;
```

**Answer:**

`@HostBinding` lets you set properties on the element or component that hosts the directive.

The code applies the css class `valid` to whatever is using this directive conditionally based on the value of isValid.

🔗 **Source:** [alligator.io](https://alligator.io/angular/hostbinding-hostlistener/)

## Q16: How would you protect a component being activated through the router? ⭐⭐

**Answer:**

The Angular router ships with a feature called guards. These provide us with ways to control the flow of our application. We can stop a user from visitng certain routes, stop a user from leaving routes, and more. The overall process for protecting Angular routes:

* Create a guard service: `ng g guard auth`
* Create `canActivate()` or `canActivateChild()` methods
* Use the guard when defining routes

```js
// import the newly created AuthGuard
const routes: Routes = [
{
path: 'account',
canActivate: [AuthGuard]
}
];
```

Some other available guards:

* `CanActivate`: Check if a user has access
* `CanActivateChild`: Check if a user has access to any of the child routes
* `CanDeactivate`: Can a user leave a page? For example, they haven't finished editing a post
* `Resolve`: Grab data before the route is instantiated
* `CanLoad`: Check to see if we can load the routes assets

🔗 **Source:** [scotch.io](https://scotch.io/tutorials/protecting-angular-v2-routes-with-canactivatecanactivatechild-guards)

## Q17: What are some differences between Angular 2 and 4? ⭐⭐

**Answer:**

Just to name a few:
* Improvements in AOT,
* allowing the "else" clause in ngIf,
* support for TypeScript 2.1
* breaking out the animations package

🔗 **Source:** [github.com/WebPredict](https://github.com/WebPredict/angular-2-interview-questions)

## Q18: How would you run unit test? ⭐⭐

**Answer:**

The Angular CLI downloads and install everything you need to test an Angular application with the Jasmine test framework.

The project you create with the CLI is immediately ready to test. Just run this one CLI command:

```sh
ng test
```

🔗 **Source:** [angular.io](https://angular.io/guide/testing)

## Q19: What is the difference between Structural and Attribute directives in Angular? ⭐⭐

**Answer:**

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

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

🔗 **Source:** [onlineinterviewquestions.com](https://www.onlineinterviewquestions.com/angular-7-interview-questions/)

## Q20: What is the purpose of base href tag? ⭐⭐

**Answer:**

The routing application should add element to the index.html as the first child in the tag inorder to indicate how to compose navigation URLs. If app folder is the application root then you can set the href value as below
```html

```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)

## Q21: What is an observer? ⭐⭐

**Answer:**

Observer is an interface for a consumer of push-based notifications delivered by an Observable. It has below structure,
```javascript
interface Observer {
closed?: boolean;
next: (value: T) => void;
error: (err: any) => void;
complete: () => void;
}
```
A handler that implements the Observer interface for receiving observable notifications will be passed as a parameter for observable as below,
```javascript
myObservable.subscribe(myObserver);
```
**Note:** If you don't supply a handler for a notification type, the observer ignores notifications of that type.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)

## Q22: What is an observable? ⭐⭐

**Answer:**

An Observable is a unique Object similar to a Promise that can help manage async code. Observables are not part of the JavaScript language so we need to rely on a popular Observable library called RxJS.
The observables are created using new keyword. Let see the simple example of observable,
```javascript
import { Observable } from 'rxjs';

const observable = new Observable(observer => {
setTimeout(() => {
observer.next('Hello from a Observable!');
}, 2000);
});`
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)

## Q23: What are observables? ⭐⭐

**Answer:**

**Observables** are declarative which provide support for passing messages between publishers and subscribers in your application. They are mainly used for event handling, asynchronous programming, and handling multiple values. In this case, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)

## Q24: What is a bootstrapping module? ⭐⭐

**Answer:**

Every application has at least one Angular module, the root module that you bootstrap to launch the application is called as bootstrapping module. It is commonly known as AppModule. The default structure of AppModule generated by AngularCLI would be as follows,
```javascript
/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

/* the AppModule class with the @NgModule decorator */
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)

## Q25: What is interpolation? ⭐⭐

**Answer:**

**Interpolation** is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property.
Let's take an example,
```html

```
In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)

## Q26: Explain the difference between `Promise` and `Observable` in Angular? ⭐⭐⭐