SHARE
TWEET

Untitled

a guest Oct 12th, 2017 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {Component,OnInit} from '@angular/core';
  2. import {Car} from './car';
  3. import {CarService} from './car.service';
  4. @Component({
  5.   selector: 'app-root',
  6.   templateUrl: './app.component.html',
  7.   styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10.   title = 'app';
  11. }
  12.  
  13. export class DataListDemo implements OnInit {
  14.  
  15.       cars: Car[];
  16.  
  17.       constructor(private carService: CarService) { }
  18.  
  19.       ngOnInit() {
  20.           this.carService.getCarsLarge().then(cars => this.cars = cars);
  21.       }
  22.   }
  23.    
  24. import {Injectable} from '@angular/core';
  25. import {Http, Response} from '@angular/http';
  26. import {Car} from './car';
  27. import 'rxjs/add/operator/toPromise';
  28.  
  29. @Injectable()
  30. export class CarService {
  31.  
  32.     constructor(private http: Http) {}
  33.  
  34.     getCarsLarge() {
  35.         return this.http.get('/assets/cars-large.json')
  36.                     .toPromise()
  37.                     .then(res => <Car[]> res.json().data)
  38.                     .then(data => { return data; });
  39.     }
  40. }
  41.    
  42. import { CarService } from './car.service';
  43. import { BrowserModule } from '@angular/platform-browser';
  44. import { NgModule } from '@angular/core';
  45. import { HttpModule } from '@angular/http';
  46. import {DataListModule} from 'primeng/primeng';
  47. import { AppComponent } from './app.component';
  48.  
  49.  
  50.  
  51. @NgModule({
  52.   declarations: [
  53.     AppComponent
  54.   ],
  55.   imports: [
  56.     BrowserModule, HttpModule, DataListModule
  57.   ],
  58.   providers: [CarService],
  59.   bootstrap: [AppComponent]
  60. })
  61. export class AppModule { }
  62.    
  63. <!--The content below is only a placeholder and can be replaced.-->
  64. <div style="text-align:center">
  65.   <h1>
  66.     Welcome to {{title}}!
  67.   </h1>
  68.   <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  69. </div>
  70. <h2>Here are some links to help you start: </h2>
  71. <ul>
  72.   <li>
  73.     <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  74.   </li>
  75.   <li>
  76.     <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  77.   </li>
  78.   <li>
  79.     <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  80.   </li>
  81. </ul>
  82. <p-dataList [value]="cars">
  83.   <ng-template let-car pTemplate="item">
  84.       Car content
  85.   </ng-template>
  86. </p-dataList>
  87.    
  88. export interface Car {
  89.     vin;
  90.     year;
  91.     brand;
  92.     color;
  93. }
RAW Paste Data
Top