I have a CRUD page that needs to be updated after every operation.

I have implemented Observable and the CRUD functions (specifically Add and Delete) are working fine, but I need to manually refresh the page to see the changes reflected.

After trying to call this.ngOnInit() at the end of each operation function, I still couldn't get it to work as expected.

productmanagement.component.ts

import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../../router.animations';
import { Observable } from 'rxjs';
import { Category } from 'src/app/_models';
import { CategoryService } from './_services/category.service';

@Component({
    selector: 'app-productmanagement',
    templateUrl: './productmanagement.component.html',
    styleUrls: ['./productmanagement.component.scss'],
    animations: [routerTransition()],
    providers: [CategoryService]
})
export class ProductManagementComponent implements OnInit {

    public categoriesObservable$: Observable<Category>;

    constructor(private categoryService: CategoryService) {}

    ngOnInit() {
        this.categoriesObservable$ = this.categoryService.getAll();
    }

    categoryAdded(categoryname: string) {
        this.categoryService.add(categoryname);

    }

    deleteCategory(category: any) {
        this.categoryService.delete(category.idCategory);
    }
}

category.service.ts

@Injectable()
export class CategoryService {
    public categoriesRequest: Observable<Category>;
    public categorySubject: Subject<Category>;

    constructor(private http: HttpClient) {
        this.categorySubject = new ReplaySubject(1);
    }

    getAll(refresh: boolean = false) {
        if (refresh || !this.categoriesRequest) {
            this.categoriesRequest = this.http.get<Category>(`http://localhost:5000/api/Category`);

            this.categoriesRequest.subscribe(
                result => this.categorySubject.next(result),
                err => this.categorySubject.error(err)
              );
        }
        return this.categorySubject.asObservable();
    }

    getById(id: number) {
         return this.http.get(`http://localhost:5000/api/Category/` + id);
    }

    add(category: string) {
        return this.http.post<Category>('http://localhost:5000/api/Category', {Category: category}).subscribe();
    }

    update(category: Category) {
        return this.http.put(`http://localhost:5000/api/Category/` + category.idCategory, category);
    }

    delete(id: number) {
        return this.http.delete<any>(`http://localhost:5000/api/Category?id=` + id).subscribe();
    }
}

productmanagement.component.html

<!--Categories-->
    <div *ngIf="(categoriesObservable$ | async)">
        <div *ngFor="let category of (categoriesObservable$ | async)">
            <div class="card">
                <div class="card-header">
                    <p style="display: inline" name='idCategory'> {{ category.category1 }} </p>

                    <button class='btn btn-danger' style="float: right;" (click)="deleteCategory(category)">delete</button>
                    <button class='btn btn-warning' style="float: right; margin-right: 10px;">edit</button>
                    <button class="btn btn-success" style="float: right; margin-right: 10px;">add Product</button>
                </div>
                <div *ngIf="category.product.length>0 else noProduct">
                    <table class="card-body table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Reference</th>
                                <th>Serial Number</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th style="width: 165px"></th>
                            </tr>
                        </thead>
                        <tbody *ngFor="let prod of category.product">
                            <tr>
                                <td>{{ prod.product1 }}</td>
                                <td>{{ prod.reference }}</td>
                                <td>{{ prod.serialNumber }}</td>
                                <td>{{ prod.price }}</td>
                                <td>{{ prod.quantity }}</td>
                                <td>
                                    <button class='btn btn-outline-warning'>edit</button> &nbsp;
                                    <button class='btn btn-outline-danger'>delete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <ng-template #noProduct class="align-content-center">
                    <br>
                    <p class='text-center'>No Products yet</p>
                </ng-template>
            </div>
            <br>
        </div>
    </div>

Even with including this.ngOnInit() in the component and trying the AsyncPipe in the template, I still faced issues. Thus, binding the Observable with the template might offer the solution.