Golang Interview 2

1. What Is the Purpose of Angular?

Answer: The purpose of using Angular is to create fast, dynamic, and scalable web applications with
ease, using components and directives.

2. What Are the Essential Building Blocks of Angular?

Answer: 
The concept of Angular is based around Components, which is the first building block. Components
follow tree structures where the App component is the root component. A component encapsulates
the logic of the view, data, and the HTML mark-up. Every app must have at least one part. The more
the parts of smaller sizes, the better is the readability of the code.
Module, the second most crucial building block is a container that groups related components. The
default module in an application is the app module. Blades should be small in size and have related
components.
The other essential building blocks of Angular are:
Templates: Templates are written in HTML and contain Angular elements and attributes. Models
provide a dynamic view to the user by combining information from the controller and view and
rendering it.
Directives: Directives allow developers to add new HTML syntax, that is application-specific. The
behavior is essentially added to the existing DOM elements.
Services: Rather than calling the Http service, Angular allows for the creation of new service classes.
When new Services are created in Angular, they can be used by different components.

3. Tell Us the Difference Between Angular and Angularjs

Answer: 

AngularJS Angular

Based on JavaScript Based on TypeScript

Based on the MVC design pattern Based on components, modules, and directives

No support for mobile app Supports mobile

Can’t build SEO friendly applications SEO friendly applications can be easily created

DI Tokens can be of any type, for example, strings or

Dependency Injection tokens can only
Angular follows a tree-hierarchy for injectors starting
be strings. Also, only the injector is
the root injector, and a nozzle for each component
present.
henceforth.

No support or backward compatibility Backward compatibility can be done without issues. A

 there is a lot of support documentation for the same.

Uses $routeprovider.when() for

Routing is done using @RouteConfig[()]
routing

Requires specific ng directive for each For event binding, () is used and for image or propert
of property, event, and image binding [] is used

4. Mention Some of the Features of Angular

Answer: 
Component-based architecture – applications are written as a set of independent components.
Parts can be created, tested, integrated using Angular CLI.
Great support for complex animations without writing much code.
Because of the component router, Angular supports automatic code-splitting. Hence only the code
required to render a particular view is loaded.
Cross-platform application development.
Template syntax for creating UI views.

5. Discuss Some Advantages of Using Angular

Answer: 
There are many advantages apart from the fact that Angular gives us a break from the MVC pattern,
as it follows a Component-based structure. Here are some more critical benefits –
Supports two-way data binding.
Supports validations and template syntax (both angular and static).
We can add custom animations, directives, and services.
The event handling process is seamless.
Hierarchical Dependency Injection structure (Parent-child).
Provision to facilitate RESTful services and client-server communication.
As a follow-up, the interviewer(s) may ask you more about any of the above advantages. One or two
lines should be sufficient. We will answer each as you read further questions.

6. Question: Can You Think of Any Disadvantages of Using Angular?

Answer: Not as a disadvantage, but in some scenarios, Angular may not be the right fit. For example,
for short-term projects or light-weight websites that have more static content do not require a
complex framework like Angular. Same way, apps that have a microservice design approach will find
too many unused features if they use Angular since it is a complete solution. There is less flexibility
with the developer to choose additional tools.

7. Question: What Is Angular CLI? How Do You Use It?

Answer: Angular CLI automates the end-to-end development process. The app's initialization,
configuration, and development process become straightforward and easy. With a CLI (Command Line
Interface), we can create a new project, add new features, and run tests (unit tests and end-to-end
 tests) by just typing a few simple commands. This way, development and testing processes both
become faster.
For example,
To create a new application, we should type –
Plain Text

1
ng new <appname> [options]
2
to create a class using CLI (in Angular 7), we have to type –
3
ng generate class MySampleClass [options]
4
to generate a component,
5
ng g c <componentname>

8. Question: What Are Directives in Angular?

Answer: With directives, developers can write application-specific custom HTML syntax. The new
language is written in the DOM, and the Angular compiler executes the directive functions when it
finds a new HTML syntax. There are three types of directives – attribute, component, structural.

9. Question: Mention an Example of the Structural Directive

Answer: Structural directives change the structure of DOM. Examples, *ngIf and *ngFor. Usage
example.
<div *ngIf = “product” class=”name”>{{product.name}}</div>
Same way.
<ul> <li *ngFor = “Show product list”>{{product.name}}</li> </ul> 

10. Question: How Is Dependency Injection (DI) Done in Angular?

Answer: 
In Angular, a class asks for services or objects when it is instantiated, which means if a class is invoked,
it doesn’t create any objects, rather it depends on an external source to instantiate objects, services,
or parameters. In this process, an injectable service is created and registered. Injectors can be
configured in three different ways,
@Injectable() decorator for the service.
@NgModule for NgModule.
@Component for the component.

11. Question: What Are Templates in Angular?

 Answer: 
The template is simply an HTML view where binding controls can display data to the properties of the
Angular component. Templates can be defined inline using the template property as –
Template:
<div>My sample Template</div> 
Or can be called from a different HTML file by using @Component decorator’s URL property –
templateUrl: 'app/app.component.html' 

12. Question: How Are Angular Expressions Different From Javascript Expressions?
Answer: Both are similar and can have operators, variables, and literals. However, some differences
between both are –

Angular expressions JavaScript expressions

Conditions, exceptions, and loops (control

All the control statements can be used
statements) cannot be used

Regular expressions cannot be used Regex is widely used

Filters can be used within the expression itself

so that data is formatted before being Such a concept doesn’t exist
displayed

Expressions are evaluated against a scope Expressions are evaluated against the global
object window

If there are issues in evaluating an expressio

Expression evaluation forgives to undefined or
property, JS generates ReferenceError or
null
TypeError.

Functions cannot be declared Any number of functions can be declared

New, comma, bitwise, void operators cannot

These are possible
be used.

You can mention any 3-4 to the examiner. If they specifically ask, you can say that particular point of
difference.

13. Question: Explain the Architecture of Angular

Answer: 
As we have seen in Question 2, Components, modules, templates, etc. are the main building blocks of
Angular. All of these are again based on NgModules, which provide compilation context for
components. When asked in the interview, you can talk about the essential building blocks and then
draw the following diagram (source: angular documentation) to depict the relationship between each
–
 You can see that the view is contained in the template, and properties are bound from components to
the template. The DI services are injected by the injector into the parts as required. Directives are
added to the model. Modules contain the core logic like services, values, functions, and components.

14. Question: Tell Us Some Differences Between Component and Directive

Answer: 
The component is a specific type of directive, that has a view.

Component Directive

@Directive is used to register a

To register component, Annotation used is @Component
directive

The primary purpose of ingredients is to break the Purpose of the `directive is to cre
complex application into smaller, more manageable parts new custom components that are
(components) reusable

Any number of directives can be

Each DOM element can have only one component
one DOM element

Component mandatorily requires @View decorator,

A directive has nothing to do with
template, or template URL to specify the view.

15. Question: What Is the Primary Language Used in Angular?

Answer: 
Angular is based on TypeScript and HTML. HTML is used for the template, and TypeScript (a superset
of JavaScript) is used for components.

16. Question: What Is Data Binding, and What Are the Different Categories of Data Binding?
Answer: Data binding is used to connect the application data and DOM i.e. components with the
template. They can be categorized based on the direction of the data flow.

Data flow
Type Description
Direction

Interpolation -
From source to Interpolates values calculated from applic
Attribute, style, class,
view (one-way) data into HTML
property

From lightview to
Enables applications to respond to users
the source (one- Event
target environment
way)

View-source-view Two-way Changes in the application state automati

 get reflected in the view and vice-versa. F
(two-way)
type of binding, ngModel directive is used

17. Question: Explain the Differences Between One-Way Binding and Two-Way Binding
Answer:

One-way binding Two-way binding

The view doesn’t change or update automatically UI or view is continuously updated

whenever there is a change in the data model. automatically as the data model change
Custom code needs to be manually written to process is similar to the synchronization
reflect changes. process.

18. Question: What Are the Various Filters Supported by Angular?

Answer: 

Filter
Description
name

Uppercase Convert string to uppercase

Lowercase Convert string to lowercase

Date Convert date to the specified format

Currency Convert the number to currency format

Number Format number into a string

Orderby Orders an array by specific expression

Limits array into the specified number of elements; string to specified number of
limitTo
characters

JSON Format object to JSON string

Filter A select a subset of items from the array

You can mention few of them and show an example as well –

<p>Amount: {{ amount | currency }}</p>
19. Question: What Are Ngmodules? Differentiate Between Javascript Modules and Ngmodules
Answer: 
NgModule was introduced after Angular 2, to enable developers to declare all the relationships in one
place with metadata. Thus, in short, NgModules are built from metadata that describes components,
services, directives, pipes etc… Angular then creates a component factory, a class that creates
components.
Difference between JS modules and NgModules –

JS modules NgModules

Bounds all the classes Bounds only declarable classes

All the member classes are

The module’s classes are listed in the @NgModule.declaratio
defined in a single file

Cant extend the entire The entire application can be extended with services using
application with services @NgModules.providers list to add providers

Can import or export any kind It can import or export only those declarable classes that it o
of classes imports from other modules.

20. Question: What Are ngIf and ngFor? Can You Show a Small Example to Use Them?
Answer: 
Just like if and for in other languages, ngIf and ngFor are used as control statements. Example –
<p *ngIf="display">Show this only if the Boolean "display" is true</p>
Where the display is a boolean with the value true or false. Learn more about ngIf.
ngFor is used to loop through and display elements of an array (set of data).
<tr *ngFor="let student of students; let i = index"> <td>{{student.name}}
</td> <td>{{i}}</td> </tr>
The second part (i=index) is optional and only needed if you want to display the index.

21. Question: Which Is the Latest Version of Angular? What Are the New Features in It?
Answer: The latest version is Angular 8. Some features are –
Support for TypeScript 3.4.
Dynamic import for lazy routes.
Web workers.
Differential loading for application code.
Introduction of Angular Ivy – improved payload size, backward compatibility, faster re-build time,
easier debugging etc…
22. Question: What Is a Component?
Answer: The component is a logical piece of code. The component consists of the template (that
contains the HTML (or URL) that needs to be rendered), class (class that defines properties and
methods that supports the view) and metadata (defined using decorator).
Example –
@Component ({ selector: 'my-app', template: ` <div> <h1>{{appTitle}}</h1> 
<div>What is your name?</div> </div>, })

23. Question: Is There a Way to Convert the Typescript Code Into Javascript Code? How Is It Done?
Answer: 
Yes, converting TypeScript into JavaScript is called as transpilation.

24. Question: What Is the Digest Cycle?

Answer: 
Digest cycle is the process of monitoring watchlist to track the changes in the value of the watch
variable. The digest cycle is implicitly triggered, but we can also trigger it manually using $apply()
function.

25. Question: What Is a Pipe? Write a Simple Code to Demonstrate.

Answer: 
Pipe (|) is used to transform input data into desired format. For example,
<p>Price is {{ price | currency }}</p> 

26. Question: Can You Create a Parameterized Pipe in the Above Example?
Answer: 
Yes,
<p>Price is {{ price | currency : “USD$” : 0.00 }}</p> 

27. Question: Explain How You Can Chain Pipes

Answer: We can add any number of filters using pipes -
<p>Average is {{ average | uppercase | number}}</p> 

Question: Is It Possible to Create a Custom Pipe? How?

Answer: 
Yes, we can create custom pipes.
Pipe metadata @Pipe decorator can be imported from core Angular library
Pipe is a class that is decorated with the above metadata (@Pipe({name: 'myCustomPipe'}))
The next step is to define the transformation. For this, the pipe class should implement the method
transform() of the PipeTransform class.
Specify the pipe name in the main code
<p>Size: {{number | myCustomPipe: 'Error'}}</p> 

28. Question: What Is the Purpose of an Async Pipe?

Answer: Async pipe subscribes to a promise or an observable, and returns the latest value. If a new
value is emitted, the pipe marks the component that needs to be checked for any changes.
 <code>observable|async</code> 

29. Question: What Is the Difference Between Pure and Impure Pipe?
Answer:

Pure pipe Impure pipe

Doesn’t get affected by internal Can produce different output for the same input based
state internal state

Can be shared with many different It cannot be shared because the internal state can be a
instances by any factors.

30. Question: Explain the Importance of HttpClient.

Answer: HttpClient is a simplified Http API for Angular applications. It gives better observable APIs,
better error handling mechanisms, testability, request and response interception, typed request and
response objects. The HttpClientAPI rests on the XMLHttpRequest interface exposed by the browsers.

31. Question: How Does Angular Router Work?

Answer: Angular router interprets a browser URL as commands to navigate to a client-generated
view. The router is bound to the links on a page. This way Angular knows to navigate the application
view to the required page when a user clicks on it.

32. Question: What Are the Router Navigation Events?

Answer: 
Router navigation events help track the lifecycle of a route. These are –
NavigationStart,
RouteConfigLoadStart,
RouteConfigLoadEnd,
RoutesRecognized,
GuardsCheckStart,
ChildActivationStart,
ActivationStart,
GuardsCheckEnd,
ResolveStart,
ResolveEnd,
ActivationEnd
ChildActivationEnd
NavigationEnd,
NavigationCancel,
NavigationError
Scroll

33. Question: Is the Routing Module Mandatory for an Application?

 Answer: No, routing module can be totally skipped if there are simple configurations.

34. Question: What Is a Wildcard Route?

Answer: Wildcard route has the path that consists of two asterisks (**) that can match any URL. It is
helpful when a URL doesn’t match any of the predefined routes. Instead of throwing error, we can use
a wildcard route and defining a component for the same.

35. Question: Explain the Lifecycle Hooks

The set of processes that Angular goes through from initiation through end together are called as
lifecycle hooks.

ngOnChanges This method is called when the value of a data-bound property chan

This is called whenever the initialization of the directive/component

ngOnInit
happens.

This method is for detecting and taking action on changes that Angu
ngDoCheck
won't detect on its own.

This is called in response after Angular projects any external conten

ngAfterContentInit
the component's view.

This is called in response after Angular checks the content projected

ngAfterContentChecked
the component.

This is called in response after Angular initializes the component's vi

ngAfterViewInit
and child views.

This is called in response after Angular checks the component's view

ngAfterViewChecked
child views.

This is the clean-up done before Angular destroys the

ngOnDestroy
directive/component.

36. Question: How Are Animations Done in Angular?

Answer: 
To use the animation module, it has to be enabled. For this, the BrowserAnimationModule has to be
imported.
Plain Text

1
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; After this,
import the required animation functions into the component files. Example, import { state, animate,
transition, // ... } from '@angular/animations';
Next, add the animation metadata property within the @Component() decorator in the component
file.
Plain Text

1
@Component({ selector: 'app-root', templateUrl: 'app.component.html', animations: [ // animation
triggers go here ] })

37. Question: What Are the Special Transition States?

Answer: Special transition states are wildcard (*) and void. Wildcard matches any animation state.
The void state is used to configure transitions for elements entering or leaving a page.

38. Question: How Can You Disable All the Animations in Angular?
Answer: 
To disable all the animations, place the @.disabled host binding on the topmost Angular component.
Explain the steps to create a reusable animation.
To create an animation that can be reused, use the animation() method and define the animation in a
separate .ts file. Declare this animation as a const export variable. This can be then imported and
reused in any app components that use the useAnimation() API. Check an example on the Angular
website.

39. Question: Mention Some of the Functions That Help Control Complex Animation Sequences
Answer:

finds one or more inner HTML elements within the current element being animat
query()
the sequence

stagger() applies a cascading delay (timing gap) after each animation

group() runs multiple animation steps in parallel.

sequence(
runs animation steps one after another (sequentially)
)
40. Question: Explain the Features of Forms in Angular.
Answer: 
There are two approaches to handle form data (user inputs) – reactive and template-driven.
Reactive forms can be used when you are using reactive patterns in your application and forms are a
key part of your application. These forms are scalable, robust and testable.
Template-driven forms are used to add simple forms, for example, a sign-up page. These are not as
scalable as reactive forms and should be used only if your form requirements are simple and minimal.

41. Question: How Is Metadata Represented in Angular?

Answer: Metadata is represented using decorators like class decorators, property decorators, method
decorators, property decorators. Example, @Component, @NgModule etc…

42. Question: What Are Class Decorators in Angular?

Answer: Class decorator contains the metadata of the suitable class type. It appears just before the
class definition and declares the class to be of a certain type. Some class decorators are —
@Component, @NgModule, @Pipe, @Directive, @Injectable.

43. Question: Explain the Difference Between Annotations and Decorators in Angular
Answer: 
Annotations are hardcoded features of Angular and store array in it. The compiler creates am
attribute of the annotated class and instantiates an object of the same name, passing the metadata to
the constructor.
Decorators, on the other hand, are functions that receive the object to be decorated. After receiving,
they are free to modify the object in the way it likes. Decorators are implemented by the TypeScript
compiler.

44. Question: What Is the Difference Between Class Decorators and Class Field Decorators?
Answer: Class decorators appear just before class definition, whereas class field decorators appear
just before a field in the class definition. Examples of class decorators are @Component, @NgModule
etc… Examples of a class field decorator are @Input, @Output etc…

45. Question: What Is Package.json? Explain its Purpose

Answer: 
With json package, it becomes easy to manage the project dependencies. We can mention details like
the version, language etc… in package.json. For example, if typescript is used in our project, we can
mention typescript and its version in package.json. Examples are metadata.json, tsconfig.json etc…

46. Question: What Does {{}} Represent? What Is It Used For? Show an Example

Answer: 
The double curly braces represent interpolation. It is a special syntax. Angular converts it into
property binding. You can think of it as an alternate for property binding. The name of the component
is written inside the inner curly braces. During execution, the name is replaced by the actual string
value of the property. For example,
<h2> {{apptitle}} <img src="{{imgname}}" style="height:30px"> </h2> 
Angular will evaluate and replace apptitle and imgname with their actual values.
47. Question: What Does the Representation [()] Mean?
Answer: This is a representation for ngModel used for two-way data binding. It is written as
[(ngModel)] = “propertyvalue”.

48. Question: What Is a Bootstrapping Module in Angular?

Answer: The root module that you bootstrap to launch the application is called as a bootstrapping
module. Every Angular application has a bootstrapping module. It is also called as the AppModule. The
bootstrapping module is mentioned in the AppModule class.
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule,
HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

49. Question: Talk About Some Differences Between Promise and Observable
Answer: 

Promise Observable

Executes immediately as soon as

Executes only when the subscription starts
created

Used with .then() clause Has chaining and subscription to handle complex applica

Errors are pushed to child Centralized and predictable error handling by the use of
promises subscribe() method

Provides only one value Can provide multiple values over time

50. Question: What Is the Single Page Application? How Is It Different From Traditional Web
Technology?
Answer: In a single page application (SPA), only the home page (index.html) is maintained throughout
even though the URL keeps on changing. It is faster and easier to implement when compared with
traditional web technology. In traditional technology, every time a user makes a request, the request
is passed on to the server. This takes more time.

51. Question: What Are the Different Types of Compilations in Angular?

Answer: 
Two types of compilations – AOT (Ahead-of-Time) and JIT (Just-in-Time).

52. Question: List the Differences Between Just-In-Time (JIT) Compilation and Ahead-Of-Time (AOT)
Compilation
Answer: 
With JIT, the compilation happens during run-time in the browser. It is the default way used by
Angular. The commands used for JIT compilation are –
 ng build ng serve 
In AOT compilation, the compiler compiles the code during the build itself. The CLI command for aot
compilation is -
ng build --aot ng server –aot
AOT is more suitable for the production environment whereas JIT is much suited for local
development.

53. Question: Which One Is Better out of AOT and JIT?

Answer: 
AOT reduces the load and bootstrap time of the application. The pages also load faster. Any errors are
also shown during the time of application build itself. Hence, AOT is a better option.

54. Question: Discuss Some Differences Between Angular and Jquery. Which One Is Most Suitable for a
Complex Website With Many Workflows?
Answer:

Angular jQuery

Front end framework based on TypeScript and JS library that supports animation and DOM
JavaScript manipulation

Two-way data binding is possible Two-way data binding cannot be done

Form validation can be done No option for form validation

Supports RESTful apis No support for RESTful apis

For a complex website with multiple workflows, Angular is more suitable and easier to develop and
maintain.

55. Question: What Is an Angular Library? Can You Create Your Own Library in Angular?
Answer: 
Angular library is a set of generic solutions that other developers have put together to be re-used. We
can create own library using Angular. These libraries can be published and shared as npm packages. A
library should be imported in the app.

56. Question: What Do You Know About the NPM Package?

Answer: 
packaged as npm packages. Npm packages can be downloaded using the npm CLI client.

57. Question: Write a Sample Code to Create a Library

Answer:
You can use the Angular CLI for this. The following set of commands generates a new library skeleton
–
ng new my-workspace --create-application=false cd my-workspace 
ng generate library my-lib