Post
Ask Question

Show 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. margin: 0 0 2em 0;  
  3. list-style-type: none;  
  4. padding: 0;  
  5. width: 50em;  
  6. }  
  7. .articles li {  
  8. cursor: pointer;  
  9. position: relative;  
  10. left: 0;  
  11. background-color: #EEE;  
  12. margin: .5em;  
  13. padding: .3em 0;  
  14. height: 2em;  
  15. border-radius: 4px;  
  16. }  
  17. .articles li.selected:hover {  
  18. background-color: #BBD8DC !important;  
  19. color: white;  
  20. }  
  21. .articles li:hover {  
  22. color: #607D8B;  
  23. background-color: #DDD;  
  24. left: .1em;  
  25. }  
  26. .articles .text {  
  27. position: relative;  
  28. top: -3px;  
  29. }  
  30. .articles .badge {  
  31. display: inline-block;  
  32. font-size: small;  
  33. color: white;  
  34. padding: 0.8em 0.7em 0 0.7em;  
  35. background-color: #607D8B;  
  36. line-height: 1em;  
  37. position: relative;  
  38. left: -1px;  
  39. top: -4px;  
  40. height: 1.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.


Similar Articles