Angular

Question 1

What is the class that Angular provides to make http requests?

Answer 1

HttpClient

Question 2

Which is the packaga that contains the class HttpClient?

Answer 2

@angular/common/http

Question 3

Which is the interface over HttpClient relies?

Answer 3

XMLHttpRequest

Question 4

What are the basic building blocks of Angular?

Answer 4

Angular components

Question 5

What are Angular NgModules?

Answer 5

NgModules contain Angular Components. They collect related code into functional sets. An application always has at least a root module.

Question 6

They define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data

Answer 6

Components

Question 7

They can be injected into components as dependencies, making your code modular, reusable, and efficient.

Answer 7

Service Providers

Question 8

What are services?

Answer 8

They are for data or logic that isn’t associated with a specific view, and that you want to share across components.

Question 9

What is injection decorator for?

Answer 9

The decorator provides the metadata that allows other providers to be injected as dependencies into your class. A service class definition is immediately preceded by the @Injectable() decorator.

Question 10

what is Dependency injection (DI) for?

Answer 10

Dependency injection (DI) lets you keep your component classes lean and efficient. They don’t fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

Question 11

Que es un decorador?

Answer 11

Un decorador agrega metadata a un componente, como por ejemplo la plantilla que debe quedar asociada.

Question 12

List some Angular decorators

Answer 12

@Component()
@Directive()
@Pipe()
@Injectable()
@NgModule()

Question 13

List the forms of Angular Binding

Answer 13

Interpolation
Property binding
Event binding
Attribute binding
Class and style binding
Two-way data binding with ngModel

Question 14

Cómo se inicia un proyecto Angular?

Answer 14

npm install -g @angular/cli
ng new <my-app></my-app>

Question 15

Cómo se ejecuta un proyecto Angular?

Answer 15

Navegar hasta la carpeta de la aplicación
ejecutar: “ng serve - - open”

Question 16

Que signfica el prefijo ng en las directivas Angular?

Answer 16

ng funciona cómo apreviatura para Angular, mas que quedo desde el punto de vista de la pronunciación. También pudo haber sido pensado como ng = new generation.

Question 17

Que elementos se configuran al usar “ng new”?

Answer 17

Angular routing
Style format como CSS, SCSS, SASS o LESS

Question 18

Que es un Angular View?

Answer 18

Está definida por un componente y su plantilla.

Question 19

Donde estan ubicados los modulos?

Answer 19

En la carpeta node_modules

Question 20

Comando para compilar para producción

Answer 20

ng build

Question 21

Comando para ejecutar con pruebas

Answer 21

ng test

Question 22

Que significa PWA?

Answer 22

Progressive web application

Question 23

Que es Angular Material?

Answer 23

Es una biblioteca de componentes preconstruidos para trabajar interfaces de usuario con Angular.

Question 24

Cómo se agrega Angular Material a un proyecto?

Answer 24

ng add @angular/material

Question 25

Que elementos adicionales componentes proporciona Angular Material?

Answer 25

Temas, tipografias y animaciones.

Question 26

Cómo agregar archivos con variables de entorno en anuglar?

Answer 26

$ ng generate environments

Question 27

De un ejemplo de template expressions

Answer 27

<h3>Current customer: {{ currentCustomer }}</h3>

<img [src]=”urlImagen + ‘?t=’ + timeStamp”>

Question 28

De un ejemplo de template statements

Answer 28

<button type=”button” (click)=”deleteHero()”>Delete hero</button>

Question 29

Cómo se agrega un componente usando angular CLI?

Answer 29

ng generate component xyz

Question 30

Cómo se configuran las rutas en Angular?

Answer 30

• $ ng generate component <mi-componente></mi-componente>
• Se deben agregar los nuevos componentes al elemento declarations en el archivo app.module.ts
• Se deben agregar los paths al array de rutas en el archivo app-routing.module.ts

Question 31

Cuales son los tres tipos de directivas?

Answer 31

Attribute Directives

• Component
• Structural Directives
• Attribute Directives

Question 32

Mencione dos directivas estructurales comunes

Answer 32

*ngIf, *ngFor

Question 33

De un ejemplo de el uso de la directiva *ngIf

Answer 33

@Component({
selector: ‘app-notification’,
template: <div *ngIf = ‘showNotif’> Show Notification </div>
})
export class AppNotificationComponent {
showNotif = true;
}

Question 34

En que año sale Angular 2?

Answer 34

2016

Question 35

De un ejemplo de el uso de una directiva de atributo

Answer 35

import { Directive, ElementRef } from ‘@angular/core’;

@Directive({
selector: ‘[appHighlight]’
})
export class HighlightDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.style.backgroundColor = ‘yellow’;
}
}
/*****/

<p>This is invalid</p>

Question 36

¿Cómo se crea un servicio?

Answer 36

ng generate service hero

Question 37

Why services?

Answer 37

Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.

Question 38

What is @input() decorator for?

Answer 38

It is for passing properties from parent to childs.

Question 39

Show an example of @input() decorator use

Answer 39

import { Component, Input } from ‘@angular/core’;
export class ItemDetailComponent {
@Input() item = ‘’;
}
/* From parent */
<app-item-detail [item]=”currentItem”></app-item-detail>

Question 40

How can we watch for changes on an @input() property?

Answer 40

We can watch them through OnChanges lifecycle hook.

Question 41

What is @OutPut() decorator for?

Answer 41

The @Output() decorator in a child component or directive lets data flow from the child to the parent.
To raise an event, an @Output() must have the type of EventEmitter

Question 42

How can we specify a template variable?

Answer 42

In the template, you use the hash symbol, #, to declare a template variable

Question 43

Give an example of template variable use

Answer 43

<input #phone placeholder=”phone number” />

Question 44

Mention some testing frameworks that could be used with Angular.

Answer 44

Jest, developed by FaceBook
Mocha, developed by T. J. Holowaychuk, ExpressJS Developer
Jasmin, BDD framework, developed by Pivotal Labs