Explore topic-wise InterviewSolutions in .

In Angular 4, TEMPLATE reference variables ALLOW users to access an instance of a directive or component or a DOM present in the template. These are DEFINED by a hash sign (#) combined with a name as an ADDITIONAL DOM element’s attribute.

In Angular 4, components have their view, whereas directives are just “behavior” added to the existing components and ELEMENTS. Simplifying it, components EXTEND directives. There can be many directives on a host ELEMENT, but only one COMPONENT.

Angular 5 has plenty of new features. Few of the most important ones are mentioned below:

• ADDITION of a build optimizer which REMOVES unnecessary applications and codes.
• SUPPORT for DOM and Angular Universal State Transfer API.
• Optimized standardization across various browsers.
• Addition of a new HttpClient and lifecycle events router.
• Creation of Angular 5 PROJECTS by default with CLI 1.5.
• Multiple name support for directives and components.

In Angular 4, the ForRoot method is USED when the MODULE is "eager," not lazy-loaded. Except for lazy MODULES that loaded on-demand with their factory, Angular CREATES a factory for all other modules. The ForRoot method allows users to access providers from any point in the application that is not lazy-loaded. This ultimately will enable users to have different configurations for different load cases.

If Else statement in Angular 4 can be written using following syntax-Open /src/app/app.components.ts:
EXPORT class AppComponent {
Title – ‘app works!;
}

Open /src/app/app.component.html

The user is logged in.
in order to login PLEAE CONTINUE.
Then statement can be write using following syntax-
please login to continue .
Hi ABC, logout now .

No coding level changes are required to enhance a project present in Angular 2 to Angular 4. USERS only have to update the tsconfig.json and package.json files. Some minor adjustments may be needed DEPENDING on project types. After updating the DATA, clean out your node_modules directory, run npm install and npm start and you will be started with the Angular 4.

To create a new component in ANGULAR 4 USING CLI,

• OPEN PROJECT Directory
• Run any one of the below mentioned the syntax

We have the most extensive question bank to help you answer Angular 4 interview questions and answers.

ng component name

or

ng GENERATE component componentname

To set HTTP Request Header in Angular 2, create the HTTP Client INJECTABLE class and inject the HttpClient OBJECT in the Component. Developers use HTTP Interceptors to set Http Request Header in Angular 4. To achieve this. Write an interceptor for ADDS a header for every request and after creating the interceptor, register it using HTTP_INTERCEPTORS in the @NgModule().

AngularJS is the very first version of the Angular. A TOOL named AngularCLI is used to generate Angular COMPONENTS. Angular JS which is a client-side framework works with JAVASCRIPT and still SUPPORTED but not compatible with Angular any more. Simplifying it, AngularJS is the old version and Angular is the newest one.

Here are a few significant differences between Angular 2 and 4 which developers are going to notice.

• Angular 4 has MANY inbuilt ANIMATION packages which were missing in Angular 2.
• Angular 4 has its TEMPLATE tag called “ng-template.” The PREVIOUS version USES only “template.”
• Compared to Angular 2, in the newest version, developers can use else syntax with Nglf for excellent UI handling.
• A new template syntax addition “as keyword” in Angular 4 which can be used to simplify to the “let” syntax.
• Simplified “HTTP request” and application testing in Angular 4.

ANGULAR 4 is an advanced JAVASCRIPT framework which uses HTML, JavaScript, and TypeScript web applications and APK apps. It’s a superset of JavaScript and offers excellent built-in features for HTTP service, ANIMATION, navigation, menus, TOOLBAR, materials, etc.

We need NGMODEL in angular 4, as it POSSESSES the property of binding and ENCAPSULATING the input elements of DOM. In short, we need Ngmodel in angular 4 for two –way-data-binding process.

To debug ANGULAR 4 projects using visual STUDIO 2017, we have to follow the below-mentioned steps.

• Create our project as Asp.Net Core Web Application and use the “Angular” project template.
• Next to "IIS Express", click the down-arrow to set the web browser to GOOGLE Chrome.
• Run debugging and the SCRIPT debugging being enabled message will pop up by Chrome.
• Continue further by setting a breakpoint on "this.currentCount++;"in counter.component.ts.
• Now visit the Counter SCREEN to click Increment and the breakpoint set will be hit.
• While performing this, make sure to turn off the Chrome Developer Tool running

Note- make sure that your chrome developer tools will run on the same time during the process of debugging

While creating an Angular 4 component, a shadow DOM is created by default and our template GETS loaded into it. It’s a DOM element subtree which renders as PART of the document but not into the present main document DOM tree. It is used by BROWSERS to determine the rendered object on the PAGE. JavaScript programs use it to modify content, page styling and structuring.

Angular 4 is the upgraded VERSION of AngularJS, which is the very first introduction of AngularJS. The newer version Angular 4 has fulfilled several drawbacks of its PREDECESSOR and introduced EXCELLENT features such as Router ParamMap support, Dynamic Components with NgComponentOutlet, latest TypeScript functions, simplified HTTP request, better Animation package, mobile-oriented FRAMEWORK, server-side RUN and more, which were are not available with the AngularJS.

• In order to install primeng UI LIBRARIES or primeng UT components: Install primeng using the COMMAND- NPM install primeng-save
• In dependencies section include package.json
• Goes to the setting, and configure PrimeNG in app.module.ts
• Include import { DataListModule } from ‘primeng/primeng’;
• Import DataListModule and include primeng components using command bikes.component.html

In Angular Material, Flex is a layout which BASICALLY is a component ENGINE allowing you to easily create Flexbox-based PAGE layouts with a specific set of directives AVAILABLE for your template. In addition, it eradicates the need for a separate styling sheet.

In ANGULAR 4, the CDK stands for Component Dev Kit which is a set of TOOLS to implement COMMON INTERACTION PATTERNS throughout the code.

The filter is a vital aspect in AngularJS as well as ANGULAR 4. It is the method of separating an item from a group of items INSIDE an array or object arrays by SPECIFYING a particular type to it.

currency: This filter is used to FORMAT a number to a currency format.
date: This filter is used to format a date to a specified format.

ANGULAR Material is a User-Interface component library that is used in Angular 4 to help in developing attractive, stable and functional web pages and applications while maintaining the best practices INVOLVED such as browser portability, device independence, and graceful degradation. Its main USE is to create BEAUTIFUL and responsive websites that are optimized for SPEED in browser-rendering.

When a user interacts with an Angular 4 application through keyboard movement, MOUSE CLICK, or a hover, they generate an event. These events are handled in order to perform a specific action via Event Binding. Event Binding is basically one-way data binding which sends information within the view and component class.

Note: These are fundamental interview QUESTIONS on angular 4 to give you an OVERVIEW of the SUBJECT.

A Transpiler, which runs on TYPESCRIPT is used in Angular 4 to COMPILE all the TypeScript code created in the DEVELOPMENT process and convert them into JavaScript for rendering into the browser.

JIT

During compilation of code in Angular 4, Just-in-TIME (JIT) compilation (also KNOWN as dynamic translation or run-time compilations) is used to execute computer code involving compilation during the run time of a program, precisely, prior to execution.

In Angular 4, Ahead-of-Time(AOT) compilation is used to convert your code during the BUILD time before it LOADS on the browser. This creates a scope for faster rendering in your browser.

The JWT Interceptor is used in Angular 4 to intercept HTTP requests from the application itself when the user logs in to add a JWT auth token in the Authorization header. The interceptor is implemented using the HttpInterceptor class.

Note: These are BASIC Angular 4 INTERVIEW QUESTIONS and answers to PROVIDE a brief insight into Angular Development.

To add an external js FILE into Angular 4, follow these STEPS:

• REFER the SCRIPTS inside the angular-cli.json file like this:
  "scripts": [ "../path" ];
• Add this into typings.d.ts :
  declare var variableName:any;
• Import the above onto your js file as:
  import * as variable from 'variableName';

CanActivate is a feature in the Angular INTERFACE FOCUSED on SECURITY. It prompts the USER to login to the APPLICATION during the routing of a page.

In Angular 4, functionalities, logic and code which are executed before the loading of a ROUTE is CALLED Guards. Guards check the route access, child route access, new feature in a module and prompt the user of any unsaved CHANGES.

Routing essentially means NAVIGATION in-between PAGES. Sites having links redirecting you to another page is CALLED routing in Angular 4.

There are VARIOUS ways available to install Angular 4.

• Install the Angular CLI
  npm install -g @angular/cli
• Create a Project
  ng NEW MyApp
• SERVE the application
  cd MyApp
  ng serve --open

This information can be asked during angular 4 interview QUESTIONS.

String interpolation in Angular is a one-way data-binding technique used to take the output data from a typescript code and into an HTML template. It uses the template expression through DOUBLE curly braces {{ }} displaying the data from a component to view.

Here’s an EXAMPLE to show you how to USE String Interpolation:

import {Component} from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl:’./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export CLASS AppComponent {
TITLE=’string interpolation in tutorialandexample’;
}

A TEMPLATE STATEMENT in Angular is USED to respond to an EVENT raised by a binding target, element, component or directive. Here is the syntax of a template statement:

(event)="statement"

In Angular 4, there are four types of component DECORATORS:

• Class decorators
• Property decorators – used for properties inside classes
• Method decorators – used for methods inside classes
• Parameter decorators – used for parameters inside class constructors

This INFORMATION is usually ASKED in interview QUESTIONS on Angular 4.

Promises HELP to FUNCTION with asynchronous operations. They work in two conditions. They either return a single value when the promise resolves or an error message when the promise gets rejected. Whenever a request is made from a promise, it becomes a non-cancellable COMMAND.

On the other hand, observable can be REGARDED as a stream. It can be anything, a stream of data or events. It can be CANCELED, unlike promise. An observable can be easily converted into a promise by specifying a command “toPromise( )” with the command to do so.

JavaScript

JavaScript is a PROGRAMMING language designed for web pages. It is developed by NETSCAPE and Sun and it is initiated by Netscape and called LiveScript. It is used to enhance web pages with dynamic and interactive features.

ECMA is an abbreviated FORM of European Computer Manufacturer's association. In general, ECMAScript is a standard used in SCRIPTING LANGUAGES such as Jscript, JavaScript.

We can use the ngx-cookie-service node package to save cookies in Angular 4.

• Install the node package with the following syntax:
  npm install ngx-cookie-service –save
• Now, we have to add the cookies service to app.module.ts as a provider.
  @NgModule({
      ...,
      providers: [ CookieService ]
  })
• Further, CONTINUE by importing and injecting it into a component.
  import { CookieService } from 'ngx-cookie-service';
  constructor( PRIVATE cookieService: CookieService ) { }
  ngOnInit(): void {
  this.cookieService.set( 'Test', 'Hello World' );
  this.cookieValue = this.cookieService.get('Test');
  }

There are three types of loading namely eager loading, lazy loading, and preloading. In general, eager loading is a module that NEEDS to import into the Angular 4 application module by importing metadata of @NgModule decorator. Additionally, eagerly loading is useful for small size angular applications in which all feature modules will be loaded before starting of the application.

In general, deep LINKING TAKES a specific page DIRECTLY without searching and traversing application from the landing page. It helps in GENERATING and getting indexes so that the specific links can be easily SEARCHED by the search engines.
Angular 4 support deep linking using ‘#’

Note: Our AIM while creating Angular 4 INTERVIEW Questions, is to help you grow as a Angular Developer. The questions mentioned here have been asked by LEADING organizations during technical rounds of the interview process.

Angular 4 services contain functions or METHODS that consistently maintain the data of an application throughout its LIFE which implies that data will remain secure and available at all times. The main aim of angular 4 services is to share BUSINESS logic, data, information, MODELS with SEVERAL components of angular 4 applications.

ElementRef is BASICALLY a class or reference types used for abstraction. The class structure holds the native elements and ElementRef is used to access the native elements

@COMPONENT({
selector: 'sample',
...EXPORT class SampleComponent{
constructor(private hostElement: ElementRef) {
   //outputs
   console.log(this.hostElement.nativeElement.outerHTML);
}

ElementRef is used to break the ABREACTION rather than using SPECIFIC API DOM like textContent

Unit TESTING or private testing is used to test the system’s COMPONENTS. This process is s best practice to test small separate pieces of CODE. If the unit testing depends on any of the external resources such as networks, APIS and databases, then it won’t be listed as a unit test.

Angular 4 has SEVERAL new FEATURE additions. As most of the changes are implemented to the background rather than its core functionality of coding, it’s being called an INVISIBLE makeover to its previous version. The compiler error messages have improved as well as the code GENERATION. According to the Angular team, patches will be released every week. It also has the potential to improve performance when used appropriately.

• TypeScript Compatibility
• Dynamic Components
• Source Maps for Templates
• Router ParamMap
• AOT Compilation
• Revamped *ngIf and *ng For
• Animations Package
• Angular Universal
• Flat ES Modules
• Smaller and Quick

One of the most important and powerful features of any software programming language is Data Binding. Data binding is the AUTOMATIC and instantaneous synchronization between two different layers of AngularJS i.e., model and view. There may be a situation in which the developer may have to transfer data from component(model) to view or vice versa. This problem can be easily tackled through the concept of data binding.

• Property Binding: Updating the value of a certain variable in the model layer and then displaying it in view is the PRESENTATION layer, this is known as Property binding.
• Event Binding: Updating or sending the information or the values of certain variables from the view layer that is also known as the presentation layer to the component that means the model layer, this is what Event binding is.
• Two WAY Binding: It is the combination of both Property and Event binding.

The @NGMODULE DECORATOR is a method that TAKES a single metadata object that tells ANGULAR how to compile the application.

• imports
• exports
• providers
• schemas
• entryComponents
• declarations
• id
• bootstrap

Here’s an example of creating a pipe which reverses the order of letter WITHIN a string. Following is the code to be found in the reverse-str.pipe.ts file.

IMPORT { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverseStr'})
export class ReverseStr implements PipeTransform {
   transform(value: string): string {
      let newStr: string = "";
      for (VAR i = value.length - 1; i >= 0; i--) {
         newStr += value.charAt(i);
      }
      return newStr;
   }
}

Now, including the custom pipe as a declaration within the Angular app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ReverseStr } from './reverse-str.pipe.ts';
@NgModule({
DECLARATIONS: [
   AppComponent,
   ReverseStr
],
imports: [
   BrowserModule,
   FormsModule,
   HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Here’s how to use the custom pipe in your TEMPLATES:

{{ user.name | reverseStr }}

In Angular 4, Dependency Injection refers to an important APPLICATION design PATTERN that is USED to increase the efficiency and modularity of an application. It is basically a coding pattern in which the class requests for dependencies from external or third-party SOURCES rather than actually creating them itself.

There are basically three TYPES of DIRECTIVES in Angular 4, they are::

• ATTRIBUTE Directives
• Structural Directives
• Components

Angular 4 is FAST compared to its previous versions due to various reasons. Here are some of them mentioned below:

• It reduces the size of generated code bundle up to 60%.
• The animation part moved out to a separated package @angular/animations
• It is backward compatible.
• Introduction of PROPER disapproval phases for easy adjustment of codes.