Angular 4 Interview Questions and Answers

Angular is a JavaScript framework for building client web applications in HTML, CSS and Typescript

Angular 4 is offered view-engine improvements and code-generation reductions. Angular 4 released in March 2017. The Angular 4.3 upgrade was released in July and featured HttpClient, which provided a smaller, easier-to-use library for making HTTP requests. Angular 4.3 also has an attribute, @.disabled, for conditionally disabling animations as well as new router life cycle events.

Angular 4 Features:

• View engine with less code
• Router ParamMap
• Animation Package
• Improved *ngIf and *ng for
• Size smaller and improved the speed
• Pipes and Source Maps for Templates
• TypeScript 2.1 & 2.2 compatibility
• HTTP request
• Apps Testing Simplified
• Introduce Meta Tags
• AS keyword
• Added some Forms Validator Attributes
• Added Compare Select Options
• Enhancement in Router
• Added Optional Parameter
• Improvement Internationalization

In Angular4.3, Introducing Http Client, a smaller, easier to use, and more powerful library for making HTTP Requests.

• New router life cycle events for Guards and Resolvers
• Four new events:
• GuardsCheckStart
• GuardsCheckEnd
• ResolveStart
• ResolveEnd join the existing set of life cycle event such as NavigationStart.
• Conditionally disable.

Directives and components have a lifecycle managed by Angular as it creates, updates, and destroys them. Each interface has a single hook method whose name is the interface name prefixed with ng. For example, the OnInit interface has a hook method named ngOnInit.

Angular calls these hook methods in the following order:

• ngOnChanges: when an input/output binding value changes
• ngOnInit: after the first ngOnChanges
• ngDoCheck: developer’s custom change detection
• ngAfterContentInit: after component content initialized
• ngAfterContentChecked: after every check of component content
• ngAfterViewInit: after a component’s views are initialized
• ngAfterViewChecked: after every check of a component’s views
• ngOnDestroy: just before the directive is destroyed

The HTTP Interceptors are used to Set Http Headers Request in Angular 4 using the import from “@angular/common/http”. The HTTP Interceptors are available in Angular 4.x versions.

The HTTP Interceptors are not supported in Angular 2. We are creating the Http Client Injectable class to achieve this. You can see the below examples for set http headers request with and without HTTP interceptors.

Module in angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application.

In angular, Ngmodule is used.When you create a new project using the Angular –cli command, the ngmodule is created in the app.module.ts file by default

Angular 4 uses the <ng-template> as the tag instead of <template> which is used in Angular2. The reason Angular 4 changed <template> to <ng-template> is because there is a name conflict between the <template> tag and the html <template> standard tag. It will deprecate completely going ahead. This is one of the major changes in Angular 4.

Two types of error:

• If the backend returned an unsuccessful response like – 404, 500 and so on.
• If something goes wrong in the client side like -network error etc.

In the both cases – We are using Http Error Response and return the useful information on what went wrong in this call!

Components are just simple classes which are declared as components with the help of component decorators.

It becomes easy to create an application which already works, with the help of angular CLI commands. “Ng generate” is used to generate components, routes, services, and pipes. Simple test shells are also created with the help of this CLI command. For generating a component in angular4 with the help of CLI command, you need to follow the following syntax-

ng generate component component_name;

It generates the component and adds the component to module declarations.

Here are the elements which are present in the component directory structure anf modules:-

module.ts- In this, the angular module is declared. @NgModule decorator is used which initializes the different aspects of angular applications. AppComponent is also declared in it.

components.ts- It simply defines the components in angular and this is the place where the app-root sector is also defined. A title attribute is also declared in the component.

Component.html– it is the template file of the application which represents the visual parts of our components.

Materials offer a lot of built in modules for your project. features such as autocomplte, data picker, slides, menus, grids and toolbar are available for use with materials in angular 4

The HTML elements like p (paragraph) or h1 (heading) have some content between the tags. For example, <p>this is a paragraph</p> and <h1>this is a heading</h1>. Now, similar to this, what if we want to have some custom text or content between the angular tags like  <app-tax>some tax-related content</app-tax> This will not work the way it worked for HTML elements.  Now, in such cases, the <ng-content> tag directive is used.

When a component is dependent on another component the dependency is injected/provided during runtime.

It is a method which is subscribed to an observable. Whenever the subscribe method is called, an independent execution of the observable happens.

The Angular application is made using the following:

• Modules
• Component
• Template
• Directives
• Data Binding
• Services
• Dependency Injection
• Routing

It’s to give Angular information on a particular module’s contents, through decorator properties like: declarations, imports, exports, providers, etc.

forRoot and forChild are conventional names for methods that deliver different import values to root and feature modules.

Components, pipes, directives

Called once, after the first ngOnChanges.

A pipe that is executed during every component change detection cycle (i.e., often – every keystroke, mouse move).

An impure pipe that accepts a promise or observable as input and eventually returns emitted values.

• Angular elements
• Ivy Renderer
• Closure compiler and Bazel compiler
• Service worker
• CLI workspace
• Upgrading to RxJS
• Tree shaking
• Angular material and Component dev kit
• Schematics & NG- Update
• Router language support
• Multiple Valuators for your forms

• Typescript 2.7.x supports
• Improved decorator error messages
• Fix platform-detection example for Universal
• Added to supports of Native-Element
• Added Optional generic type for ElementRef
• Updates on NgModelChange
• Add type and hooks to directive def
• Enable size tracking of a minimal CLI render3 application
• Add canonical view query
• <template> is no longer supported you have to use the previously existing <ng-template> instead.
• The Angular team have decided to extend the long-term support (LTE) to all major releases starting with v4.
• Web pack module bundler has been updated to version 4