Angular

Question 1

What makes a “single page application” (SPA) different from a normal web page?

Answer 1

A single-page app reloads only the data necessary for the user. SPAs fix the problem of MPA’s where you have to reload the entire page and request a new HTML for even the smallest changes in content. The user loads the page once and then all requested data is transmitted via JSON files

SPA struggles in storing Browser history.

Question 2

Explain the difference between server-side and client-side rendering

Answer 2

Client side rendering manages the routing dynamically without refreshing the page every time a user requests a different route. It will render all HTML, CSS, and JS files, so the screen will take longer to load.

Server-side rendering is able to display a fully populated page on the first load of any page, whereas client side displays a blank page first. Server-side loads HTML and CSS files while JS boots up in the background

Question 3

What are some features of the Angular Framework?

Answer 3

• Cross Platform
• Built in structural elements - Injectors, Components, Pipes, Services
• High Speed and Performance

Question 4

How does TypeScript relate to JavaScript? What are the major benefits of using it over JavaScript?

Answer 4

TypeScript is an open source superset of JavaScript (JavaScript +) that compiles to JavaScript. TypeScript offers type annotations which provide optional, static type checking at compile time. JavaScript can be used as valid TypeScript. Considered an improved JS

Question 5

List the data types of TypeScript

Answer 5

Boolean
Number
String
Void
Null
Undefined

Question 6

How would you create a new Angular app?

Answer 6

ng new (project-name)

Question 7

What is a component? How would you create one? List some other commands using the Angular CLI

Answer 7

Components are the most basic building block of an Angular app. They are made up of an HTML Template, class and metadata

To create a component - ng g c

ng s -o : start server
ng g s
ng new
ng serve

Question 8

What files make up a component? What is the “spec” file used for?

Answer 8

component. spec.ts
component. ts
component. html
component. css

The spec file is used for tests in your source files

Question 9

Explain the relevance of npm to Angular projects. Which file does npm use to track dependencies?

Answer 9

Angular applications depend on npm packages for many of its features and functions. The framework, Angular CLI and the components are all packaged as npm packages and distributed using the npm registry.

npm uses json files to track dependencies

Question 10

List some decorators for Angular apps?

Answer 10

Decorators are a function that adds metadata to a class. They use the @ prefix

Class Decorators:
@Component - Defines a Component
@NgModule - Defines a Module
@Pipe - Defines a pipe
@Injectable

Question 11

What is a directive and what are the different types? How do you tell these directives apart with syntax?

Answer 11

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

Directive Types:
Components
Attribute Directives
Structural Directives

Attribute Directives:
NgClass - adds and removes CSS classes
NgStyle - adds an dremoves HTML styles
NgModel - adds two way data binding to HTML elemnt

Structural Directives:
ngIf - Used for a condition
ngSwitch - used as a switch statement
ngFor - used as a for loop

Question 12

What is the benefit of using a directive like NgClass over the class attribute, or even property binding to the class attribute?

Answer 12

The ngClass directive allows you to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added.
ngClass is more powerful. It allows you to bind a string of classes, an array of strings, or an object.

Question 13

What is a pipe? What is a service?

Answer 13

Pipes allow you to transform data before seeing them in the view

Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once

A service is a stateless object and provides some very useful functions. it is a class with a specific purpose. They are used to share data among many components, implements application logic, and external interactions like a database connection

Question 14

How would you create a custom pipe?

Answer 14

1. Create a pipe class and decorate it with the decorator @Pipe — ng g p
2. Supply a name property to be used as a template code name
3. Register your pipe in the module under declarations
4. Implement PipeTransform and write transformation logic
5. Use your pipe in the HTML using a ‘|’

Question 15

How does dependency injection work in Angular?

Answer 15

Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them. Angular's DI framework provides dependencies to a class upon instantiation.
This is a technique in which class receives its dependencies from external sources rather than creating them itself. It's used in the constructor

Question 16

What is an Angular module? What properties should you set inside it?

Answer 16

In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application. Should have components declarations imports and providers

Question 17

What’s the difference between a JavaScript module and Angular module? What are some common Angular modules?

Answer 17

A JS module is a file within JS code, usually containg a class or library of functions to serve a specific purpose.

An Angular module is what groups components, pipes, services, and other files together in the declarations list

BrowserModule. When you want to run your app in a browser. …
CommonModule. When you want to use NgIf , NgFor .
FormsModule
ReactiveFormsModule
RouterModule
HttpClientModule

Question 18

How have you used the HttpClient? What methods does it have and what do they return?

Answer 18

HttpClient is introduced in Angular 6 and it will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service.
Request()
delete()
get()-returns Observable of JSOn response type
head()
jsonp()
options()
patch()
post()-returns Observable instance of given response type
put()

Question 19

What is an Observable? What’s the difference between it and a Promise?

Answer 19

Observable is an interface used to handle one or multiple asynchronus operations. It uses subscribe to get information

Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn’t matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case.

Question 20

What forms of data binding does Angular support?

Answer 20

String Interpolation - one way from data source to view object
Property Binding - The Property binding allows us to bind HTML element property to a property in the component.
Event Binding - Event binding allows us to bind events such as keystrokes, clicks, hover, touch, etc to a method in component.
Two Way Data Binding - changes made to our model in the component are propagated to the view and that any changes made in the view are immediately updated in the underlying component