Parent component is not being refresed

Jhon Hernandez — Fri, 16 Aug 2024 00:03:16 +0000

I have a component that has 3 child components:

<!-- users-edit.component.html -->
<div class="full-width" *ngIf="!editMode">
  <app-users-get-data
   (usersFetched)="onUsersFetched($event)"
   (submitPressed)="handleSubmitPressed($event)"
  >
  </app-users-get-data>
</div>

<div class="full-width" id="table" *ngIf="!editMode">
  <app-users-show-table 
    [users]="users" 
    [submitted]="submitted"    
  > 
  </app-users-show-table>
</div>

<div class="full-width" *ngIf="editMode">  
  <app-users-edit-action></app-users-edit-action>
</div>

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { iUserDTO } from '../../../models/iUserDTO';
import { EditCommunicationService } from '../../../services/user/edit-communication.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-users-edit',
  templateUrl: './users-edit.component.html',
  styleUrl: './users-edit.component.css'
})
export class UsersEditComponent implements OnInit {  
  users: iUserDTO[] | null = null;
  submitted: boolean = false;     
  editMode: boolean = false;

  constructor(
    private editCommunicationService: EditCommunicationService,
    private cdr: ChangeDetectorRef 
  )
  { 
  }

  ngOnInit() {
    console.log('ngOnInit of users-edit');    

    this.editCommunicationService.editModeChanged.subscribe((editMode: boolean) => {
      console.log('editMode ', editMode);
      this.editMode = editMode;
      this.cdr.detectChanges(); 
    });
  }  

  onUsersFetched(users: iUserDTO[] | null) {
    this.users = users;
  }

  handleSubmitPressed(submitted: boolean) {    
    this.submitted = submitted;
  }  
}

The first component gets the data, the second shows the results and the third one has a form to update an user. The second component has an EDIT button:

<button class="btn btn-success btn-sm" (click)="onEditUser(user)">{{ 'EDIT' | translate }}</button>

// users-show-table.component.ts
import { Component, Input, OnChanges, OnInit, SimpleChanges, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { iUserDTO } from '../../../models/iUserDTO';
import { LocalStorageService } from '../../../helpers/local-storage.service';
import { UserService } from '../../../services/user/user.service';
import { TranslateService } from '@ngx-translate/core';
import { LanguageChangeService } from '../../../services/language-change-service';
import * as bootstrap from 'bootstrap';
import { EditCommunicationService } from '../../../services/user/edit-communication.service';

@Component({
  selector: 'app-users-show-table',
  templateUrl: './users-show-table.component.html',
  styleUrls: ['./users-show-table.component.css']
})
export class UsersShowTableComponent implements OnInit {
  action: string = '';
  responseMessage: string = '';
  messageStatus: string = '';
  messageHeader: string = '';
  modalMessage: string = '';
  modalHeader: string = '';
  modalVisible: boolean = false;
  private modal: bootstrap.Modal | null = null;
  serviceError: string = '';
  showServiceError: boolean = false;


  @ViewChild('errorModal') modalElementRef!: ElementRef;

  @Input() users: iUserDTO[] | null = null;
  @Input() submitted: boolean = false; 


  showDeleteAlert: boolean = false;
  userToDelete: iUserDTO | null = null;

  constructor(
    private localStorageService: LocalStorageService,
    private userService: UserService,
    private translate: TranslateService,
    private languageChangeService: LanguageChangeService,
    private editCommunicationService: EditCommunicationService
    ) 
    { 
      console.log('UsersShowTableComponent instanciado');
    }

  ngOnInit(): void {
    this.action = this.localStorageService.getData('action');
  }

  ngAfterViewInit() {
    this.modal = new bootstrap.Modal(this.modalElementRef.nativeElement);
  }  

  onEditUser(user: iUserDTO) {
    console.log('Editing user:', user);   
    this.editCommunicationService.notifyEditMode(true);    
  }

This is the service:

import { EventEmitter, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EditCommunicationService {
  public editModeChanged: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() {}

  notifyEditMode(editMode: boolean) {
    console.log('On the service ', editMode);
    this.editModeChanged.emit(editMode);
  }
}

When the EDIT button is clicked, the parent componet should hide the first two components and the third one appear, but when I click the button, nothing happens.

I put some console.log around, I can see the data on users-show and the service, not on users-edit.

DEV Community: Jhon Hernandez

Parent component is not being refresed