Show data using Angular 2

In this article, you will learn how to display data using Angular 2.

To know about basics and how to getting started with Angular 2, Please read this article first and add mandatory files and npm_modules.

 
Getting Started
 
· Start Visual Studio
· Create a new website
· Provide the name and the location of website
· Click "Next".

Once all files are added and npm_modules installed, now let’s work on how to show data.

First of all, add a new component and make some properties with data type.

  1. export class Article {  
  2. constructor(  
  3. public Id: Number,  
  4. public Title: string,  
  5. public Summary: string  
  6. ) { }  
  7. }  

Add a new component and give references for CSS and HTML like this.

First add some data in article array.

  1. import { Component } from '@angular/core';  
  2. import { Article } from '../shared/article';  
  3. const ARTICLES: Article[] = [  
  4. { Id: 1, Title: 'Angular 2 - Getting Started', Summary: 'In this article, you will learn how to start working with Angular 2.' },  
  5. { Id: 2, Title: 'How to detect image Faces and make Blur using Cognitive Face API with .NET Core', Summary: 'In this article, you will learn how to detect total faces and image and make them Blur using Cognitive Face API with .NET Core.' },  
  6. { Id: 3, Title: 'Getting Started With Microsoft Project 2016', Summary: 'In this article, you will learn how to getting started with Microsoft Project 2016 from scratch.' },  
  7. { Id: 4, Title: 'Get Image Attributes using Cognitive Services face API in WPF', Summary: 'In this article you will learn how to get the image attributes like Age, Gender using Cognitive Services face API in WPF.' },  
  8. { Id: 5, Title: 'Cognitive Services face API in WPF', Summary: 'In this article, I will explain how to use Cognitive Services face API in WPF.' }  
  9. ];  
  1. @Component({  
  2. selector: 'article-app',  
  3. templateUrl: './app/article/article.component.html',  
  4. styleUrls: ['./app/styles/styles.css']  
  5. })  
  6. export class ArticleComponent {  
  7. debugger;  
  8. title = 'Top 5 Articles';  
  9. articles = ARTICLES;  
  10. selectedArticle: Article;  
  11. onSelect(article: Article): void {  
  12. this.selectedArticle = article;  
  13. }  
  14. }  
Now add a new HTML page and CSS.

HTML:

  1. <div>  
  2. <h3>{{title}}</h3>  
  3. <ul class="articles">  
  4. <li *ngFor="let article of articles"  
  5. [class.selected]="article === selectedArticle"  
  6. (click)="onSelect(article)">  
  7. <span class="badge">{{article.Id}}</span> {{article.Title}}  
  8. </li>  
  9. </ul>  
  10. </div>  

CSS:

  1. .articles {  
  2. margin0 0 2em 0;  
  3. list-style-typenone;  
  4. padding0;  
  5. width50em;  
  6. }  
  7. .articles li {  
  8. cursorpointer;  
  9. positionrelative;  
  10. left: 0;  
  11. background-color#EEE;  
  12. margin: .5em;  
  13. padding: .3em 0;  
  14. height2em;  
  15. border-radius: 4px;  
  16. }  
  17. .articles li.selected:hover {  
  18. background-color#BBD8DC !important;  
  19. colorwhite;  
  20. }  
  21. .articles li:hover {  
  22. color#607D8B;  
  23. background-color#DDD;  
  24. left: .1em;  
  25. }  
  26. .articles .text {  
  27. positionrelative;  
  28. top: -3px;  
  29. }  
  30. .articles .badge {  
  31. display: inline-block;  
  32. font-sizesmall;  
  33. colorwhite;  
  34. padding0.8em 0.7em 0 0.7em;  
  35. background-color#607D8B;  
  36. line-height1em;  
  37. positionrelative;  
  38. left: -1px;  
  39. top: -4px;  
  40. height1.8em;  
  41. margin-right: .8em;  
  42. border-radius: 4px 0 0 4px;  
  43. }  

Now add references of components on Module:

  1. import { NgModule } from '@angular/core';    
  2. import { BrowserModule } from '@angular/platform-browser';    
  3. import { FormsModule } from '@angular/forms';    
  4. import { HttpModule } from '@angular/http';    
  5. import { ArticleComponent } from './article/article.component';    
  6. import { ArticleDetailComponent } from './article/article-detail.component';    
  7. @NgModule({    
  8. imports: [BrowserModule, FormsModule, HttpModule],    
  9. declarations: [ArticleComponent, ArticleDetailComponent],    
  10. providers: [],    
  11. bootstrap: [ ArticleComponent, ArticleDetailComponent]    
  12. })    
  13. export class AppModule { };   
Now add component and other refrences on Index.html 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title></title>  
  5. <meta charset="utf-8" />  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">  
  7. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  
  8. <link href="app/styles/styles.css" rel="stylesheet" />  
  9. <!-- Polyfill(s) for older browsers -->  
  10. <script src="node_modules/core-js/client/shim.min.js"></script>  
  11. <script src="node_modules/zone.js/dist/zone.js"></script>  
  12. <script src="node_modules/reflect-metadata/Reflect.js"></script>  
  13. <script src="node_modules/systemjs/dist/system.src.js"></script>  
  14. <!-- Configure SystemJS -->  
  15. <script src="systemjs.config.js"></script>  
  16. <script>  
  17. System.import('app').catch(  
  18. function (err)  
  19. { console.error(err); });  
  20. </script>  
  21. </head>  
  22. <body>  
  23. <header class="navbar navbar-inner navbar-fixed-top">  
  24. <nav class="container">  
  25. <div class="navbar-header">  
  26. <span class="app-title">My Latest Articles</span>  
  27. </div>  
  28. </nav>  
  29. </header>  
  30. <main class="container">  
  31. <article-app>Loading...</article-app>  
  32. </main>  
  33. </body>  
  34. </html>  

Now run the application:


Conclusion

In this article, we have learnt how to display data in Angular 2. In next article, I will show how to display article summary when click on article title. If you have any question or comments, then drop me a line in C# Corner comments section.