1.

Two way data binding

Ans : Data binding in AngularJS is the synchronization between the model and the
view. When data in the model changes, the view reflects the change, and when data
in the view changes, the model is updated as well.
Property Binding []
Event Binding ()
[()] - ngmodel

2.ngif and ngfor Directive imported from commonModule

3.Content Projection
Ans - It is good for reusability
Content projection is a pattern in which you insert, or project, the content you
want to use inside another component. For example, you could have a Card component
that accepts content provided by another component.
following content can be insert
Inner HTML
HTML Elements
Styled HTML
Another Component
To insert HTML elements or other components in a component, you need to use
content projection

4. How do you transfer data between components

Using @Input decorator (Parent to Child)

@Output decorator and EventEmitter (Child to Parent)
Using @ViewChild decorator (Child to Parent) The @ViewChild decorator help to
access a directive, child component and the DOM element from a component class
Using a Service (Unrelated Components) using BehaviourSubject next method to
publish

5.difference between constructor and ngOninit

So the first main difference between constructor and ngOnInit method is
constructor called by JavaScript engine whereas ngOnInit() called by Angular.
In object-oriented programming, world constructor is used to initialize the
class members and used for dependency injection.

ngOnInit Constructor
One of the Angular life cycle hook method Typescript feature
nothing to do with Angular
ngOnInit being added to prototype of the class created constructor is
transformed to function with the same name as class created
Called by Angular Called by Javascript
Engine
Invoked by Angular when component is initialized Constructor is
automaticlly called at the time of creating object of the class
Actual business logic performed here Used for Injecting
dependencies
Everything is ready at the time of invocation Not everything in
component is initialized at the time of invocation

6. can we write class without using constructor in angular

Yes we can
If you don't use DI service for angular in your class you can remove it .
If the class won't be used by third parties and you don't need an overloaded
constructor, don't write an empty constructor

7. Directive and its types (https://www.geeksforgeeks.org/angular-7-directives/)

it changes the existing behaviour of dom element
types
component directive
structural directive
attribute directive

8. Angular provided modules we use in application

BrowserModule @angular/platform-browser To run your application in a
browser.
CommonModule @angular/common To use NgIf and NgFor.
FormsModule @angular/forms To build template driven forms (includes NgModel).
ReactiveFormsModule @angular/forms To build reactive forms.
RouterModule @angular/router To use RouterLink, .forRoot(), and .forChild().
HttpClientModule @angular/common/http To communicate with a server using the
HTTP protocol.

9. What is the use of HttpInterceptor class

https://ultimatecourses.com/blog/intro-to-angular-http-interceptors
The Angular HTTP Interceptor is introduced along with the new HTTPClientModule. The
Interceptor helps us to modify the HTTP Request by intercepting
it before the Request is sent to the back end. The Interceptor can be useful for
adding custom headers to the outgoing request, logging the incoming response, etc.

10. Difference between form builder and form control and form group(Form-Array)
In Angular, a reactive form is a FormGroup that is made up of FormControls.
The FormBuilder is the class that is used to create both FormGroups and
FormControls
form controls are classes that can hold both the data values and the validation
information of any form element

11 how can we set value to form control in ts file

setValue method used to set value

12. how to set validation to template driven forms

13. AOT & its advantages

The AOT (ahead-of-time) compiler in Angular converts Angular HTML and TypeScript
code into JavaScript code during the build phase, which makes the rendering process
much faster. This compilation process is needed since Angular uses TypeScript and
HTML code. The compiler converts the code into JavaScript, which can then be
effectively used by the browser that runs our application.

What are the advantages of AOT?

AOT compilation has several advantages as mentioned below:

Fast rendering: Since, after compilation, the browser would download a pre-compiled
version of our application, it can render the application immediately without
compiling the app.
Less asynchronous requests: It takes external HTML templates and CSS style sheets
and inlines them within the application JavaScript, which reduces the number of
separate Ajax requests.
Smaller download size: The compiler will minify the code for us so that the
download size is less.
Template error detection: During the compilation phase, any issues in the templates
will be detected and reported by the compiler so that they can be corrected before
production.

14. component in angular

15 modules 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. 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.

16 What is DOM
The full form of DOM is Document Object Model, and it is responsible for
representing the content of a web page and changes in the architecture of an
application. Here, all the objects are organized in the form of a tree, and the
document can easily be modified, manipulated, and accessed only with the help of
APIs

17. Template
18. Pipes in angular https://www.dotnettricks.com/learn/angular/pipes-custom-
pipes-example-usages
Pipes are simple functions that accept an input value and transform it based on
the developer's needs. There are predefined and user-defined pipes, they can be
accessed using the pipe symbol "|",
they can be chained together

19. Custom Pipes

Create a Pipe Class and decorate it with the decorator @Pipe.

Supply a name property to be used as a template code name.

Register your Pipe in the module under declarations.

Finally, implement PipeTransform and write transformation logic.

Use your pipe in the HTML using ‘|’, which represents a pipe.

Also, add Custom arguments if you want to.

20. Types of pipes

Pure pipe
Impure pipe
The pipe is executed only when it detects a change in primitive value or object
reference The pipe is executed on every change detection cycle irrespective of
the change in the input value.
A single instance is created.

Multiple instances are

created
21. Async Pipe
Angular provide a special kind of pipe that are called AsyncPipe and the AsyncPipe
subscribes to an observable or promise and returns the latest value it has emitted.

The AsyncPipe allows you to bind your HTML templates directly to values that arrive
asynchronously manner that is a great ability for the promises and observables.
22. Difference between observable and promise

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 them using the subscribe()
method. Are not lazy: execute immediately after
creation.
Have subscriptions that are cancellable using the unsubscribe() method, which stops
the listener from receiving further values. Are not cancellable.
Provide the map for forEach, filter, reduce, retry, and retryWhen operators. Don’t
provide any operations.

23. Angular Material

UI library

24 What is angular ?

ngular is a TypeScript-based open-source front-end platform that makes it easy to

build applications with in 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.

25 Single page application

Single Page Applications are web applications that load a single HTML page and only
a part of the page instead of the entire page gets updated with
every click of the mouse

26. Difference between angular and angular js

AngularJS Angular
It is based on MVC architecture This is based on
Service/Controller
It uses JavaScript to build the application Introduced the TypeScript to
write the application
Based on controllers concept This is a component based UI
approach
Not a mobile friendly framework Developed considering mobile
platform
Difficulty in SEO friendly application development Ease to create SEO friendly
applications

27 What is TypeScript?
TypeScript is a typed superset of JavaScript created by Microsoft that adds
optional types, classes, async/await, and many other features, and compiles to
plain JavaScript. Angular built entirely in TypeScript and used as a primary
language. You can install it globally as
npm install -g typescript

28 Angular architecture
29.What are the key components of Angular?
Angular has the below key components,
Component: These are the basic building blocks of angular application to control
HTML views.
Modules: An angular module is set of angular basic building blocks like component,
directives, services etc. An application is divided into logical pieces and each
piece of code is called as "module" which perform a single task.
Templates: This represent the views of an Angular application.
Services: It is used to create components which can be shared across the entire
application.
Metadata: This can be used to add more data to an Angular class.

30. What is angular CLI?

Angular CLI(Command Line Interface) is a command line interface to scaffold and
build angular apps using nodejs style (commonJs) modules. You need to install using
below npm command,
npm install @angular/cli@latest
Below are the list of few commands, which will come handy while creating angular
projects
Creating New Project: ng new

Generating Components, Directives & Services: ng generate/g The different types of

commands would be,

ng generate class my-new-class: add a class to your application

ng generate component my-new-component: add a component to your application
ng generate directive my-new-directive: add a directive to your application
ng generate enum my-new-enum: add an enum to your application
ng generate module my-new-module: add a module to your application
ng generate pipe my-new-pipe: add a pipe to your application
ng generate service my-new-service: add a service to your application
Running the Project: ng serve

31. difference between forRoot and forChild

forRoot creates a module that contains all the directives, the given routes, and
the router service itself. forChild creates a module that contains all the
directives and the given routes, but does not include the router service.
It registers the routers and uses the router service created at the root level.

32. Router outlet

Router-Outlet is an Angular directive from the router library that is used to
insert the component matched by routes to be displayed on the screen.
It's exported by the RouterModule and added to the template as shown below:
<router-outlet></router-outlet>03-Jun-2021

33. Shift and unshift method

shift remove item from array from start
unshift add item in array from start
34. Difference between angular 11 and 13

35. package.json and angular.json, packe.locl.json

package.json is not related to angular's ecosystem. It's npm's ecosystem and its
responsible for keeping meta data about pacakges/libraries you use as your
dependency. https://docs.npmjs.com/cli/v7/configuring-npm/package-json

angular.json is related to angular ecosystem, its responsible for your angular app
configuration. You can learn more from official angular docs.

https://angular.io/guide/workspace-config
36. Doctype in html
37. session storage, local storage, cookies
38.15. What is the difference between absolute, relative, fixed, and static
positions?
Absolute - An absolute element is positioned relative to the nearest parent
element. In case a parent element is not present it is positioned based on the page
itself and moves along with the page scroll.
Relative - When an object is positioned relative to an element without adding any
position attributes nothing happens. However, if a positional attribute is placed
Eg: 20px to the right, the element will move 20px to the right of the original
element.

Fixed - A fixed position implies that the element remains fixed to the viewport,
which means it stays in the same place even if the page is scrolled.

Static - Elements are positioned static by default, these elements are not affected
by positional attributes (Top, bottom, left, right).
If an element is positioned static it follows the normal flow of the page.

39. let , var , const

40. Rx js operators

41. Subject
42. template driven and reactive forms
43. Lazy loading