Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>


    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
    'angularfire2':               'npm:angularfire2',
      'firebase':                   'npm:firebase@3.7.1'

  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    },
      angularfire2: {
        main: 'angularfire2.js'
      },
      firebase: {
        main: 'firebase.js'
      }
  }
});

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';


platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { Router, NavigationStart } from '@angular/router'


@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.html'
})
export class App {
 public titulo: string;
  public currentRoute: string;
  constructor( private _router: Router){
      this.titulo = "ALBUMS";
       _router.events.subscribe(event => {
    if(event instanceof NavigationStart) {
        this.currentRoute = event.url;
    }
   
  });
      console.log(this._router.url);
  }
}

import { Component } from '@angular/core';

@Component({
    selector: 'home',
    templateUrl: './src/home.component.html'
})
export class HomeComponent{
    public titulo: string;
    
    constructor(){
        this.titulo = "Webapp de conexión con Firebase";
    }
}

<div class="col-lg-10 col-lg-offset-1">
    <header class="col-lg-12">
        <h1>{{titulo}}</h1>
    </header>
    <nav class="col-lg-12" *ngIf="currentRoute == '/admin' || currentRoute == '/home' || currentRoute == '/'">
        <ul>
            <li><a [routerLink]="['/home']">Home</a></li>
            <li><a [routerLink]="['/admin']">Admin</a></li>
        </ul>
    </nav>
    <section class="col-lg-12">
        <router-outlet></router-outlet>
    </section>
    <footer class="col-lg-12">
        Prueba4-firebase 
    </footer>
</div>

<h1>{{titulo}}</h1>

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//componentes
import {HomeComponent} from './home.component';
import {AdminComponent} from './admin.component';
import {AlbumEditComponent} from './album-edit.component';
import {AlbumDetailComponent} from './album-detail.component';

const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'home', component: HomeComponent},
    {path: 'admin', component: AdminComponent, children: [
        {path: 'editar-producto/:id', component: AlbumEditComponent }]},
    {path: 'albums/:id', component: AlbumDetailComponent},
    {path: '**', component: HomeComponent}
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { App } from './app.component';
import {routing, appRoutingProviders} from './app.routing';
import {HomeComponent} from './home.component';
import {AdminComponent} from './admin.component';
import {AlbumEditComponent} from './album-edit.component';
import {AlbumDetailComponent} from './album-detail.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AngularFireAuth } from 'angularfire2/auth';

import {KeysPipe} from './iterareObject.pipe';

export const firebaseConfig = {
    apiKey: "AIzaSyCsRq9FXhqcnYPSkfuTeFjFsxrmihQNhso",
    authDomain: "prueba5-firebase-649c0.firebaseapp.com",
    databaseURL: "https://prueba5-firebase-649c0.firebaseio.com",
    projectId: "prueba5-firebase-649c0",
    storageBucket: "prueba5-firebase-649c0.appspot.com",
    messagingSenderId: "305625196867"
};

@NgModule({
  declarations: [
    App, HomeComponent, AdminComponent, AlbumEditComponent, AlbumDetailComponent, KeysPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
      ],
  providers: [appRoutingProviders,AngularFireAuth],
  bootstrap: [App]
})
export class AppModule { }

import { Component, Input } from '@angular/core';
import {AlbumService} from './album.service';
import { AngularFireAuth } from 'angularfire2/auth';
import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { Router, ActivatedRoute, NavigationStart } from '@angular/router';
import 'rxjs/add/operator/pairwise';


@Component({
    selector: 'admin',
    templateUrl: './src/admin.component.html',
    providers: [AlbumService, AngularFireAuth]
})
export class AdminComponent {
    public titulo: string;
    public user: Observable<firebase.User>;
    public albums: FirebaseObjectObservable<any>;
    public currentRoute: string;
    public currentRoute2: string;
    public users: string;
    public mundos: Array<any> = [];
    public mundo: Array<string>;
    @Input() selectedAlbum;
    public albums2: string;
    public albums3: FirebaseObjectObservable<any>
    public lookOver: boolean;
    
    constructor(private albumService: AlbumService, private router: Router, private _route: ActivatedRoute){
        this.titulo = "Página del administrador";
        this.user = this.albumService.user;
        this.lookOver = false;
        this.currentRoute2 = this.router.url;
        this.router.events.subscribe(event => {
            if (this.currentRoute === undefined){
                this.lookOver = true;
            }
    if(event instanceof NavigationStart) {
        this.currentRoute = event.url;
        if (this.currentRoute === undefined || this.currentRoute === '/admin'){//(this.currentRoute === undefined && this.currentRoute2 === '/admin') || (this.currentRoute === '/admin' && this.currentRoute2 === '/admin')){
            this.lookOver = true;
          } else if (this.currentRoute === "/admin/editar-producto/Arvahall"){
              this.lookOver = false;
          }
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
        console.log(this._route.snapshot.url[0].path);
        this.albums = this.albumService.getAlbums();
        console.log(this.albums);
        this.albums.subscribe(data => {
            this.albums3 = data;
            console.log(this.albums3);
        })
        
        
          console.log(this.currentRoute);
    }
    ngOnInit(){
        console.log(this.currentRoute2);
        console.log(this.currentRoute);
        console.log(this.user);
       
        
    }
    
    
}

<div>
    <div *ngIf="albums">            
        <div *ngFor="let album of (albums3 | keys)" >
            {{album.key}} - {{album?.title}}
            <a [routerLink]="['./editar-producto',album.key]" >Editar</a>
        </div>
    </div>
    <div *ngIf="lookOver">
        <h3>{{titulo}}</h3>

        <form #formAlbum="ngForm" class="col-lg-12" (ngSubmit)="submitForm(newArtist.value,newTitle.value,newDescription.value);
            newTitle.value='';newArtist.value='';newDescription.value=''">
            <div class="col-lg-6">
                <div>
                    <label>Titulo</label>
                    <input #newTitle="ngModel" name="title" [ngModel]="selectedAlbum?.title" (ngModelChange)="selectedAlbum.title = $event">
                </div>
                <div>
                    <label>Artist</label>
                    <input #newArtist name="artist" [ngModel]="selectedAlbum?.artist" (ngModelChange)="selectedAlbum.artist = $event">

                </div>
                <div>
                    <label>Description</label>
                    <textarea #newDescription name="description" [ngModel]="selectedAlbum?.description" (ngModelChange)="selectedAlbum.description = $event"></textarea>
                </div>
                <div>
                    <input type="submit" value="Guardar"/>
                    <button (click)="beginUpdatingAlbum(selectedAlbum)">Update</button>
                </div>
            </div>
        </form>
    </div> 
</div>
<hr/>
<router-outlet></router-outlet>

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate() {
        console.log(localStorage.getItem('nombre'));
        if (localStorage.getItem('nombre')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page
        this.router.navigate(['/home']);
        return false;
    }
}

import {Injectable} from '@angular/core';
import {Album} from '../models/Album';
import {AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Injectable()
export class AlbumService{
    public albums: FirebaseObjectObservable<any>;
    public user: Observable<firebase.User>;
    
    constructor(private database: AngularFireDatabase, public afAuth: AngularFireAuth){
        this.user = afAuth.authState;
        console.log(this.user);
    }
    
    getAlbums(){
        this.albums = this.database.object('/');
        return this.albums;       
    }
    
    /*addAlbum(newAlbum: Album){
        this.albums.push(newAlbum);
    }*/
    
    //2º parte
    getAlbumById(albumId: string){
        return this.database.object('/albums/' + albumId);
    }

    updateAlbum(localUpdatedAlbum){
        var albumEntryInFirebase = this.getAlbumById(localUpdatedAlbum.$key);
        console.log(albumEntryInFirebase);
        albumEntryInFirebase.update({title: localUpdatedAlbum.title,
                                artist: localUpdatedAlbum.artist,
                                description: localUpdatedAlbum.description});
    }
    deleteAlbum(localAlbumToDelete){
    var albumEntryInFirebase = this.getAlbumById(localAlbumToDelete.$key);
    albumEntryInFirebase.remove();
    }
    
}

import { Component, Input, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { Router, ActivatedRoute, Params, NavigationStart } from '@angular/router';
import {AlbumService} from './album.service';
import {Album} from '../models/Album';
import { AngularFireAuth } from 'angularfire2/auth';

import {AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';


@Component({
    selector: 'album-edit',
    templateUrl: './src/album-edit.component.html',
    providers: [AlbumService, AngularFireAuth]
})
export class AlbumEditComponent implements OnInit, AfterViewInit {
  @ViewChild("commentForm") form;
  // http://stackoverflow.com/questions/34615425/how-to-watch-for-form-changes-in-angular-2

  firebaseInitComplete = false;
  model: FirebaseObjectObservable<any>
  firebaseForm: FirebaseObjectObservable<any>;
  public albumId: string;
  @Input() selectedAlbum;
  public currentRoute: string;
  public currentRoute2: string;

  constructor(private af: AngularFireDatabase,private _route: ActivatedRoute,private albumService: AlbumService
        , private router: Router ) { 
    this.currentRoute2 = this.router.url;
        router.events.subscribe(event => {
    if(event instanceof NavigationStart) {
        this.currentRoute = event.url;
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
 }

  ngAfterViewInit() {
    this.form.control.valueChanges
      .subscribe(values => {
        // If we haven't get the initial value from firebase yet,
        // values will be empty strings. And we don't want to overwrite
        // real firebase value with empty string on page load
        if (!this.firebaseInitComplete) { return; }

        // If this is a change after page load (getting initial firebase value) update it on firebase to enable 3-way binding
        this.firebaseForm.update(values);
      });
      
  }

  ngOnInit() {
      this._route.params.forEach((urlParameters) => {
         this.albumId = urlParameters['id'];
       });
        
      this.selectedAlbum = this.getAlbumById(this.albumId).$ref.key;
        console.log(this.selectedAlbum);
    this.firebaseForm = this.af.object("/"+this.selectedAlbum+"/config/");
    // Listen to changes on server
    console.log(this.firebaseForm);
    this.firebaseForm.subscribe(data => {
      this.firebaseInitComplete = true; // Mark first data retrieved from server
      this.model = data;
      console.log(this.model);
      
    });
        console.log(this.currentRoute2);
  }
  getAlbumById(albumId: string){
        var objeto = this.af.object('/Arvahall/' + albumId);
        console.log(objeto);
        return objeto;
    }
}

<h1>{{titulo}}</h1>
    <!--<form #formEdit="ngForm" (ngSubmit)="beginUpdatingAlbum(selectedAlbum)" >
        <div>
            <label>Titulo</label>
            <input #title="ngModel" name="title" [ngModel]="selectedAlbum?.title" (ngModelChange)="selectedAlbum.title = $event"/>
        </div>
        <div>
            <label>Artista</label>
            <input #artista="ngModel" name="artista" [ngModel]="selectedAlbum?.artist" (ngModelChange)="selectedAlbum.artist = $event"/>
        </div>
        <div>
            <label>Descripción</label>
            <textarea #description="ngModel" name="description" [ngModel]="selectedAlbum?.description" (ngModelChange)="selectedAlbum.description = $event"></textarea>
        </div>
        <div>
            <input type="submit" value="Guardar"/>
            <button (click)="beginDeletingAlbum(selectedAlbum)">Borrar</button>
        </div>
    </form>
<div><a [routerLink]="['/admin']">Volver a admin</a></div>-->
    <form (ngSubmit)="onSubmit()" #commentForm="ngForm">
  <input [(ngModel)]="model.suministros" type="input" name="suministros" required>
</form>
    <div><a [routerLink]="['/admin']">Volver a admin</a></div>

import { Component } from '@angular/core';
import {ActivatedRoute } from '@angular/router';
import {AlbumService} from './album.service';
import { AngularFireAuth } from 'angularfire2/auth';
import { FirebaseObjectObservable } from 'angularfire2/database';


@Component ({
    selector: 'album-detail',
    templateUrl: './src/album-detail.component.html',
    providers: [AlbumService, AngularFireAuth]
})
export class AlbumDetailComponent{
    public albumId: string;
    public albumToDisplay;
    
    constructor(private route: ActivatedRoute, private albumService: AlbumService) { }

      ngOnInit() {
        this.route.params.forEach((urlParameters) => {
         this.albumId = urlParameters['id'];
       });
       this.albumToDisplay = this.albumService.getAlbumById(this.albumId);
      }
}

<div>
  <h3>{{(albumToDisplay | async)?.title}}</h3>
  <h4>{{(albumToDisplay | async)?.artist}}</h4>
  <p>{{(albumToDisplay | async)?.description}}</p>
</div>
<album-edit></album-edit>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}