Updating View After Adding Data in Angular 4

Question

I have a problem in my view after adding a new project. I need to reload the webpage after I see the new project. How can I make it detect the change and I want to happen is that after I add a new project, the view is also updating. Here's my code below

ts

export class ProjectsListComponent implements OnInit {
  closeResult: string;
    projects: any;
    subscription: Subscription;

  constructor(private modalService: NgbModal, private projectsService: ProjectsService) { }

  ngOnInit() {
    this.subscription = this.projectsService.getAll()
        .subscribe(
          (data:any) => {
            this.projects = data.projects;
            console.log(data);
          },
          error => {
           alert("Error");
          });
  }

  onCreateProject(form: NgForm){
    const name = form.value.name;
    const description = form.value.description;
    this.projectsService.addProject(name, description)
      .subscribe(
          data => {
            alert("Success Adding");
            console.log(data);
          },
          error => {
            alert("Error Adding");
            console.log(error);
          });
  }
}

service

@Injectable()
export class ProjectsService {
  url = App.URL + '/projects';
  projects: any;

  constructor(private httpClient: HttpClient) {}

 getAll() {
    if(!this.projects) {
        this.projects = this.httpClient.get<any>(this.url)
                            .map((response => response))   
                            .publishReplay(1)
                            .refCount();
                 
    }
    return this.projects;
  }

  addProject(name: string, description: string) {
    return this.httpClient
    .post(
       this.url, 
       JSON.stringify({ name, description })
    )
    .map((response: any) => {
         return response;
        });
  }

Answer 1

Change your ts code like this : You need to re-fetch the list after successful updation.

  export class ProjectsListComponent implements OnInit {
    closeResult: string;
      projects: any;
      subscription: Subscription;

    constructor(private modalService: NgbModal, private projectsService: ProjectsService) { }

    ngOnInit() {
        this.getAllProjects();
    }

    onCreateProject(form: NgForm){
      const name = form.value.name;
      const description = form.value.description;
      this.projectsService.addProject(name, description)
        .subscribe(
            data => {
              alert("Success Adding");
              console.log(data);
              getAllProjects(); // <== Fetching list again after project add
            },
            error => {
              alert("Error Adding");
              console.log(error);
            });
    }

    getAllProjects(){
      this.subscription = this.projectsService.getAll()
          .subscribe(
            (data:any) => {
              this.projects = data.projects;
              console.log(data);
            },
            error => {
             alert("Error");
            });
    }
  }