# 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&#x20;
  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&#x20;

`npm i ng2-validation --save`
