ANGULAR INTERVIEW QUESTION
1. What is component ?
It’s combination of Type Script Class, HTML Template & Optional CSS file.
2. What is data binding?
Data binding determines, how data will flow in between component class and component template.
There are 3 types of data binding exists in Angular
i. Interpolation : It’s one way data binding. It’s used to pass data from component class to
component template.
ii. Property Binding : In this binding, we can set property of HTML element on a template from the
component class.
iii. Event Binding : This binding used to capture event raised on template in a component class.
3. What is two way data binding?
Angular don’t have built in functionality for Two way binding. To implement this, we are combining
property binding and event binding.
We can use both ngModel and event.target.value.
4. Difference between Promise and Observable ?
Observables Promises
Emit multiple values over a period of time. Emit a single value at a time.
Are lazy: they’re not executed until we subscribe to
Are not lazy: execute immediately after creation.
them using the subscribe() method.
Have subscriptions that are cancellable using the
unsubscribe() method, which stops the listener from Are not cancellable.
receiving further values.
It’s provides operators
Provide the map for forEach, filter, reduce, retry, and Don’t provide any operations.
retryWhen operators.
Deliver errors to the subscribers. Push errors to the child promises.
5. What is SPA. How to implement this?
Its fast and responsive, Mobile Friendly, Easy to debug Easy to debug and Easy to debug
6. What is directive ?
Directives creates DOM elements, change their structure or behavior in an Angular.
There are 3 types of directives in Angular
I. Component : Directive with template which can be use as HTML tag.
II. Attribute Directives : Used to change behavior of template with help of ngClassl & ngStyle.
III. Structural Directives : Used to change structure of DOM Layout by ngIf, ngFor.
IV. Custom Attribute Directive : We have to import Directive, ElementRef & Renderor. We need to
decorate the class with @Directive. We need to use ElementRef class to access DOM element
and with help of Rendoror, we can work on element.
7. Difference between template driven form and Reactive form.
Template-driven forms make use of the "FormsModule", while reactive forms are based on
"ReactiveFormsModule".
Template-driven forms are asynchronous in nature, whereas Reactive forms are mostly synchronous.
Template-driven forms is unstructured, we are using ngForm and ngModel but in Reactive Forms, we need
to use FormGroup, FormBuilder, FormControl & Validator
In a template-driven approach, most of the logic is driven from the template, whereas in reactive-driven
approach, the logic resides mainly in the component or typescript code. Let us get started by generating a
component and then we'll update our form code.
8. How we can pass data from Parent to child and child to parent component.
With the help of @Input & @Output. For Parent to child, we need to use @Input and for child to parent,
we need to use @Output.
9. What is the Pipe?
In Angular, pipes are use to transform one data to different data.
There are two types of Pipes in Angular:
I. Built In : Lowercase Pipe, Upper Case Pipe, Percent Pipe, Currency Pipe & Date Pipe.
II. Custom Pipe : In this we can create and use custom pipe in class. For that we have to import
PipeTransform in to the class. Then we have implement Transform function inside that class. Decorate
with @pipe.
10. Differentiate between Angular and AngularJS.
Feature AngularJS Angular
Language JavaScript TypeScript
Architecture Supports Model-View-Controller design Uses components and directives
Mobile support Not supported by mobile browsers Supports all popular mobile browsers
Dependency Injection Doesn’t support Supports
11. Life Cycle of Angular
In Angular, component going through different different phases from birth to die.
Life Cycle of component include:
● Creation of component
● Rendering of a component
● Creating & Rendering of child component
● Checking data bound properties
● Destroying and Removing it from DOM
In this life cycle its going through different different Hooks like
● Constructor
● ngOnChanges
● ngOnInit
● ngDoCheck
● ngOnDestroy
12. What is DOM?
The HTML DOM is an Object Model for HTML. It defines:
● HTML elements as objects
● Properties for all HTML elements
● Methods for all HTML elements
● Events for all HTML elements
13. DI in Angular?
DI is the design pattern, which is use to inject dependency of object. It’s provide great Testability,
Maintainability & Reusability.
