NG Misc

Question 1

What is Angular?

Answer 1

• Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop
• The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development

Question 2

Plattform vs Framework

Answer 2

• Angular is not a framework
• Framework ist in der Regel nur die Codebibliothek zum Erstellen einer Anwendung
• Eine Plattform ist ganzheitlicher und bietet eine Reihe von Tools und Unterstützungen
• AngularJS konzentrierte sich ausschließlich auf das Erstellen von Webanwendungen im Browser und war eindeutig ein Framework
• Es verfügte über ein großes Ökosystem von Modulen von Drittanbietern, mit denen man leicht Funktionen zur eigenen Anwendung hinzufügen konnte
• Im Kern wurden jedoch Webanwendungen im Browser erstellt
• Angular 2 hingegen: schlankere Kernbibliothek

Question 3

Framework vs Library

Answer 3

Library:

• A library is just a collection of class definitions simply for code reuse, i.e. get the code that has already been written by other developers
• classes and methods normally define specific operations in a domain specific area

Framework:

• „Inversion of Control“
• In a Framework, all the control flow is already there, and there’s a bunch of predefined white spots that you should fill out with your code
• A framework is normally more complex
• It defines a skeleton where the application defines its own features to fill out the skeleton
  
  • In this way, your code will be called by the framework when appropriately
  • The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.

Their Relation:

• Both of them define an API for programmers to use
• To put those together, we can think of a library as a certain function of an application and of a framework as the skeleton of the application where an API is the connector to put those together

Question 4

What is LocalStorage ?

Answer 4

• Is an HTML5 provided key/value pair that allows you to persist information on the browser
• The API is very simple, and basically allows the setting, retrieval and deletion of items
• The Storage interface of the Web Storage API provides access to a particular domain’s session or local storage — so this API is a super set of local storage

Question 5

What distinguishes the Angular Compiler?

Answer 5

• Compilation of the output in Angular is decoupled from the browser so that Angular applications can be rendered in different environments (e.g. server or desktop app)
• Angular is versatile as it can be rendered on CLient and Server
• To enable universal rendering, a decoupled compiler is required, since different render patterns can be implemented depending on the environment
• The compiler is responsible for resolving data bindings, registering event handlers, and rendering the resulting HTML for components

Question 6

Data Binding in Angular

Answer 6

• Data Binding is a process that creates a connection between the application’s UI and the data. When the data changes its value, the UI elements that are bound to the data, will also change
• Data binding in Angular works by synchronizing the data in the components with the UI so that it reflects the state of the app; e.i. the value of the data
• To achieve the synchronization of the View and the Model, Angular uses change detection
• There are tow types of data binding:
  
  • one-way data binding (change in the state affects the view) and two-way data binding (change from the view can also change the model)
• In one-way data binding, the template expression {{}} — also known as string interpolation — and square braces [] — used to bind a property to the DOM and known as property binding — are used
• there is also event-binding which is defined as the updating/sending of the value/information of a certain variable from the presentation layer (view) to the component (model)
• Two-Way Data Binding is a combination of both Property and Event binding and it is a continuous synchronization of a data from view to the component and component to the view
  
  • i.e. changes made in the component’s data should sync to the view and should immediately update the model into the corresponding component with view data

Question 7

Two-Way Data Binding

Answer 7

• two-way data binding is mainly used in data entry forms where the user changes the view and makes changes in the model with the view data and vice-versa
• Angular uses the combination of Property binding and event binding to implement two-way data binding with the help of the ngModel directive
• NgModel is not a part of Angular’s code library
  
  • it is defined in the forms module library so you need to import the FormsModule library
    *

Question 8

One-Way Data Binding

Answer 8

• use interpolation {{}} and property binding []
  
  • property binding binds data to a property of an element
  • interpolation evaluaes the value of a component variable in the HTML view
• property binding could be used to pass data into a component
• property binding uses the square brackets to indicate to Angular the property of an element that should be updated when the data-bound variable changes

class {
this.srcURL = “http://pexels/image.jpg”
}
img [src]=”srcURL”

// is equivalent to
img src="http://pexels/image.jpg"

Question 9

How does Angular update properties and render the DOM?

Answer 9

• Angular components are compiled down to factories before being executed by the framework
• Factories are created from the data supplied to the @Component decorator
• Factories are made of Views which Angular uses to manipulate the DOM
• A View is made up of nodes: element node, text node, directive node etc.
• Each node is constructed and created by a specialized function with all the information needed to create the node so as to optimize for speed

Question 10

Container vs Presentation Components

Answer 10

• Angular was designed to promote code reuse
  
  • As a result, the recommended component architecture relies on two different kinds of components
• There is a clear pattern of separating your components into Presentational and Container Components (also known as Smart and Dumb components) which emerged from React/React Native a couple of years ago

Advantages of this approach

• There is a better separation of concerns
• The presentation components promote reuse, and you eventually have a library of UI Components
• The Container components are easier to test, and the tests run faster, since you no longer have to do the Angular TestBed setup
• You can improve your application performance by adopting OnPush Change Detection in your container components
  
  • As per the Angular documentation, use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways)
  • Change detection can still be explicitly invoked
  • With the default strategy, any change (user events, timers, XHR, promises, etc.,) triggers a change detection on all components
  • With OnPush strategy, the component only depends on its @inputs(), and needs to be checked if the Input reference changes

Question 11

What are Container Components?

Answer 11

• Container components (or “smart” components) know how to get data and work with services
• Container components are tied to the business logic of your application
• They are not meant to be shared or reused
  
  • Instead, what they do is get data from the server and pass it down to presentation components

Summing up:

• Contain all the business logic
• Pass the data to the Presentational Components, and handle @Output events raised by them
• Have no UI logic
• Do have dependencies on other parts of your app, like services, or your state store.

Question 12

Presentation Components

Answer 12

• Presentation components (“dumb” or “lazy” components) that have to be fed with data
• Presentation components do not know about any service
• They are pure, simple UI components that just need some input data to render
• Buttons, tabs, headers, tables are all great candidates to be used as presentation components
• As a result, such components are reusable because they are coded in a way that is not tied to any runtime context
• Presentation components are really just an HTML template that has to be filled with data
• They can also emit events that container components would catch in order to make the actual business logic happen
• The attached image is an example of a typical component architecturethat illustrates this
• Most shareable components will be presentational components, so that we can use them in different contexts
• The only exception to this would be a component that performs a specific task to render some data
• For instance, if you want to create a weather widget that renders the current weather conditions of a given location, that specific component might have its own business logic to retrieve its data from a weather API

Summing up:

• Purely user interface and concerned with how things look
• Not aware about the business logic, or services
• Receive data via @Inputs, and emit events via @Output

@Component({...})
export class MyComponent {

@Input()
data: Data;

@Input()
text: string;

@Output()
onButtonClick = new EventEmitter();
}
~~~

h2{{data.title}} h2
img src=”{{data.picture}}” class=”img-fluid”
p {{data.description}} p
div
button role=”button (click)=”onButtonClick.emit(data.id)”
{{text}}
button
div

Question 13

DOM Properties vs HTML Attributes

Answer 13

• Every HTML element is represented as a JavaScript DOM object and every attribute of the HTML element is represented as a DOM property
• While they appear to be the same, there are often differences
  
  • For example, the text inside an HTML element is accessed using the textContent property, which doesn’t have a corresponding HTML attribute
• When writing HTML Code, you can define attributes on HTML elements
• Once the browser parses that code, a corresponding DOM node is created
• This node is an object and as such it has properties
• For a given DOM node object, properties are the properties of that object, and attributes are the elements of the atrritbutes property of that object
• When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it is not a one-to-one relationship

Question 14

Library Dependencies

Answer 14

• You should only have a node_modules directory in the root of your project, not within the library’s directory
• So if your library needs 3rd party packages, then you should add them to the dependencies of your root package.json
• The devDependencies also go here
• In your library’s package.json you should only add peerDepencies
• They tell the users of your library which packages are needed if they wantto install your package

Question 15

Service vs Provider

Answer 15

• A provider/service are the same thing, if you want to use dependency injection (injecting things through the constructor)
• you need to add the @Injectable decorator and add it to the providers array
• If you are just creating a simple class that you just want to create new instances of then you don’t need to add it as a provider (you would just instantiate a new instance of it, i.e. let myThing = new Thing();

Question 16

entryComponents Array

Answer 16

• The entryComponents is used to define the components that are not found in html initially and that are createddynamically with ComponentFactoryResolver
• In order for angular to compile, it needs this hint in the module
• Since our SampleComponent will be dynamically added to the DOM, we need to mention it in the NgModule decorator.

Question 17

What’s the benefit of using Angular’s @ViewChild decorator vs just using JS getElementById?

Answer 17

• Because Angular isn’t made to just run in a browser
  
  • For example you can run Angular in a webworker and webworkers do not have direct access to the DOM.
  • Think about other platforms where angular can run, native desktop and native mobile for example.
• That’s why they’ve added DOM abstraction, the framework will figure out how to access the element you want to select depending on the platform

Question 18

What is ApplicationRef

Answer 18

• A reference to an Angular application running on a page

Question 19

Injector/ Dependency Injection

Answer 19

• Dependency injection (DI), is an important application design pattern
• Angular has its own DI framework, which is typically used in the design of Angular applications to increase their efficiency and modularity
• Dependencies are services or objects that a class needs to perform its function
• DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.
• In Angular, the DI framework provides declared dependencies to a class when that class is instantiated

Question 20

How do you define transition between two states?

Answer 20

• Using the transition and animate function in an animations block like so: animations:[transition('inactive => active'), animate('100 ms ease-in')]