1.What is Angular Framework?

Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications within web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.

2.How does an Angular application work?

Answer: The entry point is the main.ts file that is configured in the angular.json. From then on, the AppModule is bootstrapped. The module will then render the AppComponent by using index.html file.

3.Can you describe some of the advantages of using Angular?

Answer: Angular helps create fast, dynamic, and scalable web applications with ease, using components and modules with a hierarchical dependency injection structure. It facilitates RESTful services and client-server communication with its core modules. Another advantage is that it provides the testing system (with Jasmine and Karma) and its environment is already set

4.What are the key components of Angular?

Answer: Angular has the below key components,

1. Component: These are the basic building blocks of angular application to control HTML views.
2. Modules: An angular module is a set of angular basic building blocks like components, directives, services, etc. An application is divided into logical pieces and each piece of code is called “module” which perform a single task.
3. Templates: This represents the views of an Angular application.
4. Services: It is used to create components that can be shared across the entire application.
5. Metadata: This can be used to add more data to an Angular class.

5.What is the angular CLI?

Answer : Angular CLI(Command Line Interface) is a command-line interface to scaffold and build angular apps using nodejs style (commonJs) modules.

6.What is Transpiling in Angular?

Answer : Transpiling is the process of converting the typescript into javascript (using Traceur, a JS compiler). Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.

7.What are directives?

Answer: Directives add behavior to an existing DOM element or an existing component instance.

Directives are of three types:

• Attribute Directives
• Component Directives
• Structural Directives

8.What is a bootstrapping module?

Answer: The root module that you bootstrap to launch the application is called a bootstrapping module. Every Angular application has a bootstrapping module. It is also called the AppModule. The bootstrapping module is mentioned in the AppModule class.

9.What is the difference between an Annotation and a Decorator in Angular?

Answer: Annotations in angular are “only” metadata set of the class using the reflect Metadata library. They are used to create an “annotation” array. On the other hand, decorators are the design patterns used for separating decoration or modification of a class without actually altering the source code.

10.What are templates in Angular?

Answer: Templates are the HTML code rendered in the index.html file’s body. The HTML code is a combination of data coming from the controller or the component and the model to provide a dynamic view to the user finally.

11.What are components?

Answer: Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per element in a template

12.Differentiate between Components and Directives in Angular

Answer: Components break up the application into smaller parts; whereas, Directives add behavior to an existing DOM element.

13.What is a module?

Answer: Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application.

14.What are lifecycle hooks available?

Answer: The description of each lifecycle method is as below,

1. ngOnChanges: When the value of data-bound property changes, then this method is called.
2. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
3. ngDoCheck: This is for the detection and to act on changes that Angular can’t or won’t detect on its own.
4. ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.
5. ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
6. ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.
7. ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.
8. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

15.What is data binding?

Answer: Data binding is a core concept in Angular and allows to define communication between a component and the DOM.

16.What is the difference between constructor and ngOnInit?

Answer: TypeScript classes have a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method.

17.What is a service?

Answer: A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

18.What is dependency injection in Angular?

Answer: When a component is dependent on another component the dependency is injected/provided during runtime.

19.What are pipes?

Answer: A pipe takes in data as input and transforms it to a desired output

20.What is the use of @Input and @Output?

When it comes to the communication of Angular Components, which are in Parent-Child Relationship; we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Child Component to receive an event from Child to Parent Component.

21. What is Routing in Angular?

Answer: Routing helps a user in navigating to different pages using links.

22.What is the purpose of using package.json in the angular project?

Answer: With the existence of package.json, it will be easy to manage the dependencies of the project. If we are using typescript in the angular project then we can mention the typescript package and version of typescript in package.json.

23.Differentiate between Observables and Promises.

Answer: Observables are lazy, which means nothing happens until a subscription is made. Whereas Promises are eager; which means as soon as a promise is created, the execution takes place. Observable is a stream in which passing of zero or more events is possible and the callback is called for each event. Whereas, promise handles a single event.

24.Explain Authentication and Authorization.

Answer: Authentication: The user login credentials are passed to an authenticate API (on the server). On the server side validation of the credentials happens and a JSON Web Token (JWT) is returned. JWT is a JSON object that has some information or attributes about the current user. Once the JWT is given to the client, the client or the user will be identified with that JWT.

Authorization: After logging in successfully, the authenticated or genuine user does not have access to everything. The user is not authorized to access someone else’s data, he/she is authorized to access some data.

25.What Is Package.json? What’s the difference between package.json vs. package-lock.json?

Answer: With package.json file, it becomes easy to manage the project dependencies. We can mention details like the version, language, etc.… in package.json. For example, if bootstrap is used in our project, we can mention the ng-bootstrap package and its version in package.json.

If you are not familiar with package.json I really recommend this article that will help you build a mental picture of what is package.json file in dept and what’s the difference between package-lock.json and some tips based on my experience.

26.What is the difference between constructor and ngOnInit?

Answer: TypeScript classes have a default method called a constructor, which is normally used for construction purposes. It has the same purpose as a standard class in Java, such as building an object and initializing it. The constructor is also used to inject the dependencies we need in the component.

On the other hand, the ngOnInit method is specific to Angular, especially used to define Angular bindings. The constructor is always called before ngOninit.

27.What is zone in Angular?

Answer: A Zone is an execution context that persists across async tasks. Angular relies on zone.js to run Angular’s change detection processes when native JavaScript operations raise events.

28.What is the purpose of the async pipe?

Answer: Async pipe subscribes to a promise or an observable and returns the latest value. If a new value is emitted, the pipe marks the component that needs to be checked for any changes.

<code>observable|async</code>

29.What is metadata? How Is Metadata Represented in Angular?

Answer: Metadata is used to decorate a class so that it can configure the expected behavior of the class. The metadata is represented by decorators.

Metadata is represented using decorators like class decorators, property decorators, method decorators.

Examples of decorators in Angular

• Class decorators: @Component and @NgModule
• Property decorators: @Input and @Output
• Method decorators: @HostListener
• Parameter decorators: @Inject, Optional

30.What Are Class Decorators in Angular?

Answer: The class decorator contains the metadata of the suitable class type. It appears just before the class definition and declares the class to be of a certain type. Some class decorators are:

• @Component
• @NgModule
• @Pipe
• @Directive
• @Injectable.

Define the ng-content Directive.

Answer: Conventional HTML elements contain some content in between the tags. For example:

<p>Put your paragraph here</p>

Take this example of customized text between angular tags as an example:

<app-work>This won’t work like HTML until you use ng-content Directive</app-work>

However, doing so won't work as it did for HTML elements. To make it work as per our HTML example, we will need to use the ng-content directive. Additionally, it facilitates the creation of reusable components.

25. What do you mean by dependency injection?

Answer: Dependency injection (DI) in Angular is a software design pattern that allows objects to be passed as dependencies rather than having to hard-code them in the respective components. This concept is extremely useful when it comes to separating the creation of object logic from its consumption.

The "config" function uses DI that must be configured to enable the module to retrieve the application elements. Furthermore, this feature allows professionals to change dependencies according to their needs.

How to set ngfor and ngif in the same div or tag?

What is an AOT compilation? What are its advantages?

What are Http Interceptors?

What are reactive forms?

What are template driven forms?

What are the differences between reactive forms and template driven forms?

How to set ngFor and ngIf on the same element?

When a constructor is available then why to use ngOnInit?

What is change detection in Angular and list out the strategies?

What are decorators and their types?

What are directives? And their types.

How to hit several API’s parallelly instead of sequentially / In what way we can hit the API’s and get the data from all of them in one shot.

What is AOT? And the use of ngcc.

What are the pipes and their types?

Types of forms in Angular and which type is more appreciated and why?.

Is it possible to make custom validation in reactive forms? If yes then How?

How we can pass data between one or more components when they don’t hold any relationship between them like Parent-Child or Child-Parent.

How to sort in ngFor angular?

How to call node.js api in angular.js?

How to pass post data in Angular api?

How to show index in ngfor directive?

Ans: <h2 *ngFor =”let hero of heroes;let i=index”>{{i+1}}</h2>

*ngSwitch Directive Syntax?

<div [ngSwitch]=”genre”>

           <div *ngSwitchCase=”’all’”>All Movies</div>

<div *ngSwitchCase=”’action’”>Action</div>

<div *ngSwitchCase=”’fantasy’”>Fantasy</div>

<div *ngSwitchDefault>Invalid Genre</div>       

      </div>

How to use ngClass Directive syntax?

How to do error handling in Angular?