Refresh items list after adding an item

Question

Hello i am in the process of developing an application platform on angular, and i have a part where candidates can fill in their professional experiences! The problem is that i can't update the list of experiences after adding an experience.

Experience.component.ts

export class ExperienceComponent implements OnInit {

  experience: Array<Experience> = [];
  
  constructor(
    private experienceService : ExperienceService,
    private modalService : NgbModal,
    private location : Location,
  ) { }

  ngOnInit(): void {
    this.experienceService.getExperiences().subscribe(
      result => this.experience = result
    )
  }

  /**
   * Add a new experience
   * @param addModel
   */
  addExperience(addModel : Experience){
    const add = this.modalService.open(AddExperienceComponent, { centered: true });
    add.componentInstance.selectedExperience = addModel;
  }

}

Add-experience.component.ts

export class AddExperienceComponent implements OnInit {

  addForm: FormGroup;
  submitted = false;
  experience;

  newExperience : Experience = {
    poste: '',
    entreprise: '',
    ville: '',
    dateDebut: '',
    dateFin: '',
    details: ''
  }
  constructor(
    public modal: NgbActiveModal,
    private experienceService: ExperienceService,
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit(): void {
    this.setExperienceForm()
  }

  /**
   * Add a new experience
   */
   addNewExperience(){
    this.experienceService.addExperience(this.addForm.value)
    .subscribe(
      res => {
        if (res) {
        Swal.fire({
          title: 'Great',
          icon: 'success',
          html:
            'Your experience has been added !',
          confirmButtonAriaLabel: 'Ok',
        });
        this.submitted = true;
        this.modal.close()
      }
    },
      err => Swal.fire({
        title: 'Oooops !',
        icon: 'error',
        html:
          'The end date must be greater than the start date',
        confirmButtonAriaLabel: 'Ok',
      }),
    )
    
  }

  get addExperienceData() { 
    return this.addForm.controls; 
  }

  private setExperienceForm() {    
    this.addForm = this.formBuilder.group({
      poste: [this.newExperience.poste, Validators.required],
      entreprise: [this.newExperience.entreprise, Validators.required],
      ville: [this.newExperience.ville, Validators.required],
      dateDebut: [this.newExperience.dateDebut, Validators.required],
      dateFin: [this.newExperience.dateFin, Validators.required],
      details: [this.newExperience.details, Validators.required]
    });
  }

}

To clarify, the add-experience component is used as a modal.

Here what it looks like my page : Picture

Do you have any idea how to do it please ?

Thank you :)

SOLUTION :

Well after a day of looking for a solution, i've edited the function addExperience() in my Experience Component, it looks like this now :

addExperience(experienceModel : Experience){
    const ref = this.modalService.open(AddExperienceComponent, { centered: true });
    ref.componentInstance.selectedExperience = experienceModel;

    ref.result.then((yes) => {
      console.log(yes);
      this.setExperienceList();
    },
      (cancel) => {
        console.log(cancel);
      })
  }

And i've created a new function which contains the code inside ngOnInit(), and it looks like this :

ngOnInit(): void {
    this.setExperienceList();
  }

  /**
   * Get experiences
   */
  private setExperienceList() {
    this.experienceService.getExperiences().subscribe(x => {
      this.experience = x;
    })

Thank you for your help guys :)

Answer 1

So after I checked your code, you are using Ngbmodal. On that solution my idea is not good.

In add-new-experience component you need to dismiss your modal with created experience. In my example I sent the form value to the other component, but you should create an experience object.

 addNewExperience(experience) {
    // Create the object
    this.newExperience.company = this.addForm.get('company').value;
    this.newExperience.poste = this.addForm.get('poste').value;
    this.newExperience.city = this.addForm.get('city').value;
    this.newExperience.startDate = this.addForm.get('startDate').value;
    this.newExperience.endDate = this.addForm.get('endDate').value;
    this.newExperience.details = this.addForm.get('details').value;

    this.modal.close(this.newExperience);
}

In experience component you need to receive result from closed modal.

 addExperience() {
    const add = this.modalService
      .open(AddExperienceComponent, {
        centered: true
      })
      .result.then(
        (result: Experience) => {
         this.experience.push(result);
        },
        reason => {
          console.log(reason);
        }
      );
  }

Answer 2

Try something like this, i have similar workflow and i did this. At Experience.component.ts you subscribe to getExperiences() from experienceService i believe this returns a JSON or something from an APIs. then below that you can listen to any changes to that JSON, here's a simple code that might works for you.

Experience.component.ts inside constructor or ngOnInit add this code

this.experienceService.listen().subscribe((experiences: any) => {
      this.getListExperiences();
    });

then add this code outside constructor

getListExperiences(){
    this.experienceService.getExperiences().subscribe(
      result => this.experience = result
 )}

in experienceService you could use behaviour subject and observable.

  private _listeners = new Subject<any>();
  listen(): Observable<any> {
    return this._listeners.asObservable();
  }

Answer 3

You can emit added experience to parent component. In Add-experience.component.ts you should add one EventEmitter. On EventEmitter your parent component (Experience.component.ts) can "subscribe" and gets the added experience.

My words in code:

Add-experience.component.ts

@Output() newExperience: EventEmitter<any> = new EventEmitter<any>();
 ...

addNewExperience(){
 .... 
 this.newExperience.emit(this.addForm.value); // emit experience
}

Experience.component.ts

handleNewExperience(experience: any){ // This should be typed parameter
 this.experience.push(experience);
}

And of course you need to "subscribe" on emitter.

Experience.component.ts

<add-experience (newExperience)="handleNewExperience($event)"></add-experience>

Please keep it in mind this is only an idea. I don't know exactly how your code looks like. Sharing data between child and parent directives and components