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

· Angular 2 - Getting Started
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.