02032019-Seccion6-Clase85

3. pipes/src/app/app.component.html

@@ -98,6 +98,16 @@
             <td> capitalizado:false </td>
             <td>{{ nombre2 | capitalizado:false }}</td>
           </tr>
+          <tr>
+            <td>{{ nombre }}</td>
+            <td> contrasena:{{ activar }}
+                <br>
+                <button (click)="activar = !activar"
+                  type="button"
+                  class="btn btn-outline-primary">Activar/desactivar</button>
+            </td>
+            <td>{{ nombre | contrasena:activar }}</td>
+          </tr>
         </tbody>
       </table>
 
@@ -109,6 +119,10 @@
       <h4>JSON</h4>
       <pre>      {{ heroe | json }}        </pre>
 
+      <h4>Youtube</h4>
+      <hr>
+      <iframe width="560" height="315" [src]=" video | domseguro:'https://www.youtube.com/embed/'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 
 </div>
 

3. pipes/src/app/app.component.ts

@@ -35,5 +35,8 @@ export class AppComponent {
 
   fecha = '2019-01-01';
 
+  video = '4VczGXNf5Cc';
+
+  activar = true;
 
 }

3. pipes/src/app/app.module.ts

@@ -10,12 +10,16 @@ import { LOCALE_ID } from '@angular/core';
 
 import localeEs from '@angular/common/locales/es';
 import { registerLocaleData } from '@angular/common';
+import { DomseguroPipe } from './pipes/domseguro.pipe';
+import { ContrasenaPipe } from './pipes/contrasena.pipe';
 registerLocaleData(localeEs);
 
 @NgModule({
   declarations: [
     AppComponent,
-    Capitalizado
+    Capitalizado,
+    DomseguroPipe,
+    ContrasenaPipe
   ],
   imports: [
     BrowserModule

3. pipes/src/app/pipes/contrasena.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'contrasena'
+})
+export class ContrasenaPipe implements PipeTransform {
+
+  transform(value: string, activo: boolean): any {
+    let RegEXP = /(\w+)\s(\w+)/;
+    if (activo) {
+      value = value.replace( RegEXP, '**********' );
+      console.log(value);
+    }
+    return value;
+  }
+
+}

3. pipes/src/app/pipes/domseguro.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+
+@Pipe({
+  name: 'domseguro'
+})
+export class DomseguroPipe implements PipeTransform {
+
+  constructor ( private domSanitizer: DomSanitizer){  }
+  transform(value: string, url: string): any {
+    return this.domSanitizer.bypassSecurityTrustResourceUrl( url + value );
+  }
+
+}