Angular and RxJS Online Test

An RPG game lets you assign points to the strength and speed attributes of your character. The video below shows how 5 points are supposed to be assigned.

The available points are passed in the totalPoints parameter to initialize the UI.

Complete the CharacterPoints component so that the UI behaves as shown in the video. When initialized, all points should be available, and both attributes should start at 0.

The code to locally run the example case from the video is available here.

An online streaming platform uses the following RxJS code to log the number of seconds passed in a video:

const seconds = interval(1000).pipe(
  map((x) => x + 1),
  startWith(0)
);

const logger = seconds.subscribe((x) =>
  console.log(`Seconds passed: ${x}`)
);

setTimeout(() => {
  logger.unsubscribe();
}, 5000);

What options will be true about seconds for the code above?

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://tinyurl.com/im-gal-1st">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-2nd">
    <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://tinyurl.com/im-gal-2nd">
    <button class="remove">X</button>
  </div>
</div>

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>
    <address>
      <p>Third Avenue</p>
      <p>New York</p>
      <p>10001</p>
    </address>
  </li>
  <li>
    <app-address>
      <p>Constitution Avenue</p>
      <p>Washington</p>
      <p>20001</p>
    </address>
  </li>
</ul>

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

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.

An Angular application uses the following routing module:

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { ItemDetailComponent } from './item-detail.component';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },

  { path: 'detail/:id', component: ItemDetailComponent, outlet: 'route1' }
];

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

Consider the following RxJS code for pushing and logging weather data:

const weatherSubject = new _______________({temperature: 0 , rainChance: 0});
const sendWeatherData = (weatherData) => {
  weatherSubject.____(weatherData);
};

sendWeatherData({temperature: 35.5 , rainChance: 20});
sendWeatherData({temperature: 34 , rainChance: 25});

weatherSubject.subscribe((x) => {
  console.log("Current Temperature: " +  x.temperature);
});

sendWeatherData({temperature: 28 , rainChance: 50});

weatherSubject.subscribe((x) => {
  console.log("Chance of rain: " + x.rainChance);
});

sendWeatherData({temperature: 25 , rainChance: 90});

Fill in the blanks above so that the following output is produced after running it:

Current Temperature: 34
Current Temperature: 28
Chance of rain: 50
Current Temperature: 25
Chance of rain: 90

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.

Consider the following RxJS code for testing how a given damage Subject affects the health of a Player object in a game:

class Player {
  name: string;
  health: number;
  damageSubscription: Subscription;

  constructor(name, damageSubject) {
    this.name = name;
    this.health = 100;
    this.damageSubscription = damageSubject.subscribe((damage) => {
      this.health -= damage;
      console.log(this.name + " was hurt for " + damage + " damage");
    });
  }

  takeCover() {
    this.damageSubscription.unsubscribe();
    interval(1000)
      .pipe(
        takeWhile(() => this.health < 100),
        map(() => 10),
        tap(() => console.log(this.name + " is healing, current health is " + this.health))
      )
      .subscribe((heal) => {
        this.health += heal;
      });
  }
}
const explosion = new Subject();
const john = new Player("John", explosion);
const sam = new Player("Sam", explosion);

explosion.next(10);
john.takeCover();
explosion.next(20);

const paul = new Player("Paul", explosion);
sam.takeCover();
explosion.next(20);
paul.takeCover();

What options will be true after the above code is run?

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.

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