Angular Interview Questions

What are directives in Angular ?

Directive: directives helps you to attached behaviour to your HTML DOM.
or we can say that directives are angular syntexs which we can write inside HTML.

ex: 
<div [hidden]="Hide()">Hello</div>
<input [(ngModel)]="value" value="" type="text">
<p>{{value}}</p>

in above example [hidden],[(ngModel)] and {{value}} is directives
directives are angular syntexs inside HTML which go and change the behaviour of HTML DOM.

What are the different types of directives in Angular ?

Angular have three types of directives
a) Structural
b) Attribute
c) Component

Structural directive change the structure of the Dom element, we can say that they add or remove element in the dom.They can change the structural of the dom
For example we have for loop and when we execute that loop using html tag like tr in table it could be increase as per array elements, it could be 1 or could be n numbers.

<table>
<tr *ngFor="let varname of arrname">
<td>{{varname.field}}</td>
<td>{{varname.field}}</td>
</tr>
</table>

Attribute Directive: it does’t change the structure of dom element but it changes the behaviour of HTML elements.For ex. inside div we are using any function so according to the functionality of function its change the behaviour for that element like color,visibility etc

Component Directive: it is self contain directive which have their own code or UI/Template.

What is NPM and what is use of Node_Modules ?
NPM (Node Package Manager) helps to install javascript framework in machine, ex: npm install jquery.
Node_Modules: is used to keep all the installed packages.

What is package.json file ?
It is a file, where are the references of javascript are listed down, it keep all the JS references which is needed for application or project.

What is Typescript ?

Typescript is superset of javascript. It extends javascript by adding types, it speedus-up development experience.

What is Component and Modules in angular ?
Angular helps to bind view and models because it is a binding framework, so component is a mediator which helps to bind both models and view.
Modules: Modules is a group of component, in large application we could have multiple components so we can use Modules for group of components

What is Decorator in Angular ( What are Annotationa or MetaData) ?
Decorator helps to find out the type of class, ex. inside component using @Component we can say that it is a component class and same in Modules we have @NgModule decorator

What are templates in angular ?
Templates are HTML View, angular use templateUrl inside component decorator for calling the template, in angular we can use inline template as well as seprate file for template

What is Data binding ?
Data binding define how the component and view communicate to each others.
In angular we can use different kind of Data binding
a) Expression or an interpolation binding {{}}
b) Property Binding []
c) Event Binding ()
d) Two-way Binding [()]

Expression or an interpolation binding : Using expression data binding data flow can be mix with HTML tag using curly brackets {{datavalue}}
ex: {{obj.field}}

Property Binding : In property binding data can be flow from controller to view using square brackets [].
ex:

Event Binding: When we want to perform any task using any event for that we can use event binding like click event, it will go from view to the component.
ex:

Two-way Binding: in two-way binding we can use both brackets square and round bracket as well. Using two-way binding data can be send view to controller and controller to view at the same time.

Angular Architecture ?
a) Template: It is simple HTML view.
b) Component: View can communicate with component
c) Modules: It is group of components.
d) Binding: Used for binding between view and component. for binding angular provides some brackets () round , [] Square and {{}} culry brackets
e) Directives : Angular have different directives inside the view like interpolation, ngModel
f) Service: Service is used to inject with component for data passing, it is consumed by components.Services help to share common logic across the project.
g) Dependency Injection: Is used to inject instance across constructor.It is a application design pattern where rather than creating object instances from within the component angular inject instance using constructor.

What is SPA ?
SPA (Single Page Application) where view (UI) gets loaded once then no need to load it again and again only which part is require that can be load using the routing.

What is Lazy Loading ?
On-demand loading is called lazy loading.

What is services ?
Service is used to inject with component for data passing, it is consumed by components.Services help to share common logic across the project.

What is Dependency Injection ?
It is used to inject instance across constructor.It is a application design pattern where rather than creating object instances from within the component angular inject instance using constructor

ng serve vs ng build
ng serve builds in memory while ng build builds on the hard disk so when goes for production ng build command is used.