AhsanAyaz

export class WatchService {
  /**
   * @author Ahsan Ayaz
   * @desc Calculates the units and sets in string format.
   * @param unit value of the unit in numbers
   * @return {string} the string representation of the unit's value with at least 2 digits
   */
  getTimeString(unit: number): string {
    return (unit ? (unit > 9 ? unit : "0" + unit) : "00").toString();
  }

AhsanAyaz

import { Component, OnInit } from "@angular/core";
import { UsersService } from "./core/services/users.service";
import { first } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {

AhsanAyaz

<div class="users-page">
  <div class="users-page__loading" *ngIf="isLoadingUsers">
    Loading Users
  </div>
  <div class="users-age__main" *ngIf="!isLoadingUsers">
    <h3 class="users-page__main__heading">
      Users List
    </h3>
    <div class="users-page__main__search">
      <input type="text" [(ngModel)]="searchQuery" placeholder="search users by name" (keyup)="handleKeyUp($event)">

AhsanAyaz

<div class="item" [class.item--active]="isActive">
  <div class="item__img">
    <img [src]="item.picture.thumbnail">
  </div>
  <div class="item__content">
    <div class="item__content__name">{{item.name.first}} {{item.name.last}}</div>
    <div class="item__content__email">{{item.email}}</div>
  </div>
</div>

AhsanAyaz

import { Component, OnInit, QueryList, ViewChildren } from "@angular/core";
import { UsersService } from "./core/services/users.service";
import { first } from "rxjs/operators";
import { ListKeyManager } from "@angular/cdk/a11y";
import { ListItemComponent } from "./core/components/list-item/list-item.component"; // importing so we can use with `@ViewChildren and QueryList

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]

AhsanAyaz

...
import { ListKeyManager } from '@angular/cdk/a11y';
import { ListItemComponent } from './core/components/list-item/list-item.component';
import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';

...
export class AppComponent implements OnInit {
  ...
  keyboardEventsManager: ListKeyManager<any>;
  searchQuery: string;

AhsanAyaz

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import { UsersService } from './core/services/users.service';
import { first } from 'rxjs/operators';
import { ListKeyManager } from '@angular/cdk/a11y';
import { ListItemComponent } from './core/components/list-item/list-item.component';
import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';


@Component({
  selector: 'app-root',

AhsanAyaz

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

@Component({
  selector: 'app-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.scss']
})
export class ListItemComponent implements OnInit {
  @Input() item;
  @Output() itemSelected = new EventEmitter<any>();

AhsanAyaz

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

export interface LoggerConfig {
  prefix?: string;
  color?: string;
  enabled: boolean;
}

@Injectable({

AhsanAyaz

enum CarTransmission {
  Automatic = 200,
  Manual = 300
}

interface IMotorcycle {
  vType: "motorcycle"; // discriminant
  make: number; // year
}