Top Angular 4 Interview Questions and Answers

Introducton

The students, web developers, software programmers appearing for competitive exams and entrance tests and willing to make a career in Front end designing may take a notice to these questions during their preparation.
Most frequently asked Angular 4 Questions in an interview are compiled in a following list:

Q 1. What is Angular 4? What are the new features in Angular 4?

A1. Angular 4, a JavaScript framework to develop web applications and in html and the superset of JavaScript- TypeScript comes in with built in features of animations, Router ParamMap, Typescript 2.2 and Angular Universal. Apps developed in Angular 4 are smaller and faster than that of in the previous version. In Angular 4, the template tag has been deprecated and instead, used is  “ng-template” tag. Angular 4 allows the programmers to use ngif/else style syntax in place of ngif.

Q 2. What are Components, Module, Pipe in Angular 4?

Components: Most part of the web development is done with components. Components are the classes that interact with .html file of components. Angular components always have a template. A component must belong to NgModule and for that it needs to be listed in the declarations field of the NgModule. Components control the run time behaviour by implementing various Life-Cycle hooks. In oder to generate a component in Angular 4 using the CLI command, the following syntax is used:
ng generate component component_name;
It will generate the component and add it to the module declarations.
Module: In angular, Module is referred to a place where components, pipes, directives and services are grouped. In order to define a module, NgModule is used using CLI command in Angular. The structure for the NgModule is as follows:

@NgModule ( { 
 declarations: {
  AppComponent
 ] ,
 Imports:   [
  BrowserModule
 ] , 
 providers:  []
 bootstrap:  [AppComponent]
}]

It begins with @NgModule containing an object, declarations, imports, providers and bootstrap.
Pipe: In Angular 1, pipes were called filters and in Angular 2 and Angular 4, pipes. Pipes are used to change the case of the text. Supposedly the programmer wants to display the text in uppercase, this will be done with pipes. Angular 4 comes with built in pipes:

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe 
• Slicepipe

Q 3. What is Angular CLI?

Angular CLI i.e Command-line Interface enables the programmers to create any Angular project with an ease. It comes with commands that help in creating a project very fast. It needs to be installed on the system to work with it. Following is the list of the most important commands required while working with Angular 4 projects:

Component

 ng g component new-component

Directive

   ng g directive new-directive

Pipe

     ng g pipe new-pipe

Service

      ng g service new-service

Module 

ng g module new-module

The reference of any of the above is updated in the parent module app.module.ts.

Q 4. How to apply Animation to the Angular Component?

animations: [ 
   trigger(‘myanimation’,[ 
      state(‘smaller’, style([ 
         transform : ‘translateY(100px)’ 
   })),
      state(‘larger’, style({
        transform : ‘translateY(0px)
   })),
      transition(‘smaller <=> larger’animate(‘300ms ease-in’))
   ])   
]

Q 5. Describe Component Life Cycle Hooks?

Angular offers life cycle hooks which is created, updated and destroyed by Angular itself. The directive and component instances have life cycle hooks managed by the Angular.

The list of the life cycle hooks is as follows:

ngOnChanges()

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.
Called before ngOnInit() and whenever one or more data-bound input properties change.

ngOnInit()

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.
Called once, after the first ngOnChanges().

ngDoCheck()

Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit()

Respond after Angular projects external content into the component's view / the view that a directive is in.
Called once after the first ngDoCheck().

ngAfterContentChecked()

Respond after Angular checks the content projected into the directive/component.
Called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit()

Respond after Angular initializes the component's views and child views / the view that a directive is in.
Called once after the first ngAfterContentChecked().

ngAfterViewChecked()

Respond after Angular checks the component's views and child views / the view that a directive is in.
Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

ngOnDestroy()

Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
Called just before Angular destroys the directive/component.

Suggested Reading

• AngularJS JavaScript MVW Framework
• Sorting Filter in AngularJS using MVC
• Live Character Count using AngularJS
• What is New in Angular 4