1) What is angular?
Angular is a
TypeScript-based free and open-source web application framework led by the
Angular Team at Google and by a community of individuals and
corporations.
2) Why is angular used?
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.
3) Tell Us the Difference Between Angular and Angularjs
|
AngularJS |
Angular |
|
Based on JavaScript |
Based on TypeScript |
|
Based on the MVC design pattern |
Based on components, modules, and directives |
|
No support for mobile app |
Supports mobile |
|
Can’t build SEO friendly applications |
SEO friendly applications can be easily created |
|
Dependency Injection tokens can only be strings.
Also, only the injector is present. |
DI Tokens can be of any type, for example,strings
or class. |
|
No support or backward compatibility |
Backward compatibility can be done without
issues. Also, there is a lot of support documentation for the same. |
|
Uses $routeprovider.when() for routing |
Routing is done using @RouteConfig[()] |
|
Requires specific ng directive for each of
property, event, and image |
For event binding, () is used and for image or
property binding [] is used |
4) Mention Some of the Features of Angular
important features
are –
- Component-based
architecture – applications are written as a set of independent
components.
- Great support
for complex animations without writing much code.
- Because of the
component router, Angular supports automatic code-splitting. Hence only
the code required to render a particular view is loaded.
- Cross-platform
application development.
- Template syntax
for creating UI views.
5) What is
the component in angular?
Components
are the main building block for Angular applications. Each
component consists of: An HTML template that declares what renders on the page.
A Typescript class that defines behavior. A CSS selector that defines how the
component is used in a template .
6) what is a module in angular?
Module in Angular refers to a place where you can group the
components, directives, pipes, and services, which are related to the
application.
7) What's the difference between an Angular component and a module?
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.
8. How are
observables different from promises?
The first
difference is that an Observable is lazy whereas a Promise
is eager.
|
Promise |
Directive |
|
Emits a single value |
Emits multiple values over a period of time |
|
Not Lazy |
Lazy. An observable is not called until we
subscribe to the observable |
|
Cannot be cancelled |
Can be cancelled by using the unsubscribe()
method |
|
Observable provides operations like map, forEach,
filter, reduce, retry, retryWhen etc. |
9) what is angular?
Angular is a TypeScript-based free and open-source web application
framework led by the Angular Team at Google and by a community of individuals
and corporations.
10) What are directives in Angular?
A directive is a class in Angular that is declared with a @Directive decorator.
Every directive has its own behavior and can be imported into various
components of an application
11) When to use a directive?
Consider an application, where multiple components need to have similar
functionalities. The norm thing to do is by adding this functionality
individually to every component but, this task is tedious to perform.
In such a situation, one can create a directive having the required
functionality and then, import the directive to components that require this
functionality.
12) Explain the concept of Dependency Injection?
Dependency injection is an application design pattern that is
implemented by Angular.
It also forms one of the core concepts of Angular.
13) Differences Between Component and Directive?
|
Component |
Directive |
|
To register component, Annotation used is
@Component |
@Directive is used to register a directive |
|
The primary purpose of ingredients is to break
the complex application into smaller, more manageable parts (components) |
Purpose of the `directive is to create new custom
components that are reusable |
|
Each DOM element can have only one component |
Any number of directives can be used in one DOM element |
|
Component mandatorily requires @View decorator,
template, or template URL to specify the view. |
A directive has nothing to do with views |
14) What Is the Primary Language Used in Angular?
Angular is based on
TypeScript and HTML. HTML is used for the template, and TypeScript (a superset
of JavaScript) is used for components.
15) Differences Between One-Way Binding and Two-Way Binding
|
One-way binding |
Two-way binding |
|
The view doesn’t change or update automatically
whenever there is a change in the data model. Custom code needs to be
manually written to reflect changes. |
UI or view is continuously updated automatically
as the data model changes. The process is similar to the synchronization
process. |
16) What Are the Various Filters Supported by Angular?
|
Filter name |
Description |
|
Uppercase |
Convert string to uppercase |
|
Lowercase |
Convert string to lowercase |
|
Date |
Convert date to the specified format |
|
Currency |
Convert the number to currency format |
|
Number |
Format number into a string |
|
Orderby |
Orders an array by specific expression |
|
limitTo |
Limits array into the specified number of
elements; string to specified number of characters |
|
JSON |
Format object to JSON string |
|
Filter |
A select a subset of items from the array |
17) Differentiate Between Javascript Modules and Ngmodules
Difference between JS
modules and NgModules –
|
JS modules |
NgModules |
|
Bounds all the classes |
Bounds only declarable classes |
|
All the member classes are defined in a single
file |
The module’s classes are listed in the
@NgModule.declarations list |
|
Cant extend the entire application with services |
The entire application can be extended with
services using @NgModules.providers list to add providers |
|
Can import or export any kind of classes |
It can import or export only those declarable
classes that it owns or imports from other modules. |
18) what is ngIf and ngFor? Could You please Show me Small Example to Use
Them?
Just like if and for in other languages, ngIf and ngFor are used as control
statements. Example –
Show this only if the
Boolean "display" is true
Where the display is a boolean with the value true
or false.
ngFor is used to loop through and display elements of an array (set of
data).
<td>
<tr
*ngFor="let student of students; let i = index">
<td>{{student.name}}</td> </tr>
The second part (i=index) is optional and only needed if you want to display
the index.
19) What Is the Digest Cycle?
Digest cycle is the process of monitoring watchlist to track the changes
in the value of the watch variable. The digest cycle is implicitly triggered,
but we can also trigger it manually using $apply() function.
20) What Is a Pipe? Write a Simple Code to Demonstrate.
Pipe (|) is used to transform input data into desired format.
For example,
Price is {{ price | currency }}
21) Can You Create a Parameterized Pipe in
the Above Example?
Answer: Yes,
Price is {{ price | currency : “USD$” : 0.00 }}
22) Explain How You Can Chain Pipes
Answer: We can add any number of filters using pipes -
Average is {{ average | uppercase | number}}
23) Is It Possible to Create a Custom Pipe?
How?
Yes, we can create custom pipes. Pipe metadata @Pipe decorator can be imported
from core Angular library Pipe is a class that is decorated with the above
metadata (@Pipe({name: 'myCustomPipe'})) The next step is to define the
transformation.
For this, the pipe class should implement the method transform() of the
PipeTransform class. Specify the pipe name in the main code
Size: {{number | myCustomPipe: 'Error'}}
24) What Is the Purpose of an Async
Pipe?
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. observable|async.
25)Explain the Importance of HttpClient.
HttpClient is a simplified
Http API for Angular applications. It gives better observable APIs, better
error handling mechanisms, testability, request and response interception,
typed request and response objects.
The HttpClientAPI rests on the XMLHttpRequest interface exposed by the
browsers.
26) How Does Angular
Router Work?
Angular router interprets a browser URL as a
command to navigate to a client-generated view. The router is bound to the
links on a page.
This way Angular knows to navigate the application view to the required page
when a user clicks on it.
27) How Is Metadata Represented in Angular?
Metadata is represented
using decorators like class decorators, property decorators, method decorators,
property decorators. Example, @Component, @NgModule etc.
29) What Are Class
Decorators in Angular?
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.
30) What Is Package.json? Explain its Purpose
With json package, it
becomes easy to manage the project dependencies. We can mention details like
the version, language etc… in package.json.
For example, if typescript is used in our project, we can mention typescript
and its version in package.json. Examples are metadata.json, tsconfig.json etc
0 Comments