feat(pipes): added some angular pipes like, json, number, date, etc. Added also language-service package.

Author: Ismaestro

README.md

@@ -65,6 +65,7 @@ Live DEMO [here](http://angularexampleapp.com/)!
 * CRUD: create, update and remove heroes
 * Custom example library
 * Search bar, to look for heroes
+* Angular Pipes
 * Custom loading page
 * Modal and toasts (snakbar)!
 * Unit tests with Jasmine and Karma including code coverage

package-lock.json

@@ -3,7 +3,7 @@
   "version": "5.2.0",
   "license": "MIT",
   "scripts": {
-    "start": "ng serve",
+    "start": "ng serve --aot",
     "build": "ng build --prod",
     "deploy": "ng build --prod --base-href / && angular-cli-ghpages",
     "test": "ng test --watch=false --code-coverage",
@@ -41,6 +41,7 @@
     "@angular/cdk": "5.1.1",
     "@angular/cli": "1.6.7",
     "@angular/compiler-cli": "5.2.3",
+    "@angular/language-service": "^5.2.9",
     "@angular/material": "5.1.1",
     "@angular/platform-server": "5.2.3",
     "@ngx-translate/core": "9.1.1",

package.json

@@ -5,7 +5,7 @@
             <span>{{ 'angularExampleApp' | translate }} 2018</span>
         </div>
         <div fxFlex="33" class="text-center">
-            <sample-component [locale]="currentLang"></sample-component>
+            {{currentDate | date:'fullDate'}}
         </div>
         <div fxFlex class="text-right" class.xs="footer-xs">
             <a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>

src/app/core/footer/footer.component.html

@@ -9,6 +9,7 @@ import {TranslateService} from '@ngx-translate/core';
 
 export class FooterComponent {
   currentLang: string;
+  currentDate = Date.now();
 
   constructor(private translateService: TranslateService) {
     this.currentLang = this.translateService.currentLang;

src/app/core/footer/footer.component.ts

@@ -18,7 +18,7 @@ <h3 mat-line [ngClass]="{'cp': hero.default}" (click)="seeHeroDetails(hero);"> {
                     <span>{{hero.alterEgo}}</span>
                 </p>
                 <div class="hero-actions">
-                    {{hero.likes}}
+                    {{hero.likes | number:'.0'}}
                     <mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
                               [matTooltipPosition]="'above'"
                               class="like-icon" (click)="like(hero)">
@@ -56,5 +56,10 @@ <h2 class="section-title">{{ 'createHero' | translate }}</h2>
             <div *ngIf="error">{{error | translate}}</div>
         </form>
     </div>
+
+    <div id="heroes-json">
+        <h2 class="section-title">{{ 'firstTwoHeroesById' | translate }}</h2>
+        <pre>{{heroes | slice:1:3 | json}}</pre>
+    </div>
 </div>
 <div class="clear"></div>

src/app/heroes/hero-list/hero-list.component.html

@@ -50,6 +50,14 @@ form {
   }
 }
 
+#heroes-json {
+  margin-top: 2rem;
+
+  pre {
+    margin-top: 1rem;
+  }
+}
+
 @media (max-width: 680px) {
   #left {
     width: 100%;

src/app/heroes/hero-list/hero-list.component.scss

@@ -87,3 +87,21 @@ snack-bar-container {
 .text-right {
   text-align: right;
 }
+
+pre {
+  background: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 3px solid #3f51b5;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: 15px;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  text-align: left;
+  word-wrap: break-word;
+}

src/assets/css/styles.scss

@@ -46,5 +46,6 @@
   "heroDetail": "Hero detail",
   "error404": "404 Error",
   "mayTheForce": "May the force be with you",
-  "updateBrowser": "You are using an old browser, please update it and reload the page."
+  "updateBrowser": "You are using an old browser, please update it and reload the page.",
+  "firstTwoHeroesById": "Heroes (1-2)"
 }

src/assets/i18n/en.json

@@ -46,5 +46,6 @@
   "heroDetail": "Detalle del heroe",
   "error404": "Error 404",
   "mayTheForce": "Que la fuerza te acompañe",
-  "updateBrowser": "Estas usando un navegador antiguo, por favor actualiza la versión y recarga la página."
+  "updateBrowser": "Estas usando un navegador antiguo, por favor actualiza la versión y recarga la página.",
+  "firstTwoHeroesById": "Heroes (1-2)"
 }