Angular2 simple filter

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
    <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

.hidden {
  display: none !important;  

}

### Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

For opening

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ClientLogoCarouselComponent} from './client-logo-carousel.component'
import {ClientService} from './client.service'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <dashboard-logocarousel></dashboard-logocarousel>
    </div>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ClientLogoCarouselComponent ],
  bootstrap: [ App ]
  providers: [ ClientService ]
})
export class AppModule {}

/**
 * Created by matthew on 17/09/16.
 */

import {Component, OnInit} from '@angular/core';
import {Client} from './client.ts';
import {ClientService} from './client.service';
import {Observable} from 'rxjs/Rx';
declare var jQuery: any;

@Component({
    selector: 'dashboard-logocarousel',
    template: `
<div class="panel panel-widget">
  <div class="panel-title">
    Type in the box to filter on title
  </div>

  <div class="panel-search">
    <form>
      <input id="client-search" type="text" class="form-control" placeholder="Type part of client name...">
      <i class="fa fa-search icon"></i>
    </form>
  </div>
    <div class="panel-body">
<div id="dashboard-logo-carousel" class="topstats clearfix">

    <div id="logo-carousel" class="carousel slide" data-interval="false">

        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
                    <div class="col-xs-6 col-lg-4" *ngFor="let client of clients" [class.hidden]="!shouldDisplayClientLogo(client.name)">
                        {{ client.name }}
                    </div>
                </div>
            </div>
        </div>
        <!--/carousel-inner-->

    </div>
    <!--/logo-carousel-->
</div>
</div>
</div>
  `,
})
export class ClientLogoCarouselComponent implements OnInit {

    clients: Client[];
    searchTerm: string;

    constructor(private clientService: ClientService) {
    }

    ngOnInit(): void {
        this.clientService.getClients().then(clients => this.clients = clients);

        // Dynamic typing from search box to filter on client logos
        let keyups = Observable.fromEvent(jQuery('#client-search'), 'keyup')
            .map((e: KeyboardEvent) => e.target['value'])
            .debounceTime(400)
            .distinctUntilChanged();

        keyups.subscribe(data => {
            this.searchTerm = data;
        });
    }

    /**
     * This function is used to filter which client logos should be displayed.
     * Returns true if the current search term matches any part of the given name.
     * @param name
     * @returns {boolean}
     */
    shouldDisplayClientLogo(name: string): boolean {
        if (this.searchTerm == null) {
            // there is no user defined search term to filter on, so display all
            return true;
        }
     
        return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) !== -1;
    }


import {Injectable} from '@angular/core';
import {Client} from './client.ts';
import {CLIENTS} from './mock-clients.ts';

@Injectable()
export class ClientService {

    getClients(): Promise<Client[]> {
        return Promise.resolve(CLIENTS);
    }
}


export class Client {
    name:           string;
    logoImagePath:  string;
}

import {Client} from './client';

export const CLIENTS: Client[] = [
    {
        'name': 'ABC',
        'logoImagePath': 'assets/abc.png'
    },
    {
        'name': 'XYZ',
        'logoImagePath': 'assets/xyz.png'
    },

];

import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { ClientLogoCarouselComponent } from './client-logo-carousel.component';
import { ClientService }               from '../shared/client.service';

describe('ClientLogoCarouselComponent', () => {

    let comp:    ClientLogoCarouselComponent;
    let fixture: ComponentFixture<ClientLogoCarouselComponent>;

    let spy: jasmine.Spy;
    let clientLogosEl: DebugElement[];
    let clientService: ClientService;

    const testClient = {
        'name': 'SP',
        'logoImagePath': 'assets/img/client/sp.png'
    };

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                ClientLogoCarouselComponent
            ],
            providers: [
                ClientService
            ]
        });
    });

    fixture = TestBed.createComponent(ClientLogoCarouselComponent);
    comp = fixture.componentInstance;

    // ClientService actually injected into the component
    clientService = fixture.debugElement.injector.get(ClientService);

    spy = spyOn(clientService, 'getClients')
        .and.returnValue(Promise.resolve(testClient));

    clientLogosEl = fixture.debugElement.queryAll(By.css('.thumbnail'));
    console.log("ClientLogos=" + clientLogosEl);
});

import './polyfills.ts';

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
declare var System: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};



Promise.all([
  System.import('@angular/core/testing'),
  System.import('@angular/platform-browser-dynamic/testing')
])
  // First, initialize the Angular testing environment.
  .then(([testing, testingBrowser]) => {
    testing.getTestBed().initTestEnvironment(
      testingBrowser.BrowserDynamicTestingModule,
      testingBrowser.platformBrowserDynamicTesting()
    );
  })
  // Then we find all the tests.
  .then(() => require.context('./', true, /\.spec\.ts/))
  // And load the modules.
  .then(context => context.keys().map(context))
  // Finally, start Karma to run the tests.
  .then(__karma__.start, __karma__.error);