Observables, promesas, metatag...

src/app/pages/pages-routing.module.ts

@@ -5,16 +5,20 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { ProgressComponent } from './progress/progress.component';
 import { Graficas1Component } from './graficas1/graficas1.component';
 import { AccountSettingsComponent } from './account-settings/account-settings.component';
+import { PromesasComponent } from './promesas/promesas.component';
+import { RxjsComponent } from './rxjs/rxjs.component';
 
 const pagesRoutes: Routes = [
   {
     path: '',
     component: PagesComponent,
     children : [
-      {path: 'dashboard', component: DashboardComponent},
-      {path: 'progress', component: ProgressComponent},
-      {path: 'graficas1', component: Graficas1Component},
-      {path: 'account-settings', component: AccountSettingsComponent},
+      {path: 'dashboard', component: DashboardComponent, data: { titulo: 'Dashboard'}},
+      {path: 'progress', component: ProgressComponent, data: { titulo: 'Progress'}},
+      {path: 'graficas1', component: Graficas1Component, data: { titulo: 'Gráficas'}},
+      {path: 'promesas', component: PromesasComponent, data: { titulo: 'Promesas'}},
+      {path: 'rxjs', component: RxjsComponent, data: { titulo: 'RxJs'}},
+      {path: 'account-settings', component: AccountSettingsComponent, data: { titulo: 'Ajustes del tema'}},
       {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
     ]
   }

src/app/pages/pages.module.ts

@@ -22,6 +22,8 @@ import { Graficas1Component } from './graficas1/graficas1.component';
 import { IncrementadorComponent } from '../components/incrementador/incrementador.component';
 import { GraficoDonaComponent } from '../components/grafico-dona/grafico-dona.component';
 import { AccountSettingsComponent } from './account-settings/account-settings.component';
+import { PromesasComponent } from './promesas/promesas.component';
+import { RxjsComponent } from './rxjs/rxjs.component';
 
 @NgModule({
   declarations: [
@@ -31,7 +33,9 @@ import { AccountSettingsComponent } from './account-settings/account-settings.co
     Graficas1Component,
     IncrementadorComponent,
     GraficoDonaComponent,
-    AccountSettingsComponent
+    AccountSettingsComponent,
+    PromesasComponent,
+    RxjsComponent
 
 
   ],

src/app/pages/promesas/promesas.component.html

@@ -0,0 +1 @@
+<p>promesas works!</p>

src/app/pages/promesas/promesas.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-promesas',
+  templateUrl: './promesas.component.html',
+  styles: []
+})
+export class PromesasComponent implements OnInit {
+
+  constructor() {
+
+    this.contar3().then (
+      // () => console.log ('Termino')
+      mensaje => console.log ('Termino', mensaje)
+    )
+    .catch ( error => console.log ('Error'));
+   }
+
+  ngOnInit() {
+  }
+
+  contar3() {
+
+    return  new Promise( (resolve, reject) => {
+      let contador = 0;
+      const intervalo = setInterval( () => {
+        contador += 1;
+        console.log (contador);
+        if ( contador === 3) {
+          resolve('OK!');
+          // reject('Soy el texto del error');
+          clearInterval( intervalo);
+        }
+      }, 1000);
+    });
+
+  }
+}

src/app/pages/rxjs/rxjs.component.html

@@ -0,0 +1 @@
+<p>rxjs works!</p>

src/app/pages/rxjs/rxjs.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+// tslint:disable-next-line: import-blacklist
+import { Observable, Subscriber, Subscription } from 'rxjs';
+import { retry, map , filter} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-rxjs',
+  templateUrl: './rxjs.component.html',
+  styles: []
+})
+export class RxjsComponent implements OnInit, OnDestroy {
+
+  suscripction: Subscription;
+
+  constructor() {
+
+    this.suscripction = this.regresaObservable()
+    // .pipe(
+      // retry(2)
+    // )
+    .subscribe(
+      numero =>  console.log('Subs ', numero),
+      error => console.error ('Error'),
+      () => console.log('El observador termino')
+    );
+   }
+
+
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy() {
+    console.log( 'Me voy del componente');
+    this.suscripction.unsubscribe();
+  }
+
+  regresaObservable(): Observable<any> {
+
+    return new Observable ( (observer: Subscriber<any>) => {
+
+      let contador = 1;
+
+      const intervalo = setInterval ( () => {
+        contador ++;
+
+        const salida = {
+          valor: contador
+        };
+        observer.next(salida);
+
+        // if ( contador === 3) {
+        //   clearInterval(intervalo);
+        //   observer.complete();
+        // }
+
+        // if ( contador === 2) {
+        //   // clearInterval(intervalo);
+        //   observer.error('Auxilio!!!');
+        // }
+
+      }, 1000);
+    }).pipe(
+      map( resp => resp.valor),
+      filter ( (valor, index) => {
+        if (  ( valor % 2) === 1) {
+          // Numero impar
+          return true;
+        } else {
+          // Numero par
+          return false;
+        }
+      })
+    );
+  }
+}

src/app/services/shared/sidebar.service.ts

@@ -12,7 +12,9 @@ export class SidebarService {
       subMenu: [
         {titulo: 'Dashboard', url: '/dashboard', icono: 'mdi mdi-gauge'},
         {titulo: 'ProgressBar', url: '/progress', icono: 'mdi mdi-gauge'},
-        {titulo: 'Gráficas', url: '/graficas1', icono: 'mdi mdi-gauge'}
+        {titulo: 'Gráficas', url: '/graficas1', icono: 'mdi mdi-gauge'},
+        {titulo: 'Promesas', url: '/promesas', icono: 'mdi mdi-gauge'},
+        {titulo: 'Rxjs', url: '/rxjs', icono: 'mdi mdi-gauge'}
       ]
     }
   ];

src/app/shared/breadcrumbs/breadcrumbs.component.html

@@ -2,15 +2,15 @@
 <!-- ============================================================== -->
 <div class="row page-titles">
     <div class="col-md-5 align-self-center">
-        <h3 class="text-themecolor">Blank Page</h3>
+        <h3 class="text-themecolor">{{titulo}}</h3>
     </div>
     <div class="col-md-7 align-self-center">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="javascript:void(0)">Home</a>
             </li>
             <li class="breadcrumb-item">pages</li>
-            <li class="breadcrumb-item active">Blank Page</li>
+            <li class="breadcrumb-item active">{{titulo}}</li>
         </ol>
     </div>
 </div>

src/app/shared/breadcrumbs/breadcrumbs.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivationEnd } from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+import { Title, Meta, MetaDefinition } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-breadcrumbs',
@@ -7,9 +10,32 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BreadcrumbsComponent implements OnInit {
 
-  constructor() { }
+  titulo: string;
+  constructor( private router: Router, private title: Title, private meta: Meta) {
+    this.getDataRoute()
+    .subscribe( data => {
+      this.titulo = data.titulo;
+      this.title.setTitle(this.titulo);
+
+      const metaTag: MetaDefinition = {
+        name: 'description',
+        content: this.titulo
+      };
+      this.meta.updateTag(metaTag);
+
+
+    });
+  }
 
   ngOnInit() {
   }
 
+  getDataRoute() {
+    return this.router.events.pipe(
+      filter( evento => evento instanceof ActivationEnd),
+      filter( (evento: ActivationEnd) => evento.snapshot.firstChild === null),
+      map( (evento: ActivationEnd) => evento.snapshot.data )
+
+    );
+  }
 }