first commit

difagume · Feb 20, 2018 · 15746e5 · 15746e5
1 parent ea36a22
commit 15746e5
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -25,3 +25,4 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+# pipes
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,20 +1,63 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<div class="container">
+  <br>
+  <h1>Pipes</h1>
+  <hr>
+
+  <table class="table">
+    <thead class="thead-dark">
+      <tr>
+        <th scope="col">Variable</th>
+        <th scope="col">Pipe</th>
+        <th scope="col">Producto</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ nombre }}</td>
+        <td> uppercase </td>
+        <td>{{ nombre | uppercase }}</td>
+      </tr>
+      <tr>
+        <td>{{ nombre }}</td>
+        <td> lowercase </td>
+        <td>{{ nombre | lowercase }}</td>
+      </tr>
+      <tr>
+        <td>{{ nombre }}</td>
+        <td> slice:3 </td> <!-- corta o elimina la 3 primeras secciones -->
+        <td>{{ nombre | slice:3 }}</td>
+      </tr>
+      <tr>
+        <td>{{ nombre }}</td>
+        <td> slice:0:3 </td>
+        <td>{{ nombre | slice:0:3 }}</td>
+      </tr>
+      <tr>
+        <td>{{ arreglo }}</td>
+        <td> slice:1:5 </td>
+        <td>{{ arreglo | slice:1:5 }}</td>
+      </tr>
+      <tr>
+        <td>{{ PI }}</td>
+        <td> number </td>
+        <td>{{ PI | number }}</td>
+      </tr>
+      <tr>
+        <td>{{ PI }}</td>
+        <td> number:'3.0-0' </td>
+        <td>{{ PI | number:'3.0-0' }}</td>
+      </tr>
+      <tr>
+        <td>{{ PI }}</td>
+        <td> number:'1.0-2' </td>
+        <td>{{ PI | number:'1.0-2' }}</td>
+      </tr>
+    </tbody>
+  </table>
 
+  <h4>Slice</h4>
+  <ul>
+    <li *ngFor="let item of arreglo | slice:5:20">{{ item }}</li>
+  </ul>
+
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  nombre = "Diego";
+  arreglo = [1,2,3,4,5,6,7,8,9,10];
+  PI = Math.PI;
 }
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,21 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Pipes</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head>
+
 <body>
   <app-root></app-root>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
+
 </html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,4 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
		## Further help

		To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
		# pipes