Typescript and Angular

Question 1

What is the general structure of an HTML document and what are the different parts of the document used for?

Answer 1

The Html document is divided into several parts, these are head part and body part. In the head part there is a <title> tag that we use to give a title for the page and it is visible on the web browser url. And also, we can add css styling in the head part. The body part is where we design the structure of the webpage by using different tags.</title>

Question 2

What are some HTML elements you’ve used?

Answer 2

Some elements that I used are <div>, <p>, <ul> <section> , <h1> and more

Question 3

What are inline and block elements?

Answer 3

Inline elements are those which do not start a new line and take up to the width of the content of the element

While block elements are those which start on a new line and take a full width of the available space. Moreover, we can have inline block elements inside the block elements, but we cannot have block elements inside inline elements

Question 4

What is the purpose of assigning ID’s and Classes to elements?

Answer 4

The purpose of assigning id’s and classes to elements is that they will use for the purpose of styling and for Js functions. For example, we can select elements by their id and implement styling for that specific id content or we can add interaction for that specific element in JS by selecting the element by its id.

Question 5

How do I create an ordered list or an unordered list?

Answer 5

We can create ordered list by using <ol> tag and we can also create an unordered list by using <ul> tag. For both lists we can use <li> tag to display the lists

Question 6

What new features were introduced in HTML5?

Answer 6

Vector Graphics, Audio and video, preload videos, regular expressions, nav tag, email attribute.

Question 7

How can I attach Javascript to an HTML file?

Answer 7

We can attach Js to html using the

 tag. We can either embed Javascript direcly into the HTML inside script tag: `
const js = “Javascript code”
`, or more likely link to an external file containing our js source using the “src” attribute: `<script src=jscode.js>

`.

Question 8

What is CSS?

Answer 8

Cascading style sheet; determines how a given element is presented on a webpage; gives more control over the appearance of a webpage to the creator

Question 9

What are the three different ways to apply CSS to HTML elements? Which one takes priority?

Answer 9

Inline (Highest Priority): Applied directly to an HTML element using the “style” attribute.
Internal: Internal styles are defined within the head section of an HTML document.
External: External styles are defined in a separate CSS file and linked to your HTML document.

Question 10

What are the different ways we could select HTML elements for applying styling rules? How are they prioritized?

Answer 10

Element Selectors
Class Selectors
ID Selectors
Attribute Selectors

Question 11

What is the CSS box model?

Answer 11

CSS box model is a container that has(contains) multiple properties like borders, margin, padding, and the content. It is used to create the layout of webpages.

Content: displays text, images

Padding: creates space around the elements

Border: surrounds the content and padding it can be styled with color and width

Margin: create space around the border.

Question 12

What is responsive web design?

Answer 12

RWD (Responsive Web Design) is the development of a website that responds to accommodate to different screen sizes and orientations. To achieve this we need to implement flexible layouts, media queries and flexible media.

Question 13

Could you provide a short description of Javascript?

Answer 13

JavaScript is a dynamic and loosely typed programming language. It is used for web development, it allow us to implement dynamic features on web pages. Also runs on a single thread with an event loop handling events

Question 14

What does it mean for Javascript to be loosely typed?

Answer 14

Loose typing means that no type checking of data fields is performed, which can lead to errors/undefined behavior when a certain type is expected, but data of another type is received. For example, if you expect two numbers but you get strings and then divide them by each other.

Question 15

What does it mean for Javascript to be interpreted?

Answer 15

Javascript does not need to be compiled to be run. It is immediately run by the browser without any conversion into another language.

Question 16

What are the types in Javascript?

Answer 16

The primitive types are:

Null – A singleton set representing a null value

Undefined – A singleton set representing an undefined value

Boolean – A binary state consisting of either true or false

Number - Equivalent to a double in java, i.e. 64-bit IEEE 754 floating point.

BigInt – An integer (whole number) value having arbitrary size/precision. Unlike in java where an int is of size 4 (32 bits).

String – A sequence of UTF-16 encoded characters. Practically identical to Java String.

Symbol – A guaranteed unique key value used for Objects.

Plus programmer defined Objects.

Question 17

What is type coercion in Javascript?

Answer 17

The conversion of values from one data type to another (such as strings to numbers).

Question 18

What are truthy and falsy values in Javascript?

Answer 18

Truth values are values that evaluate to true in context of a boolean.
Example of falsy values:
false
0
-0
“”
null
undefined
NaN

Question 19

What is the difference between == and === in Javascript?

Answer 19

Tripple equals “===” checks for strict equality, so will return false if the operands are of different types. This is unlike double equals “==” which will attempt to coerce the operands to compare them.

Question 20

What are the different ways to declare a variable in Javascript?

Answer 20

let – Declares a variable following normal block scoping rules.

var – Like let, except scope is global; not confined to it’s defining block. – hoisted to the top of the file

const – Immutable: cannot change value or be redefined. Similar to let in scoping rules.

Question 21

What are callback functions in Javascript?

Answer 21

Is a function that is passed as an argument to another function, and it is called after the main function has finished its execution.

Question 22

What is the DOM?

Answer 22

Document Object Model is the representation of the HTML document in memory. its generated and can be manipulated by web API’s to change the look of the page as it is being viewed. When a web page is loaded the browser will load a DOM for that page and it allows Js and other programing languages to access and manipulate the content of the page.

Question 23

How can I select & modify HTML elements in Javascript?

Answer 23

document.getElementById, document.querySelector(), document.querySelectorAll(), document.getElementByClassName().

Question 24

How can I have Javascript execute some function when a button is clicked?

Answer 24

Use an event listener on that variable on two different ways. I can use button.onclick() or cutton.addEventListener (“click”, functionname()).

Question 25

What is an EventListener and why is it used?

Answer 25

It is a build in function in JS that allows us to wait for user interaction to then run some code. We normally use it on buttons, inputs, or when a user types or clicks on the screen so we could then do something.

Question 26

What is bubbling & capturing?

Answer 26

Bubbling happens when an element receives and event, and that event is propagated to its parent and ancestor elements in the DOM. Capturing is when the event is first captured by the outermost element, then propagates to the inner elements

Question 27

What is the event loop in Javascript?

Answer 27

Responsible for executing the code, collecting and processing events, and executing queued sub-tasks

Question 28

What are Promises, what are they used for?

Answer 28

A promise is the object that represents the eventual completion or failure of an asynchronous process and its result

Question 29

What do Async & Await do in Javascript?

Answer 29

Async and await are tags you can use on methods and processes inside methods to let it know that it’s an asynchronous operation and enables promise-based behavior in a cleaner style

Question 30

What features were introduced in Javascript version ES6?

Answer 30

-Const: Variables
-Let: Variables
-Arrow functions:
-Template literals:
-Default parameters: Allows you to define a parameter in advance. Function parameters are defaulted to undefined but now you can set different default values.
-Object and Array Destructing: We can ‘unpack’ array objects into a bunch of variables. Instead of declaring variables separately for each property of an object, we put our values within curly brackets to get any property of the object. Variable = { object: ‘value’, ‘object:value}
-Classes: Can be used to create new Objects with the help of a constructor, each class can only have one constructor insdie it.
-Rest Parameter: Allows us to represent an indefinite number of arguments as an array. Functions can be called with any number of arguments, no matter how it was defined. Function func(…variable){}
-Spread Operator: Allows us to obtain a list of parameters from an array.

Question 31

What are arrow functions?

Answer 31

A more concise way for writing function expressions.

Question 32

What are template literals?

Answer 32

A new form of making strings that allow creating multi-line strings more easily and using placeholders to embed expressions in a string.

Question 33

What is a closure in Javascript?

Answer 33

Closure makes it possible for a function to have “private” variables. It allows a function to have access to the parent scope, even after the parent fuction has closed.

Question 34

What is the fetch API?

Answer 34

The Fetch API is a promise-based interface for fetching resources by making HTTP requests to servers from web browsers. We can use the FETCH() method, it will allow us to fetch data from different places and work with the fetched data.

Question 35

What is Node.js and why do we use it? How does it different from our previous way of running Javascript?

Answer 35

Node.js is a server-side way of running JavaScript code, it allows us to use JS on both front and backends. Without Node, JS is run only on a client’s web browser.

Question 36

What is NPM?

Answer 36

A dependency management tool that allows us to easily install the packages needed to run a program with Node.js. Stands for Node Package Manager.

Question 37

What is the package.json file?

Answer 37

It lists all of the dependencies and their versions that are needed to develop and run JS projects, it is used by NPM.

Question 38

What is Typescript and why do we use it?

Answer 38

Typescript is a superset of javascript.It adds types to javascript. By allowing types ts helps to identify errors in the code at compile time.

Question 39

What is transpilation? What command is used to transpile Typescript?

Answer 39

Compiling Typescript to javascript and it’s various versions is called Transpiling. The command used is npx tsc

Question 40

What types does Typescript introduce that Javascript does not have?

Answer 40

Static typing - TypeScript supports static typing and errors are highlighted during the development phase itself.

Question 41

What features does Typescript introduce other than strong typing?

Answer 41

Typescript allows for stronger OOP through the introduction of interfaces and access modifiers.

Question 42

Why would we use interfaces in Typescript?

Answer 42

TS interfaces allow users to define their own objects used in the code.TS compiler uses interfaces for Type checking to check if the object has a specific structure or not.This type checking is also called duck typing or structural subtyping.

Question 43

What is a decorator?

Answer 43

A decorator is a function that we use to attach metadata to a class declaration, method, accessor, property, or parameter. Examples would be something like @Component, @Input, @Output

Question 44

What’s a component in angular?

Answer 44

Component is a building block used to create our application, which allows to break down an application into smaller and reusable parts, as a result it is easier to maintain and update.

Question 45

What files does a component contain?

Answer 45

Component.css, component.html, component.spec.ts, component.ts, And component.css

Question 46

What’s a service in angular? What’s special about them?

Answer 46

A class that is used for fetching data from the server, validating user input, or logging directly to the console – containing logic that we would like to separate from component-specific logic

Services can be injected into a class (and this helps maintain their singleton model) - thus they are marked with the @Injectable annotation

Question 47

What’s a module in angular?

Answer 47

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

Each angular application has to have the root module (@NgModule)

Question 48

How do you set up a new Angular app using the Angular CLI?

Answer 48

Npm install –g @angular/cli –> cd folder_path –> ng new project_name

Question 49

How do you generate a new Angular component using the Angular CLI?

Answer 49

Ng g c component_name

Question 50

What is a Single Page Application? What are the benefits/downsides of using an SPA?

Answer 50

A web design pattern where instead of navigation links going to separate pages, a link will change which components are displayed on a single page.

Components are loaded up-front so that navigation on a website is faster

Downside is that the first time the page loads it takes much longer

Question 51

What is routing? How do I create a new route?

Answer 51

A way to change what is displayed on an SPA that simulates page navigation

Question 52

What is a route guard?

Answer 52

Determines if a user can access a route, for example a user must log in to see their account details.

Question 53

What does it mean for components to be eagerly loaded?

Answer 53

The component is loaded into cache when the page is first accessed instead of when the component is to be displayed on the page.

Question 54

What are lifecycle hooks in Angular?

Answer 54

Lifecycle hooks are used to access components before their instance is deleted

Question 55

When does ngOnInit run?

Answer 55

After angular has initialized all data bound properties for additional initialization

Question 56

When does ngOnChange run?

Answer 56

When angular sets or resets data-bound input properties

Question 57

When does ngOnDestroy run?

Answer 57

Just before angular destroys a component or directive for cleanup to avoid memory leaks

Question 58

What is ngDoCheck?

Answer 58

A lifecycle hook that invokes a custom change-detection function for a directive, in addition to the check performed by the default change-detector.

Question 59

What is property binding, and its syntax?

Answer 59

The properties of HTML elements in the template can be dynamically modified by transferring data from TypeScript. It is used to set a specific element property.

i.e. <img [src] = ‘url_image> src is property bound to the variable ‘url_image’.

Question 60

What is event binding, and its syntax?

Answer 60

Event binding is the process that handles the event raised by the user to activate a template statement.
<button (click) = ‘submit()’

Question 61

What is 2 way data binding, and its syntax?

Answer 61

Conventionally two-way binding is achieved by combining binding/text interpolation and event binding. In Angular, this is achieved by [()].
<input [(ngModel)] = ‘input’>

Question 62

What is interpolation & its syntax?

Answer 62

Interpolation is used for one-way binding in Angular Framework. It embeds an expression into an HTML template.
{{ variable }}

Question 63

What are event emitters for?

Answer 63

create an instance of EventEmitter and annotate the property with the @Output decorator. This instance calls the emit() method to emit a payload which can be received by an event object $event.

Question 64

What do structural directives do in Angular?

Answer 64

Structural directives are used to modify the structure of the HTML DOM by adding, removing, or manipulating elements.
NgIf
NgFor
NgSwitch

Question 65

What does ngIf do?

Answer 65

NgIf is used to conditionally add or remove elements from the dom based on boolean expressions

Question 66

What does ngFor do?

Answer 66

NgFor is used to render a template for each item in a list or an array.

Question 67

What do attribute directives do in Angular?

Answer 67

Attribute directives are used to modify the behavior and appearance of existing HTML elements by applying custom attributes. These directives conditionally add, remove, or change values.

Question 68

What are pipes used for?

Answer 68

Pipes are used to transform data before displaying it in the template.

Question 69

Could you describe the pub/sub design?

Answer 69

Publisher/subscriber consist of a publisher (someone who sends a message) and a subscriber (someone to receive a message) and an intermediate component (event channel), where data is sent from a publisher to an event channel and the data is then filtered and sent to the subscriber. This means publishers and subscribers don’t need to know of each other.

Question 70

What are observables?

Answer 70

Observable is an invokable collection of future values or events. Observer is a collection of callbacks that listens to values delivered by the Observable and subscription is the execution of an Observable, aslo used for cancelling the execution.

Question 71

How do you use the HTTPClient?

Answer 71

The HttpClient module is already included when creating a new Angular app. To use it, we need to import the HttpClientModule in the app.module.ts. And include the HttpClient in the @NgModule’s import array. Then you can create a service file to handle all the HTTP requests.

Question 72

How do you pass data from a parent component to a child component in Angular?

Answer 72

Using the @Input() decorator allows the parent component to update data in the child component.

Question 73

How do you pass data from a child component to a parent component in Angular?

Answer 73

Using the @Output() decorator allows the child component to send data to the parent component. Bind an event to the child component that emits data using an EventEmitter.

Question 74

How would you maintain some variable globally across the Angular app?

Answer 74

Creating a service and then injecting it into the components that require that variable. Having getters and setters and importing the service where needed. You could also create a file to hold Constants and export, then import where needed.