> For the complete documentation index, see [llms.txt](https://tonyding.gitbook.io/angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tonyding.gitbook.io/angular/oshop-project/product-management-module.md).

# 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`