Angular Interview Questions Part V

 1. Explains different types of directives with example?

There are mainly three types of angular directives. They are:

1. Component directive: It is used to specify HTML templates. Example: @component
2. Attribute directive: It is used to change or modify the behavior of the HTML element. Example: ngModel
3. Structural directive: It is used to add or remove the  HTML element in DOM layout. Example: ngIf  

2. What is refactoring?

Refactoring is a technique for changing the name of file and folder and reflect that change all over the project structure without changing the underlying functionality.

3. Explain ng generate?

ng generate is a command which is used to generate components, services, module etc.

Let us consider, we generate a component by using following syntax:

  ng generate component component-name 

                        OR

  ng g c component-name

4. What is dependency injection?

Dependency injection or DI is a technique in which a class requests dependencies from external sources rather than creating itself.

5. How to navigate from within the component code?

we can navigate from the component code as:

6. What is a constructor in a class?

Constructor is a special kind of function which has no return type and has the same name as a class but in the case of TypeScript constructor keyword is enough. The main functionality of the constructor is to instantiate the object of the class.  

7. What is the syntax of ngFor loop?

ngFor is a structural directive that has ability of changing the DOM layout by adding or removing DOM element.

syntax:

video tutorial for angular:

Angular Interview Questions part IV

 1. What is angular routing?

Angular router is a mechanism which enables to build single page applications with multiple views and navigation between these views.

Simply, the process of defining navigation element and their corresponding view is called Routing.

  The syntax of angular routing is:

  Routing modules have all the path to the views as:

2. What is Single Page Application?

Single page applications (SPA) are the type of web applications that loads single page and only a part of page instead of entire page with every click. It ensures high  performance.

Some single page applications are Google, Gmail, Paypal,  Facebook, YouTube, GitHub etc.

3. What is the Importance of router-outlet?

Router-outlet is the angular tag which works as a placeholder that loads the different components dynamically based on the current route state. Activated component will takes place inside the router-outlet to load its content. Navigation can be done using router-outlet directives.

4. what is AJAX?

AJAX stands for Asynchronous JavaScript and XML is a technique that is used for creating fast and dynamic web pages. It allows web pages to be updated asynchronously by exchanging small piece of data, this means it updates part of the web page without reloading whole page.

5. How can we make a route as a startup route?

We can make a route as a startup route by bootstrapping module in main.ts file and bootstrapping its component in the app.module class as: 

Video tutorial for angular:

Angular Interview Questions Part III

 1. What is camel case and pascal case?

In camel case, the first letter of the first word in the identifier is lower case, while the first letter of subsequent word is uppercase.

eg: camelCase

In pascal case, the first letter of every word in the identifier is upper case.

eg: PascalCase

2. What are directives?

Angular directives are the functions that are used to extend the power of the HTML by giving it new syntax like ngModel, ngIf,  etc.

3. What is the use of ngModel and significance of [] and () in ngModel?

ngModel is a inbuilt directive that binds the input, select, textarea, and store the required user value in a variable for future use. It works with two way data binding concept.

• (ngModel) : It is used to bind data to the model.
• [ngModel] : It is used to bind data to the view.
• [(ngModel)] : It is used in bidirectional data binding. (i.e. model to view and vice versa)

4. What are expressions or interpolation?

Expression or interpolation are the type of unidirectional data binding that bind the value to a UI element. Expressions are written inside double curly braces such as {{expression}}.

5. What is the importance of FormsModule?

FormsModule is a module that is used to handle data provided by user. It provides various directives and that helps in changing the behavior of the HTML.

Video tutorial for angular:

Angular Interview Questions part II

 1.Differentiate between dependencies and dev dependencies.

 Dependencies are properties that are used in a project that makes program run smoothly. They are used for testing, building and compiling the program. 

 Dev dependencies contains names and versions of the node  modules that are required for the development purpose only.

The main difference between dependencies and dev dependencies are the dependencies are modules which are required at runtime, while dev dependencies are modules which are only used for development purpose.

2.Explain about view, components, modules and models?

View: View is a presentation layer that defines how your user sees and interact with it.

Components: Components are the intermediate building block of angular applications that are used to bind view and model together. Any information is shared between view and model through the components.

Modules: Module is a mechanism that group components, directives, pipes and services that can be combined with other modules to create an application.

Models: Models are used in business logic concept that interact with view through components.

3.What is the industry naming convention for angular file and folder?

It becomes very hard to manage all files and folders without following any standard naming convention. So angular also follows the naming convention that helps to manage and debug lots of files and folders easily. In angular, each folder has its own view, component, module and models.

The folder structure of an angular project is:

4. How does angular application bootstrap ( start )?

Bootstrapping is a technique of initializing or loading angular application. When we create a new angular project then it is launched by using command ng serve . Bootstrap describe how our AppComponent get loaded and displays our first view. It follows following steps in sequence order:

1. Index.html loads first
2. index.html file call the main.ts file  
3. main.ts file bootstraps the app.module.ts file
4. app.module.ts file calls the app.component.ts file
5. app.component.ts loads its view app.component.html
6. app.component.html template is injected to the index.html file then we sees our 1st view on the browser.

5. What is a decorator?

Decorators are functions that are used to separate modification or decoration of a class without modifying the original source code. It makes a class an angular component and adds additional metadata information like template, selector name style etc.  on it.

6. What is a selector?

Selector is a parameter of a decorator which is used to identify each component uniquely into the component tree. It helps to inject the component to the index.html file.

7. Explain the importance of templateURL?

TemplateURL has the path of the HTML code file. In a complex view selector is not enough, we also need to specify the path where our view resides that need to be injected into index.html through the selector.

Video tutorial for angular:

Angular Interview Question Part I

                                                        

1.What is Angular CLI?

-> Angular CLI is a command Line Interface that is used to initialize, develop, configure and maintain angular applications from a command shell. To install angular cli we use following command:

                npm install -g @angular/cli

2.Difference between npm install and npm install -g?

-> Simply, both npm install and npm install -g  are used to install all module required for the project but the difference between these command is  the actual location where they install.

 example: when we install angular cli using command npm install @angular/cli (i.e. without -g), the module is installed on the local directory under the node_modules. But when we install angular cli using command npm install -g @angular/cli (i.e. with -g or --global), the module is installed globally in the hard-disk.

 Generally it is preferred to use npm install -g command because it can be used by more than one project development process in the device.

3.What does ng serve command do?

-> ng serve command builds and serve applications and launches the application on the local server with port no. 4200. It rebuilds the application when some changes occur in the project.

4.How ng serve differs from ng build?

-> ng serve and ng build works in similar way but can be used for different purpose.

  ng serve command build watches and serves the angular application in-memory and launches in localhost:4200. It runs the application on the web server without saving the artifacts to any external folder.

 ng build command build the deployable file which is stored in the external memory such as hard-disk. It saves the file under the dist folder on the project root directory.

5.What is the purpose of ng build --prod flag?

-> ng build --prod flag is generally used for optimization. It helps to optimize the code by removing whitespace, comments that makes it occupy less space in the storage disk and then makes it easy to deploy.

6. What is the importance of src and e2e folder?

-> Project structure of angular is created by using the command ng new <project-name>.

src is a folder that contains main source code related to your angular application.

An e2e folder at top level of folder structure contains source files for the end-to-end test that correspond to the root-level application. 

Video tutorial for angular: