PART-5 INTERVIEW TYPE QUESTIONS

1. What are three different types of directives and explain them with example?

Three three types of directives in Angular and these are :

Structural Directive: Structural directives enable Angular developers to add, edit and remove elements in the DOM.

Attribute Directive: Attribute directive enable Angular developers to define an attribute that when added to an element change the appearance of the element.

Component Directive: This enables you to define directives that contain templates using a rich HTML-like Syntax.

2. What is Refactoring?

Refactoring is the technique for restructuring an existing body of code, altering its internal structure without changing its external behavior.

3. Explain ng generate?

ng generate takes the name of the project, as specified in the projects section of the angular.json workspace configuration file. When a project name is not supplied, it will execute for all projects.

4. What is Dependency injection?

Dependency injection makes testing easier . The injection can be done through constructor.

5. How to navigate from within the component code?

The navigate from within the component code is done by following syntax:

        this.router.navigate(['/admin]);

6. What is a constructor in a class?

A constructor in Java is a special method that is used to initialize objects. The constructor is called when an object of a class is created. But in case of TypeScript only constructor() keyword is used to create a constructor.

7. What is the syntax for ngFor Loop?

The syntax for ngFor Loop is as below:

<ul>

    <li  *ngFor=" let item of items; let i= index">

{{i}}     {{item}}

</li>

</ul>

Read More

PART-4 INTERVIEW TYPE QUESTIONS

 1. What is Angular routing ?

Angular routing enables developers to build Single Page Applications with multiple views and allow navigation between these views.

      <router-outlet>     </router-outlet>

<router-outlet  name="outlet1"> </router-outlet>

2. What is Single page application?

A single-page application is an app that works inside a browser and does not require page reloading during use. SPA requests the markup and data independently and renders pages straight in the browser.

3. What is the importance of router-outlet ?

Router- outlet is the component work in Angular that is used to load the different components dynamically based on the activated component or current route state. Also by the use of router-outlet the navigation can be done.

4. What is AJAX?

AJAX is the technique by which we can do:

• Read data from a web server - after a web page has loaded.
• Update a web page without reloading the page .
• Send data to a web server- in the background.

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

we can make a route as a startup rout as following syntax:

const routes: Routes =[

{path: '           ' , component: AdminComponent},

{path:'login' , component:AdminComponent}

];

Read More

PART-3 INTERVIEW TYPE QUESTIONS ( [ngModel], [(ngModel)], FormsModule ..... )

 1. What is camel case and pascal case?

• With camelCase, the first letter of the first word in the identifier is lower case, while the first letter of every subsequent word is uppercase. for eg: newMaheshIdentifier.
• And with PascalCase, the first letter of every word in the identifier is upper case. For eg: NewMaheshIdentifier.

2. What are directives?

Directives are custom HTML attributes which tell angular to change the style or behavior of the DOM elements.

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

ngModel is a directive which binds input, stores the required user value in a variable, and select the textarea and we can use that variable whenever we require that value; It also used during validation in a form. We can use ngModel with:

1. Input

• text 
• chechbox
• radio
• number
• email
• url
• date
• datetime-local
• time

2. select

3. textarea

• [ngModel] - it's property binding only, not two-way binding. So entering new value will not update overRideRate. And [ngModel] is just show up.

• [(ngModel)] is two-way binding that comes from Angular.

4. What are expressions or interpolation?

Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, like: {{mahesh}} .

For eg:

<h1>Current customer: {{ maheshApplication }}</h1>

5. What is the importance of FormsModule?

FormsModule exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module. It contains the directives as: CheckboxControlValueAccessor, NumberValueAccessor, PatternValidator etc

Read More

PART-2 INTERVIEW TYPE QUESTIONS (Dependencies DevDependencies, Component , Model, Module, View, Selector... )

1. Differentiate between dependencies and dev dependencies.

DEPENDANCIES

(1) Dependancies are installed on both :

• npm install from a directory that contains package.json.
• npm install $package on any other directory.

(2) Dependancies are installed transitively: if A requires B, and B requires C, then C gets installed, otherwise, B could not work, and neither would A.

(3) Dependencies are required to run.

DEVDEPENDANCIES

(1) DevDepandancies  are:

• also installed on npm install on a directory and also that contains the package.json, unless you pass the --production flag.
• not installed on npm install "$package" on any other directory, unless you give it the --dev option.

(2) DevDependencies is not installed transitively. E.g. we don't need to test B to test A, so B's testing dependencies can be left out.

(3) devDependencies are required only to develop.

2. Explain view, components, modules and models.

MODELS

The model in an MVC-based application is generally responsible for modeling the data used in the view and handling user interactions such as clicking on buttons, scrolling, or causing other changes in the view.

COMPONENT

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

MODULES

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

Module conventionally named AppModule and resides in a file named app.module.ts. You launch your app by bootstrapping the root NgModule.

VIEW

View is the layer that displays content to the user . It is also the presentation layer.

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

Naming conventions are most important thing in the any programming languages like as angular. Some naming conventions in the angular are like as:

• Do use consistent names for all symbols.
• Do follow a pattern that describes the symbol's feature then its type. The recommended pattern is feature.type.ts .
• Separate file names with dots and dashes like , Do use dashes to separate words in the descriptive name, Do use dots to separate the descriptive name from the type.
• Do use consistent names for all assets named after what they represent.
• Do use upper camel case for class names.
• Do match the name of the symbol to the name of the file. etc.

The folder structure of an Angular Project is:

4. How does Angular application bootstrap (start) ?

Following diagram clearly shows that how the Angular application start:

5. What is a decorator?

In Angular JS, decorators are functions that allow a service, directive or filter to be modified prior to its usages. decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code.

6. What is a selector?

A selector is one of the properties of the object that we use along with the component configuration. A selector is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM(Document Object Model).It makes view of  the component possible.

7. Explain the importance of templateURL.

When you have a complex view, then it is recommended by Angular to create that complex view in an external HTML File instead of an inline template. The Angular component decorator provides a property call templateUrl and using this property you can set the external HTML file path.

Read More

PART-1 INTERVIEW TYPE QUESTIONS (ng serve , ng build , --prod ,CLI)

1. What is Angular CLI?

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

It is installed using the  npm package manager :

            npm install -g @angular/cli

2. The difference between npm install vs npm install –g?

npm install without the -g installs the specified package to the package cache of the package in the current directory. This requires you to be in the directory of a package, a directory containing a package.json file.

npm install -g install the specified package to a global package cache. This may be performed from any directory; and will make the installed package's executables available from anywhere on your system.

Simply, without -g packages are installed in local app folder. When installed with -g it gets installed globally.

 

3.What does ng serve do?

Ng serve builds and serves your app, rebuilding on file changes.

It’s Syntax is :

ng serve <project> [options]

ng s <project> [options]

Here <project> is argument and it is name of the project to build. Can be an application or a library.

Basically, when ng serve is executed (run) the server starts listening for requests and processing the ones it receives. it sets up the HTTP or HTTPS listener based on your configuration variables and options.

ng serve can also rebuild in real time, meaning if you change an angular file while it’s running it will rebuild the code base and serve the rebuilt code immediately on next refresh or next call to the listener.

4.What is the importance of SRC and E2E folder?

The key benefits of an end to end testing are listed below:

•  End to end testing tests the complete flow or the action. For example, a complete login process can be treated as one end to end testing. Basically, it tests a specific functionality.
•  It doesn’t improve the code quality as does in Unit testing. Unit testing is a different topic, and an end to end testing and unit testing are completely different.
• An end to end testing run tests on the browser, so it tests your application live, with some real data.

And the key benefits of src/ folder are as below:

• The src stands for source.
• The /src folder comprises of the raw non-minified code.
• The /src folder is used to store the file with the primary purpose of reading (and/or editing) the code. 
• The /src folder contains all the sources, i.e. the code which is required to be manipulated before it can be used. 
• Depending on the project, the /src folder may contain only the pure sources, or the non-minified versions.

So, the /src folder is primarily used to store the source code files before any minification.

5. What are the differences between ng serve vs ng build?

Both commands ng build and ng serve will clear the output folder before they build the project.

But main difference is :

ng serve	ng build
ng serve command builds the angular application in the memory, without saving the artifacts to any external folder and runs the application on the web server.	ng build command builds the angular application and generates the build artifacts which are saved under the /dist folder in the application directory.

It means the   ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server.

6. What does ng build –prod flag?

ng build compiles an Angular app into an output directory named dist/ at the given output path. It must be executed from within a workspace directory.

It’s syntax is ,

               ng build <project> [options]

               ng b <project> [options]

The application builder uses the build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration.

A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying  the --configuration="production" or the --prod option.

 

Read More