Product Management Module

create new component

ng g c admin/product-form

add router in app.module.ts

input add on (bootstrap)

<div class="input-group">
      <span class="input-group-addon">$</span>
      <input id="price" type="number" class="form-control">
</div>

firebase db service

• Create service component >ng g s service/category

• Add service as provide in app.module.ts

  providers: [
    ...
    CategoryService
  ],

• Inject AngularFireDatabase and retrieve data

  constructor(private db: AngularFireDatabase) { }
  
  getCategories() {
    return this.db.list('/categories');
  }

• Inject service to component and link result observable

  categories$;
  
  constructor(categoryService: CategoryService) {
    this.categories$ = categoryService.getCategories();
  }

Save Form to DB

• Input FormsModule for ngModel in each input field

import { FormsModule} from '@angular/forms';

imports: [
 FormsModule,
]

<form #f="ngForm" (ngSubmit)="save(f.value)">
<input ngModel name="title" id="title" type="text" class="form-control" >

• implement save function in ts file

• add new Service need add provider

• Using AngularFireDatabase this.db.list('').push(product)

Validation

• required validation

  1. need bind variable with ngModel

  2. add 'required' attribute

  3. add div with bootstrap class 'alert alert-danger'

  4. using ngIf to determine show or not show

<input #title="ngModel" ngModel name="title" id="title" type="text" class="form-control" required>
      <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
        Title is required.
      </div>

• custome validation library

npm i ng2-validation --save