<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest';
window.ngxVersion = '0.2.1';
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js"></script>
<!-- Angular -->
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-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="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
body {
padding: 2rem;
}
.custom .search-results button {
padding: 0;
background: transparent;
}
.custom .search-results button.list-group-item.active div.bg-danger {
background-color: rgba(255, 0, 0, .5) !important;
}
/* adopted from http://callmenick.com/_development/input-text-styles/ */
/* ============================================================
STYLE 3
============================================================ */
.style-3 input[type="text"] {
padding: 10px;
border: solid 5px #c9c9c9;
-webkit-box-shadow: inset 0 0 0 1px #707070;
-moz-box-shadow: inset 0 0 0 1px #707070;
box-shadow: inset 0 0 0 1px #707070;
-webkit-transition: box-shadow 0.3s, border 0.3s;
-moz-transition: box-shadow 0.3s, border 0.3s;
-o-transition: box-shadow 0.3s, border 0.3s;
transition: box-shadow 0.3s, border 0.3s;
}
.style-3 input[type="text"]:focus, .style-3 input[type="text"].focus {
border: solid 5px #969696;
}
custom-template-list .list-group-item.active {
background-color: red;
}
### 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.
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
var systemConfig = {
//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'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
'ngx-typeahead': 'npm:ngx-typeahead@' + ngxVersion + '/bundles/ngx-typeahead.umd.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
};
System.config(systemConfig);
module.exports = systemConfig;
//main entry point
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxTypeaheadModule } from 'ngx-typeahead';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { AppComponent } from './app';
import { StaticListComponent } from './static-list';
import { HttpListComponent } from './http-list';
import { CustomTemplateListComponent } from './custom-template-list';
@NgModule({
imports: [
BrowserModule,
NgxTypeaheadModule,
HttpClientModule,
HttpClientJsonpModule
],
exports: [
StaticListComponent,
HttpListComponent,
CustomTemplateListComponent
],
declarations: [
AppComponent,
StaticListComponent,
HttpListComponent,
CustomTemplateListComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
//our root app component
import {Component, ViewEncapsulation} from '@angular/core';
import * as config from '../config';
@Component({
selector: 'my-app',
//encapsulation: ViewEncapsulation.NONE,
styles: [`
.search-results {
height: 100%;
// overflow: scroll;
}
.title {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
color: white;
width: 100%;
}
.title small {
color: #eaeaea;
}
.custom .search-results .bg-danger {
background-color: tomato;
}
`],
template: `
<h2 class="app-title alert alert-primary">{{ title }}</h2>
<section class="col-sm-12">
<div class="search-results style-3">
<input type="text" [value]="query" placeholder="type to see jsonp results from google"
ngxTypeahead class="col-sm-12"
[taUrl]="url"
[taParams]="params"
(taSelected)="handleResultSelected($event)"
>
</div>
</section>
<custom-template-list></custom-template-list>
<http-list></http-list>
<static-list></static-list>
`
})
export class AppComponent {
title = 'This is Angular TypeAhead v' + systemConfig.map['ngx-typeahead'].split('@')[1].split('/')[0];
public url = 'http://suggestqueries.google.com/complete/search';
public params = {
hl: 'en',
ds: 'yt',
xhr: 't',
client: 'youtube'
};
public query = '';
handleResultSelected (result) {
this.query = result;
}
generateWord() {
return chance.word();
}
}
[
"john",
"snow",
"halisi",
"sam",
"little finger",
"arya"
]
//our root app component
import {Component} from '@angular/core';
@Component({
selector: 'static-list',
template: `
<h3 class="alert alert-info">Using STATIC list</h3>
<section class="col-sm-12">
<div class="search-results style-3">
<input type="text" placeholder="type a value from the list below"
ngxTypeahead class="col-sm-12"
[value]="query3"
[taList]="staticList"
(taSelected)="handleStaticResultSelected($event)">
</div>
</section>
<pre><code>{{ staticList | json }}</code></pre>
`
})
export class StaticListComponent {
public query3 = '';
public staticList = [
"guitar",
"drums",
"bass",
"electric guitars",
"keyboards",
"mic",
"bass guitars",
"trumpet",
"horns",
"guitar workshops",
"pedals"
];
public handleStaticResultSelected (result) {
this.query3 = result;
}
}
//our root app component
import {Component} from '@angular/core';
@Component({
selector: 'http-list',
template: `
<h3 class="alert alert-success">example using HTTP</h3>
<section class="col-sm-12">
<div class="search-results style-http style-3">
<input type="text" [value]="query" placeholder="type to see http response"
ngxTypeahead class="col-sm-12"
[taUrl]="url"
[taParams]="params"
[taApi]="api"
(taSelected)="handleHttpResultSelected($event)"
>
</div>
</section>
`
})
export class HttpListComponent {
public url = 'data.json';
public api = 'http';
public params = {};
public query = '';
public handleHttpResultSelected (result) {
this.query = result;
}
}
//our root app component
import {Component} from '@angular/core';
@Component({
selector: 'custom-template-list',
template: `
<h3 class="alert alert-warning">example with custom item template</h3>
<section class="col-sm-12 custom">
<div class="search-results style-3">
<input type="text" [value]="query" placeholder="type to see item template"
ngxTypeahead class="col-sm-12"
[taUrl]="url"
[taParams]="params"
[taItemTpl]="itemTpl"
(taSelected)="handleResultSelected($event)"
>
</div>
<ng-template #itemTpl let-result class="list-item">
<div class="bg-danger">
<i class="fa fa-heart"></i> <strong>{{ result.result }}</strong>
</div>
</ng-template>
</section>
`
})
export class CustomTemplateListComponent {
public url = 'http://suggestqueries.google.com/complete/search';
public params = {
hl: 'en',
ds: 'yt',
xhr: 't',
client: 'youtube'
};
public query = '';
public handleResultSelected (result) {
this.query = result;
}
}