Angular and TypeScript

Question 1

What is Typescript?

Answer 1

• Typescript is a superset of javascript which primarily provides the option of static typing, classes, and interfaces.
• Typescript is a transpiled language that is open source.
• Typescript is compiled into javascript to be served on a webpage
• Typescript adds a lot of benefits to what javascript is while still being familiar to javascript users

Question 2

Is Typescript Loosely or Strongly Typed?

Answer 2

Strongly typed

Question 3

What does the “let” keyword mean?

Answer 3

Let is similar to var in some respects but let forces local scoping that var can cause problems with.

Question 4

What does the Arrow Function (=>) do?

Answer 4

• Defines a lambda function.
• Don’t need to type “function”
• Lexically captures the meaning of this.
• Lexically captures the meaning of arguments.

Question 5

Compiling vs Transpiling?

Answer 5

• Compiling is when source code is converted into machine code.
• Transpiling is a special kind of compiling where instead of being converted into machine code it’s compiled into another language.

Question 6

What is Angular?

Answer 6

• Angular is a framework built on top of typescript using declarative templates, dependency injection, end to end tooling, and integrated best practices to speed up the development process.
• Angular defines components and uses dependency injection to carry out DOM manipulation for you.

Question 7

What does it mean to be a Single Page Application

Answer 7

• A single page application (SPA) is a web application or web site that interacts with the user dynamically by rewriting the current page rather than loading a whole new page from a server.
• Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

Question 8

What is a Webpack?

Answer 8

A Webpack is a module bundler. Takes care of bundling your application for deployment alongside a separate task runner

Question 9

What is minification?

Answer 9

• The process of removing unnecessary or redundant data without affecting how the resources is processed by the browser.
• Example would be removing of white space, comments, unused code, shorter variable and function names and so on.
• Used to compress source code files for deployment.

Question 10

What is a module?

Answer 10

• 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.
• Modules can be easily imported and exported for use.

Question 11

What are components?

Answer 11

• Components are the most basic building block of a UI in an angular application.
• Everything in angular components and the application is represented as a tree of these components.

Question 12

What are decorators?

Answer 12

• The whole purpose of the decorator is to store metadata about a class, method, or property.
• The component decorator tells angular that a component is a component and then it knows what it needs to do with it.
• It’s more of an identifier than anything which sounds simple but it’s very important so that angular can differentiate components and their purposes.

Question 13

What are some common decorators?

Answer 13

@Component
@NgModule
@Input
@Output
@Inject

Question 14

What is a directive?

Answer 14

• Directives allow you to attach behavior to elements in the DOM.
• Directives are identified with the @Directive decorator.
• Directives must be present in the declarations field of your NgModule for it to be usable by another directive, component, or application.

Question 15

What is a Structural Directive?

Answer 15

• Must be annotated with the @Directive decorator
• Structural directives are responsible for HTML layout. - - They shape or reshape the DOM’s structure by adding, removing, or manipulating elements.
• Structural directives are how Angular does DOM manipulation.
• Actions of Structural directives also affect children elements.
• Examples are:
  
  • NgIf
  • NgFor
  • NgSwitch

Question 16

What is an Attribute Directive?

Answer 16

• Attribute Directives change the appearance or behavior of a DOM element, component, or another directive.
• Attribute directives are used as attributes of elements
• Must be annotated with the @Directive decorator
• A good example is the NgStyle directive which is built-in to angular.

Question 17

What is ngModel?

Answer 17

• NgModel is an Angular Directive
• Creates a FormControl instance from a domain model and binds it to a form control element.
• The FormControl instance will track the value, user interaction, and validation status of the control and keep the view synced to the model.
• Can be used by itself or as part of a larger form, if so it will also register itself with the form as a child control.
• Often used to achieve two-way databinding.

Question 18

What is a Dependency Injection?

Answer 18

Dependency Injection is a form of Inversion of Control, where you give up control to an outside entity. The outside entity provides you the instance of the dependency that you need, so that you don’t worry about the implementation of your resource, but instead focus on the business logic you are constructing. Dependency Injection is beneficial because it keeps your classes loosely coupled and isolates test cases.

Question 19

What is Data Binding?

Answer 19

In angular 4 data binding is how data manipulation in an angular component or web-page is done

Question 20

What are the types of Data Bindings?

Answer 20

One-way

Two-way

Question 21

What is one-way data binding?

Answer 21

• When properties of the model get updated so does the UI or the opposite not both.
• Can flow two ways from html doc to scripts or from scripts to html doc.
• Doc to scripts
  
  • When the user changes a field on an webpage you can capture it quickly and easily with a one way data binding done in angular 4 with [ name ].
• Scripts to doc
  
  • When you want to display the value of a variable in your script in the html doc but but the values is calculated or volatile meaning there’s no guarantee you know what it is you could use a one way data binding from the script to the page.
  • This is done using interpolation represented by {{ varname }}.

Question 22

What is two-way data binding?

Answer 22

• Means that when properties of the model get updated, so does the UI and the reverse is true.
• This is done in angular using the ngModel directive

Question 23

How do you make a class a component?

Answer 23

Simply specify that a class is a component by annotating it with the @Component decorator.

Question 24

How do you make asynchronous calls using Angular?

Answer 24

• Using a service with a predefined function that is returning an observable or a promise.
• Make the call to the service and subscribe to it with the subscribe method.
• Inside the subscribe method define a callback to execute when the service call is resolved and inside that store it in a variable or do any manipulation

Question 25

What is a Pipe?

Answer 25

A pipe takes in data as input, does some transformations, returns some output

Question 26

What is a Service?

Answer 26

- Services are angular’s way of fetching/storing data. - Angular has services so that components don’t have to both fetch data and display/present it in the view. - Reduces code bloat. - Increases modularity. - Can use the same service in multiple components or applications.

Question 27

What is Function Binding?

Answer 27

- Binding the function is a way of setting a function context. - .bind() when you want that function to later be called with a certain context, useful in events. - Use .call() or .apply() when you want to invoke the function immediately, and modify the context. - Call/apply call the function immediately, whereas bind returns a function that when later executed will have the correct context set for calling the original function. This way you can maintain context in async callbacks, and events. - The first argument in the bind method is the method that will be bound to this

Question 28

What is Interpolation?

Answer 28

- The populating of a placeholder with values from a string or variable to be viewed by the user. - Done with {{ varname }}

Question 29

What is an Observable?

Answer 29

- A collection that arrives over time. | - Often used to handle async data requests

Question 30

What is a Provider?

Answer 30

- A provider is an object or class that provides a component with data. - In short terms it is a service that is registered to a component or module. - A field or attribute in component or module decorators that tell angular what services to inject into the component

Question 31

What is an Injectable?

Answer 31

- A Decorator that tells angular that the class is available to the Injector for creation. - Objects that are injectable can be created and injected into a component or service.

Question 32

What is Routing?

Answer 32

Routing is the ability to send users from one page in an application to another page in the application and back.

Question 33

What is the lifecycle of a component?

Answer 33

- The lifecycle of a component is managed by angular itself, creation, rendering, data-bound properties, and it has hooks for you to allow you to respond to these events - The most used is probably ngOnInit which is generated for every component when using ng g c.

Question 34

What are the Lifecycle Hooks?

Answer 34

- ngOnChanges - called when an input binding value changes - ngOnInit - after the first ngOnChanges - ngDoCheck - after every run of change detection - ngAfterContentInit - after component content initialized - ngAfterContentChecked - after every check of component content - ngAfterViewInit - after component's view(s) are initialized - ngAfterViewChecked - after every check of a component's view(s) - ngOnDestroy - just before the component is destroyed

Question 35

What is CLI?

Answer 35

- CLI stands for Command Line Interface. - Set of commands that you can run on the command line - The Angular CLI is used for constructing the scaffolds of apps and components from the command line.

Question 36

What is NPM?

Answer 36

- NPM is the Node Package Manager - Npm is a package manager used for web technologies - Npm has a software registry with a bunch of packages (modules) - Used to share reusable code and keep it up to date. - Npm could refer to a couple of things, the website, the registry, or the client CLI.

Question 37

What are Event Emitters?

Answer 37

- EventEmitter is a class in angular that’s used by directives and components to emit custom events. - Event emitters are defined as output events which is where you can create them and you can reference those events in the component and specify what they emit.

Question 38

What is bootstrapping?

Answer 38

- Bootstrapping is the creation of specified components when the app is loaded and the addition of those components to the browser DOM. - Components to be bootstrapped are specified by listing them in the NgModule’s bootstrap array.

Question 39

What are the data types in Typescript?

Answer 39

``` Boolean String Number Array Enum Any Void ```

Question 40

CLI commands to generate components and services

Answer 40

- Ng g c component-name - generates a component. | - Ng g service service-name - generates a service.

Question 41

What is a template?

Answer 41

- A template is a scaffold for how something is supposed to look or act. - In angular you can define HTML templates for the applications components, you can define template contexts in interpolation expressions and many other things. - You can load the templates into the application using the ng-template tag.

Question 42

Explain the Http module.

Answer 42

- The Http Module is deprecated and it’s now common practice to use the HttpClient Module instead. - The HttpClient module is used to send Http requests and receive responses. - It’s set up by injecting it into the component meant to use it, done by placing a private variable in the constructor. - You can reference the http variable to send http request and return observables and promises.

Question 43

How do I include a Module into my application?

Answer 43

- Import the module in your app module using import { modulename } ‘module path’; - Then list it as an import in the imports array of the NgModule - After that you can inject it where you need it when/if necessary.

Question 44

Which are the subtypes of Data Binding?

Answer 44

- Interpolation - property name is enclosed in double curly braces {{ propertyName }}. - Property - Used to bind values of component/model properties to the HTML element might change the behavior of the element depending on values - [property]=”expression”. - Attribute - set the values of an attribute directly, must only be used when the element doesn’t have the property itself. - Done in a way similar to property binding but using an attribute prefix - [ attr.attr-name ] = ‘expression’ - Class - add and remove CSS class names from HTML elements - Similar to attribute binding but starts with the class prefix not the attribute prefix - [class.Class-Name]=’expression’ - Style - Used to set inline styles to the HTML element - Style itself adds only a single line to the inline style - To add multiple styles with angular you can use the NgStyle directive.

Question 45

How do I bundle my Angular application?

Answer 45

- Ng build command for the cli will bundle the application into a dist/ folder - Specifying a production built with --prod will be more optimized for user interaction - Not specifying production will not be optimized but it will be enough to pass around the development team