why we need angular?

Angular helps build interactive and dynamic single page applications (SPAs) with its compelling features including
templating, two-way binding, modularization, RESTful API handling, dependency injection, and AJAX handling
Easy testing
Simplified MVC pattern
modular structure
Reusability
Simplified Unit-Testing
Improved Readability
Ease of Maintenance

what we need angular instead of react ?

Angular is a full-fledged framework, while React is a library. React. js uses virtual DOM and one-way data binding
while Angular operates on real DOM & two-way data binding
Angular is generating DOM data structures directly! This works much faster than building manually HTML

why we use typescript in angular?

Angular is built using TypeScript, It is a superset of JavaScript with design-time support for type safety and tooling
TypeScript provides support for types (primitives, interfaces, and other custom types).
The goal of TypeScript is to help catch mistakes early through a type system and to make JavaScript development
more efficient.
TypeScript provides highly productive development tools for JavaScript IDEs and practices, like static checking
TypesScript is known as Object oriented programming language whereas JavaScript is a scripting
language. TypeScript gives support for modules whereas JavaScript does not support modules. ... TypeScript has
Interface but JavaScript does not have Interface

what are modules in angular and why we use it?

Module in Angular refers to a place where you can group the components, directives, pipes, and services, which
are related to the application. In case you are developing a website, the header, footer, left, center and the right
section become part of a module. To define module, we can use the NgModule. an angukar Application must have
at least one module file

what are decorator in angular?

In general, decorators allow you to execute functions. For example @Component executes the Component
function imported from Angular2. Under the hood, such decorators define some metadata on the class. This
allows you to configure the class to "flag" it as a component.
Decorators are functions that are invoked with a prefixed @ symbol, and immediately followed by a class ,
parameter, method or property. The decorator function is supplied information about the class , parameter or
method,

what are directives in angular?

Directives are classes that add additional behavior to elements in your Angular applications. With Angular's built-
in directives, you can manage forms, lists, styles, and what users see. they extend html
for example ngfor, ngif

what is two way data binding and interpolation?

Two-way data binding - meaning that if we change the input in the UI it will change the model state
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly
braces {{ and }} as delimiters.
what are services ?
An Angular 2 service is simply a javascript function, along with its associated properties and methods, that can be
included (via dependency injection) into Angular 2 components. They allow you to develop code for specific tasks
that can be used in those components.
Angular services are singleton objects that get instantiated only once during the lifetime of an application

what is dependency injection?

Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources
rather than creating them. Angular's DI framework provides dependencies to a class upon instantiation. You can
use Angular DI to increase flexibility and modularity in your applications
we inject dependency via constructor of the class

what is behavioural subjects?

Behavior Subject is a part of the RxJs library and is used for cross component communications. We can send data
from one component to other components using Behavior Subject. In Behavior Subject we can set the initial value
The only difference being you can't send values to an observable using next() method

what is event emition

An event emitter is a pattern that listens to a named event, fires a callback, then emits that event with a value
Data flows into your component via property bindings and flows out of your component through event bindings. If
you want your component to notify his parent about something you can use the Output decorator
with EventEmitter to create a custom event

what is parent-child view relationship in angular?

A common pattern in Angular is sharing data between a parent component and one or more child components. ...
@Input() allows a parent component to update data in the child component. Conversely, @Output() allows the
child to send data to a parent component.

what is interceptors in angular?

Interceptors are a unique type of Angular Service that we can implement. Interceptors allow us to intercept
incoming or outgoing HTTP requests using the HttpClient . By intercepting the HTTP request, we can modify or
change the value of the request.

what are life cycle hooks in angular?

• ngOnChanges − When the value of a data bound property changes, then this method is called.

• ngOnInit − This is called whenever the initialization of the directive/component after Angular first displays
the data-bound properties happens.

• ngDoCheck − This is for the detection and to act on changes that Angular can't or won't detect on its own.


• 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.


what is pipes and rxjs

Pipes allow us to change the data inside the template. Normally, a pipe takes the data and transforms this input to
the desired output. There are many built-in pipes in Angular 2
The full form of RxJS is Reactive Extension for Javascript. It is a javascript library that uses observables to work with
reactive programming that deals with asynchronous data calls, callbacks and event-based programs

what are Attribute and Structural Directives

Structural Directives are directives which change the structure of the DOM by adding or removing elements.
There are three built-in structural directives, NgIf , NgFor and NgSwitch
Angular attribute directives are a number of built-in directives that we can add to our HTML elements that give
them a dynamic behavior. In summary, an attribute directive changes the appearance or behavior of a DOM
element for example ng model

what are singletons ?

A singleton is a class that allows only a single instance of itself to be created and gives access to that created
instance. ... It is used in scenarios when a user wants to restrict instantiation of a class to only one object.
A singleton service is a service instance that is shared across components

what are Route Guards

What are Route Guards? 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

what is @viewChild and @ContentChild Decorators

@ViewChild() provides the instance of another component or directive in a parent component and then parent
component can access the methods and properties of that component or directive
ContentChildren is a parameter decorator that is used to fetch the QueryList of elements or directives from the
content DOM. The QueryList is updated whenever the child element/component is added or removed. The child
element reference is set in QueryList just before the ngAfterContentInit lifecycle Hook method.

how many ways to share data in angular components

what are @Host @Hostbinding and exportAs in angular

@HostListener - will listen to the event emitted by the host element that's declared with @HostListener
. HostBinding - Declares a host property binding. Angular automatically checks host property bindings during
change detection. If a binding changes, it will update the host element of the directive

what are Angular state management principles

Each component has its own state and UI elements and is responsible for managing them. It becomes complicated
when multiple components look to use the same state and manipulate them. Such a situation can be managed by
different approaches in an Angular application.
The NgRx Store is a Redux-inspired state management system that enables you to use observables to manage
state in an Angular application. The primary advantage to using the NgRx Store is the ability to store all state in a
single tree that is accessible from any part of the application

what is @input and @output

what are arrow functions?
what is asynchronous and synchronous programming
what is async await
what is promises
what is hoisting
what is def between let, const and var
what is call back functions
what are reactive forms
what is closure and recursion
difference in settimeout and setinterval
what is prototype inheritance
what are generators
first class fucntion and higher order fucntions
what is AJAX
what is lazy loading

Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a
specific route is activated. It improves the speed of the application load time by splitting the application into
several bundles. When the user navigates through the app, the bundles are loaded as required.

what is Environmental variable?