An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass
i am trying to learn angular2
i read through ngFor documentation but not sure how to display the liArraycontent values.
can you guys tell me how to display it.
providing my code below
http://plnkr.co/edit/8SzOc9GfgzvCBb7Fifvg?p=preview&open=app%2Fapp.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: <ul class= "master">
<li *ngFor ="let student of liArraycontent"> </li>
</ul>
})
export class AppComponent {
name = 'Angular';
liArraycontent = ["testing 1", "testing 2", "testing3"]
}
/
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
/
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styles: [`
li {
color: red;
}
`],
template: `<ul class= "master">
<li *ngFor ="let student of liArraycontent" (click) = "liClicked(this)"> {{student}} </li>
</ul>`
})
export class AppComponent {
name = 'Angular';
liArraycontent = ["testing 1", "testing 2", "testing3"]
this.liClicked = function(e1) {
alert('a');
}
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
import {ComponentFixture, TestBed, async,fakeAsync,inject} from '@angular/core/testing';
import { BrowserModule } from '@angular/platform-browser';
import {By} from "@angular/platform-browser";
import {DebugElement} from "@angular/core";
import { MockBackend, MockConnection } from '@angular/http/testing';
import { HttpModule, Http, XHRBackend, Response, ResponseOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {Component, ElementRef,OnInit,ViewChild} from '@angular/core';
import { SPORTSService } from '../../app/services/sports.service';
import {KendoGridComponent} from '../../app/components/grid/grid.component';
import {Signal} from '../../app/components/financials/finance-dashboard-title';
describe("sports titke search", () => {
console.log("testing")
let Component: KendoGridComponent;
let Fixture: ComponentFixture<KendoGridComponent>;
let textDebugElement: DebugElement;
let textElement: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ HttpModule ],
declarations:[KendoGridComponent,ProgressCircle],
providers:[DecodeService,SPORTSService,jumpService,saveService,TranslateService,TRANSLATION_PROVIDERS,{ provide: XHRBackend, useClass: MockBackend }]
}).compileComponents().then(() =>{
Fixture = TestBed.createComponent(KendoGridComponent);
Component = Fixture.componentInstance;
});
}));
it("jump criteria search",()=>{
let data= "{jumpId:0,operationType:search,jumpsDto:null,jumpsSearch:{networks:[1],title:'',titleType:,titleSubType:'',distributorName:'',jumpNumber:'',jumpStatus:'',jumpReference:'',packageName:''}}";
//let data = "ssoId:&name:&networkNo:1&deptRole:292&status:active&accessNetwork:2&permissionLevelId:1";
Component._dataSource = new kendo.data.DataSource
Component.gridSearch("jumps",data,'post');
});
});
documentsClicked(): void{
console.log("documentsClicked");
var myWindow = $(".commonLink");
myWindow.kendoWindow({
width: "600px",
water: "About Alvar Aalto",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
}
<div class="waterPaperDocInfo">
<span class="fa fa-file-text-o"></span>
<span class="commonLink" (click)="documentsClicked();"> {{hat.docsCount}} Documents</span> | Last Modified: {{hat.dateUpdate}} <span class="fa fa-clock-o">9:00 am</span>
</div>
sample working code http://jsfiddle.net/XY7HT/53/
providing related code below and complete code in the fiddle since no space to paste it here https://jsfiddle.net/9bwdk6xk/3/
<span class="commonLink" (click)="documentsClicked();"> {{hat.docsCount}} Documents</span> | Last Modified: {{hat.dateUpdate}} <span class="fa fa-clock-o">9:00 am</span>
</div>
<div id="win1" style="display:none">
<p>First Window</p>
<button type="button" id="open2">Open second Window</button>
<input type="file" name="batchFile" id="batchFile" title="Select file" />
</div>
documentsClicked(): void{
console.log("documentsClicked");
//var myWindow = $(".commonLink");
//myWindow.kendoWindow({
//var myWindow = $(".commonLink");
//myWindow.kendoWindow({
$("#win1").show().kendoWindow({
width: "600px",
water: "About Alvar Aalto",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
}
sample working code http://jsfiddle.net/XY7HT/53/
providing related code below and complete code in the fiddle since no space to paste it below https://jsfiddle.net/9bwdk6xk/9/
<div id="win1" style="display:none">
<p>First Window</p>
<button type="button" id="open2">Open second Window</button>
<input type="file" name="batchFile" id="batchFile" title="Select file" />
</div>
<div id="kgrid" >
<kendo-grid-template ></kendo-grid-template>
</div>
EXCEPTION: Error in app/components/sports/sport caused by: Cannot read property 'model' of undefined
ErrorHandler.handleError @ core.umd.js:3462
next @ core.umd.js:6924
schedulerFn @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:207
Zone.runTask @ zone.js:139
ZoneTask.invoke @ zone.js:304
core.umd.js:3464 ORIGINAL EXCEPTION: Cannot read property 'model' of undefined
ErrorHandler.handleError @ core.umd.js:3464
next @ core.umd.js:6924
schedulerFn @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:207
Zone.runTask @ zone.js:139
ZoneTask.invoke @ zone.js:304
<label class="fileContainer dragAndDropHolder" >
{{dragDrop}}
<input type="file" id="attachKickBrowseSim" [class.disabled]="isFingersLocked" (change)="changeListener($event)" />
</label>
/* On Change */
changeListener($event) : void {
this.swimming($event.target);
}
/*Encode File*/
swimming(inputValue: any): void {
var foul = this;
var file:File = inputValue.files[0];
var myReader:FileReader = new FileReader();
myReader.onloadend = (e) => {
this.encodeBase64 = myReader.result;
foul.fileSelect=$("#attachKickBrowseSim").val().replace(/^.*\\/, "");
if(foul.fileSelect==''){
foul.dragDrop = foul.clearSim;
}else{
foul.dragDrop= "";
foul.dragDrop= foul.fileSelect;
}
}
$('.addMouseKickForm').show();
if(inputValue.files.length>0)
{
myReader.readAsDataURL(file);
}
}
setup: function(app) {
// For example, to define custom handlers for some paths:
new ThirdPartyRoute(app, null);
}