Angular 8
Proficiency Interview
This document seeks to assess a candidate’s knowledge with Angular, as well as to understand
his/her professional skills.
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
SCALE
Value Description
1 The prospect understands the concept/topic but he has none hands-on
experience.
2 The prospect understands the concept/topic but he has low hands-on
experience.
3 The prospect understands the concept/topic but he has basic hands-on
experience.
4 The prospect understands the concept/topic but he has solid hands-on
experience.
5 The prospect understands the concept/topic but he has advanced hands-
on experience.
PROSPECT’S BASIC PROFILE
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
Name:
Edisson Guerrero Londoño
Contact:
3023645630
Major in:
Telematic Engineer
Postgraduate: N/A
English Proficiency:
GitHub/Bitbucket
username
[Link]
Last Commit:
N/A
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
TECHNICAL TEST SUMMARY
ASSESSMENT FEEDBACK
Frameworks
Theoretical
Name Remarks Scale
Knowledge
Architecture 3 3
Concepts 3 3
NGRX xxxxx xxx
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
Databases
Time /
Name Theoretical Knowledge Remarks Scale
Projects
SQL N/A 3 N/A 3
Libraries
Time / Have Theoretical
Name Remarks Scale
Projects Knowledge
N/A N/A N/A N/A 0
INTERVIEWER REMARKS
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
KNOWLEDGE SUMMARY
1. Architecture
1.1 What are Single Page Applications? How do they work in Angular?
Answer: Single Page Applications (SPAs) are web applications that use only one HTML page. As the user
interacts with the page, new content is dynamically updated on that master page. Navigation between pages
happens without refreshing the whole page. Angular uses AJAX and to dynamically update HTML elements.
Angular Routing can be used to make SPAs. The result is an application that feels more like a desktop app
rather than a webpage.
Scale: 4
1.2 What is the main difference between constructor and ngOnInit?
Answer: The constructor is a feature of the class itself, not Angular. The main difference is that Angular will
launch ngOnInit after it has finished configuring the component. Meaning, it is a signal through which the
@Input() and other banding properties and decorated properties are available in ngOnInit, but are not
defined within the constructor by design.
Scale : 4
1.3 Question: What are the building blocks of Angular?
Answer: There are essentially 9 building blocks of an Angular application. These are:
Component: These are the basic building blocks of angular application to control HTML views.
Modules: An angular module is set of angular basic building blocks like component, directives, services etc.
An application is divided into logical pieces and each piece of code is called as "module" which perform a
single task.
Templates: This represent the views of an Angular application.
Services: It is used to create components which can be shared across the entire application.
Metadata: This can be used to add more data to an Angular class.
Scale: 2
1.4 What is the sequence of Angular Lifecycle Hooks?
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
Answer: OnChange() – OnInit() – DoCheck() – AfterContentInit() – AfterContentChecked() – AfterViewInit()
– AfterViewChecked() – OnDestroy().
Scale: 2
1.5 What is the use of @Input and @Output?
Answer: @Input is a decorator to mark an input field and @Output is a decorator to identify an output
property. @Input is used to determine an input property to achieve element property binding.
Scale: 3
2. Concepts
2.1 What is [(ngModel)] used for?
Answer: The ng-model directive binds the value of HTML controls (input, select, text-area) to application
data.
Scale: 3
2.2 What are the differences between Component and Directive?
Answer: In a short note, A component(@component) is a directive-with-a-template.
Component Directive
To register a component we use
To register directives we use @Directive meta-data annotation
@Component meta-data annotation
Components are typically used to create UI
Directive is used to add behavior to an existing DOM element
widgets
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
Component is used to break up the
Directive is use to design re-usable components
application into smaller components
Only one component can be present per
Many directives can be used per DOM element
DOM element
@View decorator or templateurl/template
Directive doesn't use View
are mandatory
Scale: 3
2.3 What are all the types of Directives?
Answer: There are three types of directives in Angular:
- Structural directives change the DOM layout by adding and removing DOM elements. For
example, *ngIf and *ngFor.
- Attribute directives change the appearance or behavior of an element. . For
example, *ngStyle and *ngClass
- Components are basically directives with a template.
Scale: 3
2.4 What are pipes?
Answer: A pipe takes in data as input and transforms it to a desired output. For example, let us take a pipe
to transform a component's birthday property into a human-friendly date using date pipe.
Scale: 3
2.5 What are HTTP Interceptors?
Answer: Interceptor is just a fancy word for a function that receives requests/responses before they are
processed/sent to the server. You should use interceptors if you want to pre-process many types of requests
in one way.
Scale: 3
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
2.6 What is an observable?
Answer: An Observable is a unique Object similar to a Promise that can help manage async code.
Observables are not part of the JavaScript language so we need to rely on a popular Observable library
called RxJS. The observables are created using new keyword.
Scale: 3
2.7 What is an Promise?
Answer:Las promesas se utilizan para la realización de tareas asíncronas, como
por ejemplo la obtención de respuesta a una petición HTTP.
Una promesa puede tener 4 estados:
Pendiente: Es su estado inicial, no se ha cumplido ni rechazado.
Cumplida: La promesa se ha resuelto satisfactoriamente.
Rechazada: La promesa se ha completado con un error.
Arreglada: La promesa ya no está pendiente. O bien se ha cumplido, o
bien se ha rechazado.
Scale: 3
2.7 Angular Routing ?
El sistema de routing es el encargado de reconocer cuál es la ruta que el
usuario quiere mostrar, presentando la pantalla correcta en cada
momento. Esto es útil por varios motivos, entre ellos:
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
1. Permite que la aplicación responda a rutas internas. Es decir, no
hace falta entrar siempre en la pantalla principal de la aplicación y
navegar hasta la pantalla que queremos ver realmente.
2. Permite que el usuario pueda usar el historial de navegación, yendo
hacia atrás y hacia adelante con el navegador para volver a una de
las pantallas de aplicación que estaba viendo antes.
elementos básicos:
El módulo del sistema de rutas: llamado RouterModule.
Rutas de la aplicación: es un array con un listado de rutas que
nuestra aplicación soportará.
Enlaces de navegación: son enlaces HTML en los que incluiremos
una directiva para indicar que deben funcionar usando el sistema
de routing.
Contenedor: donde colocar las pantallas de cada ruta. Cada
pantalla será representada por un componente.
Scale: 2
2.7 What is RouterLink ?
Add links to routes using the RouterLink directive. For example the following code defines a link to
the route at path component-one . <a routerLink="/component-one">Component One</a>
Scale: 2
3. NGRX
3.1 Which parts constitute NGRX? What is NgRx?
Answer: Is a Redux library for Angular. It helps us with state management, which is arguably the hardest
part to manage for modern, large scale, client-side applications.
Store: Your application’s state is maintained in the store. The store is immutable.
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia
Reducers (and Meta-Reducers): Are hooks where you can pre or post-process actions before they get
invoked.
Actions: Modify the state of the store by using reducers (functions) that enable changes while keeping it
immutable.
Selectors: Enable components to get a slice (a part) of your application’s state, and also mutate state with
selector functions.
Effects: Occur as a result from actions, and can also create actions when called. Effects primary
responsibility is to create async side-effects (like service calls to APIs), that ultimately generate other actions.
Scale: x
Address: Avenida El Poblado, Carrera 42 Nº 3 Sur 81, Torre 1 Piso 15, Medellín Antioquia