<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<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>
ul {
margin:0;
padding:0;
list-style:none;
}
.c-seedContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 15px 10px;
box-sizing: border-box;
padding: 25px 30px;
margin: 28px 0;
}
.c-seedContainer.u-displayOnly {
user-select: none;
pointer-events: none;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fafafa;
}
.c-seedContainer.u-selectionSeed {
background-color: #ffff;
}
.c-seedContainer.u-selectionSeed span {
font-family: 'Roboto-Regular',sans-serif;
font-size: 34px;
letter-spacing: 0;
line-height: 40px;
margin: 10px 0;
border-radius: 4px;
background-color: #1f5af6;
font-weight: 500;
margin: 3px;
border: solid 1px #1751ec;
cursor: pointer;
font-size: 15px;
line-height: 15px;
color: #fff;
padding: 8px 15px;
}
.c-seedContainer.u-selectionSeed span.u-removeSeed {
border: dashed 1px #9ba6b2;
background-color: transparent;
color: transparent;
cursor: default;
}
span {
font-family: 'Roboto-Regular',sans-serif;
font-size: 34px;
letter-spacing: 0;
line-height: 40px;
margin: 10px 0;
font-size: 17px;
line-height: 17px;
margin: 0;
color: #263241;
padding: 5px 8px;
font-weight: 500;
}
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
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'+ 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'
},
//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, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<p>
Current behaviour: user clicks the blue tag and it goes into the array displayed above.
user clicks already selected blue tag and it duplicated in array. wanted behavious is that once selected
it goes into the new array and it is then unclickable in the blue tags part, but you can click it from the above part and
it will be visible and selectable in the blue part agains
</p>
<p>
TLDR: click blue tag and goes into another array, click tag in new array and it goes back to the blue array
</p>
<ul>
<li>
<div class="c-seedContainer u-displayOnly">
<span *ngFor="let m of matchArray; let i = index">{{ m }}</span>
</div>
</li>
<li>
<div class="c-seedContainer u-selectionSeed">
<span [class.u-removeSeed]="stateOfButton[i]" (click)="changeState(i,c)" *ngFor="let c of cloneSeedArrayForSelection; let i = index">{{ c }}</span>
</div>
</li>
</ul>
`,
})
export class App {
name:string;
seed: Array<any> = [
"ice",
"hockey",
"rubbish",
"traitor",
"mneumonic",
"chronical",
"stuff",
"entity",
"poo",
"junk",
"mcDonalds",
"Fruit",
"going",
"sweet"
]
cloneSeedArray: Array<any> = [];
cloneSeedArrayForSelection: Array<any> = [];
selectedIdx = 0;
stateOfButton: boolean[];
matchArray: Array<any> = [];
constructor() {
this.name = `Angular! v${VERSION.full}`
}
changeState(index, seedWord) {
// a) click item to add / remove a class
// b) add item to a new array
// c) compare both arrays to ensure they match
// d) if both arrays dont match show warning and allow to recreate
// this.selectedIdx = index;
console.log("index " + index)
this.matchArray.push(seedWord)
this.stateOfButton[index] = !this.stateOfButton[index];
console.log("seedWord " + seedWord)
}
ngAfterViewInit() {
this.cloneSeedArray = this.seed.slice();
this.cloneSeedArrayForSelection = this.shuffleArray( this.cloneSeedArray )
this.stateOfButton = Array(this.cloneSeedArrayForSelection.length).fill(false);
this.cd.detectChanges();
}
shuffleArray(d) {
for ( let c = d.length - 1; c > 0; c--) {
let b = Math.floor(Math.random() * (c + 1));
let a = d[c];
d[c] = d[b];
d[b] = a;
}
return d
};
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}