Angular and Firebase App

Author: Your Name

src/app/course-detail/course-detail.component.html

@@ -14,8 +14,7 @@ <h2>{{ (course$ | async)?.description  }}</h2>
                   (lesson)="navigateToLesson($event)"></lessons-list>
 
     <div class="tools-bar">
-        <button routerLink="new"
-                [queryParams]="{courseId: (course$ | async)?.$key}">
+        <button routerLink="new" [queryParams]="{courseId: (course$ | async)?.$key }">
             New Lesson
         </button>
     </div>

src/app/lesson-form/lesson-form.component.html

@@ -1,11 +1,13 @@
-<form autocomplete="off" novalidate class="lesson-form" [formGroup]="form">
+
+<form [formGroup]="form" autocomplete="off" novalidate class="lesson-form">
 
     <fieldset>
         <legend>Lesson</legend>
         <div class="form-field">
             <label>Description:</label>
             <input name="title" formControlName="description">
-            <div class="field-error-message" *ngIf="isErrorVisible('description','required')">field is mandatory</div>
+            <div class="field-error-message"
+                 *ngIf="isErrorVisible('description','required')">field is mandatory</div>
         </div>
         <div class="form-field">
             <label>Lesson Url:</label>
@@ -16,7 +18,7 @@
             <label>Video Url:</label>
             <input name="title" formControlName="videoUrl">
             <div class="field-error-message" *ngIf="isErrorVisible('videoUrl','required')">field is mandatory</div>
-            <div class="field-error-message" *ngIf="isErrorVisible('videoUrl','validUrl')">not a valid url</div>
+            <!--<div class="field-error-message" *ngIf="isErrorVisible('videoUrl','validUrl')">not a valid url</div>-->
         </div>
         <div class="form-field">
             <label>Tags:</label>

src/app/lesson-form/lesson-form.component.ts

@@ -1,53 +1,48 @@
 import {Component, OnInit, Input} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
-import {validateUrl} from "../shared/validators/validateUrl";
-
 @Component({
   selector: 'lesson-form',
   templateUrl: './lesson-form.component.html',
   styleUrls: ['./lesson-form.component.css']
 })
 export class LessonFormComponent implements OnInit {
 
-    form: FormGroup;
-
-    @Input()
-    initialValue: any;
+    form:FormGroup;
 
-    constructor(private fb: FormBuilder) {
+    constructor(private fb:FormBuilder) {
     }
 
     ngOnInit() {
         this.form = this.fb.group({
             description: ['',Validators.required],
             url: ['',Validators.required],
-            videoUrl: ['',[Validators.required, validateUrl]],
+            videoUrl: ['',[Validators.required]],
             tags: ['',Validators.required],
             longDescription: ['']
         });
-    }
 
-    ngOnChanges(changes) {
-        if (changes.initialValue) {
-            this.form.patchValue(changes.initialValue.currentValue);
-        }
     }
 
-
     isErrorVisible(field:string, error:string) {
-        return this.form.controls[field].dirty &&this.form.controls[field].errors && this.form.controls[field].errors[error];
+
+        return this.form.controls[field].dirty
+                && this.form.controls[field].errors &&
+                this.form.controls[field].errors[error];
+
     }
 
-    get value() {
-        return this.form.value;
+
+    reset() {
+        this.form.reset();
     }
 
+
     get valid() {
         return this.form.valid;
     }
 
-    reset() {
-        this.form.reset();
+    get value() {
+        return this.form.value;
     }
 
 }

src/app/new-lesson/new-lesson.component.html

@@ -1,5 +1,4 @@
 
 <lesson-form #form></lesson-form>
 
-<button (click)="save(form)" [disabled]="!form.valid">Save New Lesson</button>
-
+<button [disabled]="!form.valid" (click)="save(form)">Save New Lesson</button>

src/app/new-lesson/new-lesson.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {LessonsService} from "../shared/model/lessons.service";
 import {ActivatedRoute} from "@angular/router";
+import {LessonsService} from "../shared/model/lessons.service";
+
 
 @Component({
   selector: 'app-new-lesson',
@@ -9,18 +10,17 @@ import {ActivatedRoute} from "@angular/router";
 })
 export class NewLessonComponent implements OnInit {
 
-  courseId:string;
+    courseId:string;
 
-  constructor(private lessonsService: LessonsService,
-                private route: ActivatedRoute) { }
+  constructor(private route:ActivatedRoute, private lessonsService: LessonsService) { }
 
 
   ngOnInit() {
+
       this.courseId = this.route.snapshot.queryParams['courseId'];
-      console.log('course', this.courseId);
+      console.log("course", this.courseId);
   }
 
-
     save(form) {
         this.lessonsService.createNewLesson(this.courseId, form.value)
             .subscribe(
@@ -33,4 +33,6 @@ export class NewLessonComponent implements OnInit {
 
     }
 
+
+
 }

src/app/shared/model/firebaseUpdate.ts

@@ -1,16 +1,18 @@
 import {Injectable, Inject} from '@angular/core';
-import {Observable} from "rxjs/Rx";
+import {Observable, Subject} from "rxjs/Rx";
 import {Lesson} from "./lesson";
 import {AngularFireDatabase, FirebaseRef} from "angularfire2";
-import firebaseUpdate from "./firebaseUpdate";
+
 
 @Injectable()
 export class LessonsService {
 
-    sdkDb: any;
+    sdkDb:any;
 
     constructor(private db:AngularFireDatabase, @Inject(FirebaseRef) fb) {
+
         this.sdkDb = fb.database().ref();
+
     }
 
 
@@ -72,10 +74,31 @@ export class LessonsService {
         dataToSave["lessons/" + newLessonKey] = lessonToSave;
         dataToSave[`lessonsPerCourse/${courseId}/${newLessonKey}`] = true;
 
-        return firebaseUpdate(this.sdkDb, dataToSave);
+
+        return this.firebaseUpdate(dataToSave);
+    }
+
+    firebaseUpdate(dataToSave) {
+        const subject = new Subject();
+
+        this.sdkDb.update(dataToSave)
+            .then(
+                val => {
+                    subject.next(val);
+                    subject.complete();
+
+                },
+                err => {
+                    subject.error(err);
+                    subject.complete();
+                }
+            );
+
+        return subject.asObservable();
     }
 
 
+
 }