This Angular and TypeScript Online Test Separates Good From Bad Hires

The following code initializes three types representing the colors: red, green and blue.

type ColorType = [string, number, number, number];
let red: ColorType = ['Red', 1, 0, 0];
let green: [string, number, number, number] = ['Green', 0, 1, 0];
let blue = ['Blue', 0, 0, 1];

Select the statements that are correct.

Which of the following statements about components in Angular are correct?

The following code initializes strings as three different types and attempts to make them uppercase. Which statements about the behavior of the typescript compiler are correct?

let stringType: string = "string type";
stringType.toUpperCase();

let anyType: any = "any type";
anyType.toUpper();
anyType.toUpperCase();

let objectType: Object = "object type";
objectType.toUpperCase();

Consider the following component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'welcome',
  template: `<h1>Welcome to {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class WelcomeComponent  {
  @Input() name: string;
}

Select the statements about its use (in another components template or module) that are correct.

Consider the following component, which can be used to model an animal and the noise it makes.

import {Component, Input, Output} from '@angular/core';

@Component({
  selector: 'animal-noise',
  template: `
    <span>{{animal}}</span>
    <button (click)="makeNoise()">Make noise</button>
  `
})
export class AnimalNoise {
  @Input('animal') animal: string;
  @Input('noise') noise: string;

  makeNoise() {
    alert(`${this.noise}`);
  }
}

Select the statements about the AnimalNoise component that are correct.

The Circle class is used in a prototype for a game engine. Finish the class so that:

• It inherits from the GameObject class
• It has one more public field, radius
• It has only one constructor, that sets the radius, and sets the x and y fields using the GameObject class

For example, executing the following code:

let circle = new Circle(10, 50, 8);
console.log(circle.x, circle.y, circle.radius);

should print "10 50 8".

Finish the ShoppingList component. The component will receive an array of strings as the items array. It should render one li element per item in the array.

For example, if the items array is ["Bread", "Eggs", "Milk"], the rendered HTML should look like:

<ul>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
</ul>

The code for running the example case locally is provided here.

Finish the AddressListComponent's template so that it renders one li element per address and it correctly one-way binds each field of the AddressComponent field.

For example, if the addresses array is:

[{ street: "Third Avenue‎", city: "New York", zipCode: "10001" },
 { street: "Constitution Avenue", city: "Washington", zipCode: "20001" }]

the template should render to:

<ul>
  <li>
    <app-address>
      <p>Third Avenue</p>
      <p>New York</p>
      <p>10001</p>
    </app-address>
  </li>
  <li>
    <app-address>
      <p>Constitution Avenue</p>
      <p>Washington</p>
      <p>20001</p>
    </app-address>
  </li>
</ul>

The code for running the example case locally is provided here. 

Your company assigns each customer a membership ID, and you are implementing a check digit for those IDs.

The check digit should be calculated by adding up all digits in each membership ID. If the result of the sum is a number with more than a single digit, another iteration is required, and the digits of the result should also be added together. This process should repeat until a single-digit number is calculated.

For example, for the membership ID "55555" the sum of all digits is 25. Because this is not a single-digit number, 2 and 5 would be added, and the result, 7, would be the check digit.

Extend the Permission enum so that it has the following fields:

• Read, which should have a value of 1
• Write, which should have a value of 2
• Execute, which should have a value of 4

Extend the getPermissionList function so that it accepts a combination of several Permission enums and returns an array of strings which are the names of the Permissions.

For example, executing:

getPermissionList(Permission.Read | Permission.Write);

should return [ 'Read', 'Write' ] in any order.

Consider the following application module:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent }        from './home.component';
import { ItemDetailComponent }  from './item-detail.component';
const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home',  component: HomeComponent },
    { path: 'detail/:id', component: ItemDetailComponent, outlet: 'route1' }
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

Which of the following statements about the routers behavior are correct?

Consider the following code:

class Positionable {
  locationX: number = 0;
  locationY: number = 0;
  moveTo(toX: number, toY: number) {
    this.locationX = toX;
    this.locationY = toY;
  }
}

class Rotatable {
  orientation: number = 0;
  rotate(orientation: number) {
    this.orientation += orientation;
  }
}

class MovingObject {
  locationX: number = 0;
  locationY: number = 0;
  orientation: number = 0;
  printPosition(){
    console.log(this.locationX, this.locationY);
  }
}

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name];
    });
  });
}

applyMixins(MovingObject, [Positionable, Rotatable]);
let mover = new MovingObject();

Select the statements that are correct.

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://bit.ly/3lmYVna">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://bit.ly/3flyaMj">
    <button class="remove">X</button>
  </div>
</div>

Implement the ImageGallery component that accepts a links input and renders the gallery described above so that the first item in the links input is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://bit.ly/3flyaMj">
    <button class="remove">X</button>
  </div>
</div>

The code for running the example case locally is provided here.