Fudamentals

Question 1

What and where is the Angular.json file?

Answer 1

A json file at the root level of the Angular workspace, provides project specific and workspace configuration details.

Such as path details for styles, scripts and assets.

And config for build and development tools by the CLI (e.g. serve.

A per-project config section and a few workspace properties

Question 2

What is the purpose of the package.json file?

Answer 2

Configures the npm package (node) dependencies that are available for all projects in the workspace

Question 3

What are NPM packages?

Answer 3

A package in Node.js contains the files you need for a module.

Question 4

What is Node.js?

Answer 4

Node.js is an open-source server environment.

Allows you to run JavaScript on the server

Question 5

What is the function of package-lock.json file?

Answer 5

Provides version information for all packages installed into node_modules by the npm client

Question 6

What is the function of package-lock.json?

Answer 6

Provides version information for all packages installed in node_modules by the npm client

Question 7

What is the function of the node_modules?

Answer 7

NPM packages are installed here and is accessible to the entire workspace.

The dependencies here will be visible to all projects (if its workspace wide)

Question 8

In terms of programming, how does Node.js perform?

Answer 8

Node.js runs single-threaded, non-blocking, asynchronous programming

Question 9

What is NPM?

Answer 9

NPM is a package manager for Node.js packages (and can be used for modules as well)

It is installed with Node.js

Consists of three main components:
-the website
-the CLI (command line interface)
-the registry

Question 10

What is the public NPM registry?

Answer 10

A database of JavaScript packages.

It is used by developers to contribute & distribute their packages to communities (or local to their organisation) and also install others.

Question 11

How do you use NPM?

Answer 11

Can be run via CLI with commands in a terminal.

‘npm …’

Question 12

What is NVM?
And what is it used for?

Answer 12

Node Version Manager, a tool for (surprise) managing Node versions on your device.

Different projects on your device might be using different NPM versions, so can be provide version compatibility

Question 13

What does the index.html file do?

Answer 13

The common name for the default page shown for a website (if no other page is specified)

Appropriately named as it serves an index to the main pages of the site

Question 14

What is bootstrapping?

Answer 14

Bootstrapping is the process of initialising or loading the Angular application

Question 15

What are the main steps in Bootstrapping?

Answer 15

1. Load the Index.html file as the starting point for the app
2. Loads Angular and third-party libraries/applications
3. Executes the main.ts file as the application entry point (or as defined in the angular.json file for that project)
4. Calls the bootstrapModule function to load and execute the Root module (app.module.ts)
5. Executes the Root Component/s (example: app.component.ts) as defined in the Root Module in the bootstrap array. Sometimes called the Entry Components (not to be confused with the deprecated way to bootstrap)
6. Display the Root Module Template (if called in the index.html)

Question 16

What does the main.ts file do?

Answer 16

The file acts as the main entry point of the application, which is defined in the angular.json file.

It creates the browser environment with

‘Import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’

And calls the bootStrapModule function to tell the builder to bootstrap the app:

‘platformBrowserDynamic().boostrapModule(AppModule)’

Question 17

What does the App.module.ts file do when the application first loads?

Answer 17

This is the default name for the file that will bootstrap the initial components.

It loads the components listed in the bootstrap array under the ‘providers’ array. And it will insert each one into the DOM

Each of those bootstrapped components is the base of its own tree of components.

Most applications only have one component tree and bootstrap single root

Question 18

What is the root component?

Answer 18

The initial component bootstrapped by the app.module.ts when the application starts

And it is loaded into the DOM

Question 19

What are Angular Modules?

Answer 19

Angular NgModules are different to JavaScript (ES2015) modules

But like JS modules they can import functionality from other modules and allow their functionality to be exported.

NgModules is a class marked by the @NgModule decorator.

Ng Modules are basically containers for components.

As Angular loads items in a hierarchical tree structure, a list of components can be loaded in with the initialisation of that module

Question 20

Describe the structure of an Angular Module

Answer 20

A module will import the decorator class @NgModule from angular core and will have the decorator @NgModule ({…})

In which you have the following:

Declarations [ ]
Lists the component classes to be loaded in. As well as directives and pipes

Imports [ ]
Other modules to be loaded

Providers [ ]
Services are loaded in here and the bootstrap array

And then the export of the module along with any module specific functions.

Question 21

What is an Angular Component

Answer 21

Each Component defines a class that contains the application data and logic and is associated with an HTML template that defines a view.

Components will often load child components into its view via the selectors, forming a tree structure relationship

Question 22

Define the structure of a component

Answer 22

It will import the Component class from angular core and have the Component decorator @Component

The decorator defines the class as a component class and specifies its metadata.

In the decorator you have the following:

Selector:
The tag that other components (or in an html document) can use to reference this template. Which often build a view hierarchy

Template/TemplateUrl
Defines the component’s ‘host view’. This html is either put inline or as a relative path to a html file.

Providers
Like modules, can define an array of services that the component requires.

Question 23

What might you use to delimit a multi-line literal string for a template in the @Component?

Answer 23

A Template literal.

Delimits the string literal with backticks

template: <div>Hello World</div> <br>

Question 24

What is Data-Binding in Angular?

Answer 24

A mechanism for coordinating parts of a template with parts of a component.

Essentially allow you to send values, properties or events between the DOM and the Component.

Typically placed in the html of the template

Can be a two-way binding (send either direction) depending on the binding

Question 25

What are the types of Angular Data-Binding?

Answer 25

Component (source)
DOM (view)

{{value}}
Component —> DOM
Interpolation

[property] = “Value”
Component —> DOM
(sending a value to an element’s property in the DOM)
Property binding

(event) = “handler”
DOM —> Component
Event binding

[(ng-model)] = “property”
DOM <—> Component

Question 26

What is the ‘banana-in-a-box’ binding in Angular?

Answer 26

A two-way binding

When we use both the square and normal parentheses. But we can use either by its own

[(ng-model)] = “property”

The normal parenthesis would bind from DOM to Component

The square parenthesis would bind from Component to DOM

Question 27

What are Angular Pipes?

Answer 27

Allows you to declare display value transforms in your template HTML

Meaning you can perform a transforming function on your data in a interpolative binding, to modify or format that value.

{{interpolated_value | pipe_name }}

There are built-in pipes or you can make your own with the @Pipe decorator

Question 28

What is the Safe Navigation Operator? And what is it used for?

Answer 28

Used in bindings to prevent a compile error if the value is NULL.

Can add the operator in with a ? before the full stop

{{ event?.location?.name }}

(The above is accessing a Json object so multiple levels could be null)

Question 29

Are Components directives?

Answer 29

Technically yes, but because they are distinct enough in Angular they are defined with the decorator @Component.

The @Component extends the @Directive with template-oriented features

Question 30

What are Directives and how do they work?

Answer 30

A class that can modify the attributes in the DOM or its structure, as well as Component data.

They typically start with the ng prefix, i.e that *ngFor=“ “. This is a short-hand syntax that Angular interprets and converts to longer form (using <ng-template>)</ng-template>

A directive class definition must have the @Directive decorator (to supply the metadata)

It is usually associated with a HTML element or attribute.

When Angular finds a directive in an HTML template, it creates an instance of a matching directive class. It then gives it control over that portion of the browser DOM

Question 31

What is the syntax for referencing Directives?

Answer 31

*ngIf - Use lowerCamelCase when the directive applies to the html attribute

*NgIf - Use UpperCamelCase for when referring to the directive class, i.e, describing its behaviour & properties

Question 32

What are the types of Directives?

Answer 32

Attribute Directives - can modify behaviour and appearance of HTML elements, attributes, properties and Components.

Can be added in the template as a css attribute to that element.

Structural Attributes - can modify the structure of the DOM, such as adding, removing or manipulating elements. Such as *ngFor

Components - they use the @Component decorator which is an extension of the @Directive class

Question 33

Describe the structure of an Angular Directive

Answer 33

Will import the Directive class and have the @Directive decorator.

The Selector will be in square parentheses because its references as a HTML attribute and not an element (like Components)

Will also typically import the ElementRef class and have this in the structure to access the element its being applied to.

Constructor(ref:ElementRef) {
this.myEle = ref.nativeElement
}

Question 34

What the main ways components can communicate between each other and exchange data?

Answer 34

Using the @Input and @Output decorators

Question 35

What would you mainly use to send data from the Parent component to the child component?

Answer 35

The @Input decorator

The @Input is defined in the child component and then declared within the html selector used in the parent (calling) component

Child:

(Imports ‘Input’)
Selecttor: ‘child-app’

export class childComponent {
@Input( ) item = ‘ ’
}

Parent:

template:

<child-app [item]=‘myValue’ /child-app>

Question 36

What would you mainly use to send data from the Child component to the parent component?

Answer 36

The @Output decorator

The @Output is defined in the child component. It lets the parent component now that the property has change with an Event sent using the EventEmitter.

Which allows the user to create a custom event

Child:

(Imports ‘EventEmittet’ and ‘Output)

Selector: ‘childApp’

export class childComponent {
@Output( ) newEvent = new EventEmitter<string>( )</string>

doSomething(value:string) {
    this.newEvent.emit(value)
 }

Template: ‘

<input type=‘text’ id=‘inputbox’ #newItem>
<button type=‘button’ (click)=“doSomething(newItem.value)>Click me</button>’

}

Parent:

export class parentComponent {

parentMethod(item:string) {
//do something
}

template:

<child-app (newEvent)=‘parentMethod($event)’>< /child-app>

Question 37

What are Template Variables and what are they used for?

Answer 37

Used to reference data from one section of your template, in another section.

Often declared with the # symbol

Could refer to:
-a DOM element within a template
-a directive or component
-templateRef
-web components

Common example

<input #myVar placeholder=“enterValue” />

<button type=button (click=“doSomething(myVar.value)”>Click me</button>

Other example

The template var would be the temp variable defined in the ngFor

<div *ngFor=“let item of items”>
….
</div>

Where ‘item’ is the template var

Question 38

What is an ngClass used for? And explains its syntax

Answer 38

Used to assign CSS classes to the template html.

<html [ngClass]=“classx” /html>

Classes be assigned in an array, a single string or delimited (space) string or via an object when a value evaluates to truthy

[ngClass]=“{‘class1 class2’: true”}

Question 39

What is ngStyle and explain its structure

Answer 39

Applies styles to template html elements

<html [ngStyle]=“{‘font-style’: something} /html>

Question 40

What are the main Angular classes that use the Decorator class?

Answer 40

@Component
@Directive
@Pipe
@Injectable
@NgModule