Home / Questions / 96465
Accepted
Elberth Agreda
Asked: 2020-08-22 17:34:52 +0800 CST 2020-08-22 17:34:52 +0800 CST

How to pass parameters from a component to a modal in Angular 4?

  • 772

I am editing a record from a list, clicking on it opens this record in a modal with user information to edit, so far so good.

My drawback is that inside the modal I am loading a service that depends on the selected user, I execute this function in the OnInitmodal but since the modal loads in my main component when I open the modal that service is empty since it was executed when loading the component main and not when loading the modal.

How could I make my function run when I open the modal and not when the component loads?

Note: the modal is in a component and my list of records in another component

Main Template:

 <app-modal modalId="editUser" modalSize="modal-lg" modalTitle="Editar Usuario - {{user.userId}}" modalIcon="ion-ios-person-outline">
  <app-edit-user [user]="user"></app-edit-user>
</app-modal>

Main component (from here I call my modal):

 onRowSelect(event) {
   this.newUser = false;
   this.user = this.cloneUser(event.data);
   $("#editUser").modal();
  }

Component Modal

  getParameters(user){
    console.log(user);
    this._userService.getParameter(user).subscribe(
      response => {
      this.userParameter = response.pagedResult.resultado;
      console.log(this.userParameter);
    }, 
      error => {
        console.log(<any>error);
      }
    );
  }

 // Desde aqui llamo la función pero como se ejecuta al cargar el componente los datos siempre vienen vacios

  ngOnInit() {
    console.log(this.user.userId);
    this.getParameters(this.user.userId);
  }
angular2-template

1 Answers

  1. Best Answer

    The idea is to use the ngOnChanges in your component that acts as the edit user and in your list component it collects the edit user component and you pass the data to it before calling it.

    ModalComponent

    @Component({
  selector: 'app-modal',
  template: `
    <div [hidden]="hidden">
      <ng-content></ng-content>
    </div>
  `
})
export class ModalComponent {

  hidden = true;

  open() {
    this.hidden = false;
  }

  close() {
    this.hidden = true;
  }

}

    EditUserComponent

    @Component({
  selector: 'app-edit-user',
  template: `
    <form (onSubmit)="onSubmit() [hidden]="!user || !userParameter">
      <!-- tus campos... -->
    </form>
  `
})
export class EditUserComponent implements OnChanges {

  @Input() user = null;
  userParameter = null;
  @Output() onResult = new EventEmitter<any>(null);

  constructor(private userService: UserService)

  ngOnChanges(changes) {
    if (changes['user']) {
      this.userService.getParameter(changes.user.currentValue).subscribe(
        userParameter => this.userParameter = userParameter
      );
    }
  }

  onSubmit() {
    // ...
    const user = ...;
    // ...
    this.userService.updat(user).subscribe(
      (userEdited) => this.onResult.emmit({ hasErrors: true, user: userEdited }),
      (err) => this.onResult.emmit({ hasErrors: true, user: user })
    );
  }

}

    UsersComponent

    @Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users" (click)="onClickUser(user)">
        #{{ user.id }} - {{ user.name }} {{ user.lastname }}
      </li>
    </ul>
    <app-modal>
      <app-edit-user (onResult)="onUserEdited($event)"></app-edit-user>
    </app-modal>
  `
})
export class UsersComponent implements OnInit {

  users = [];
  @ViewChild(ModalComponent) modalComponent: ModalComponent;
  @ViewChild(EditUserComponent) editUserComponent: EditUserComponent;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getAll().subscribe(users => this.users = users);
  }

  onClickUser(user) {
    this.editUserComponent.user = user;
    this.modalComponent.open();
  }

  onUserEdited($event) {
    if ($event.hasErrors) {
      console.error(`Error al editar el usuario`);
    } else {
      const index = this.users.findIndex(user => user.id === $event.user.id);
      if (index > -1) {
        this.users[index] = $event.user;
      }
    }
    this.modalComponent.close();
  }

}
    • 1