Is it possible to access NgbdModalContent properties from a different component?

Question

Is it possible to access NgbdModalContent properties from a different component?

If I have a component with a template containing an Edit button. When the user clicks on it, I want to load another component as a dynamic modal template. The component is named ProfilePictureModalComponent and it includes the Edit button:

(Angular code here)

Here is the template for

profile-picture-modal.template.html

:

(HTML code here)

When the edit button is clicked, this component loads another component called EditProfilePictureComponent within a modal. Here is the code for EditProfilePictureComponent:

(More Angular code here)

The goal is to set the previous profile picture of the user when the Edit button is clicked and the modal template is rendered. To achieve this, I need to call

EditProfilePictureComponent.editProfilePic()

from

ProfilePictureModalComponent.editProfileModal()

. Since there is no direct relationship between the two components, I used a shared service. Now, I also need to access the methods within the shared service.

angular typescript components

Answer 1

Answer №1

To transfer the ProfilePictureModalComponent as a parent to EditProfilePictureComponent, you need to call a method of the parent component during the ngAfterViewInit lifecycle hook of the EditProfilePictureComponent. This will allow you to pass the editCropper to the parent ProfilePictureModalComponent:

editProfileModal() {
  const modalRef = this.modalService.open(EditProfilePictureComponent, {size: 'lg'});
  modalRef.componentInstance.user_id = this.user_id;
  modalRef.componentInstance.editProfilePicModal = modalRef;
  modalRef.componentInstance.name = 'World';
  modalRef.componentInstance.parent = this;
}

editProfilePic(editCropper): void {
  console.log("hello");
  let image: any = new Image();
  image.src = "/api/uploadedFiles/profPics/download/"+this.sharedModalService.userProfilePic.name;
  editCropper.setImage(image);
}

Within the EditProfilePictureComponent, make sure to include:

@Input() parent;
......
......
ngAfterViewInit() {
  this.parent.editProfilePic(this.editCropper);
}

Answer 2

To transfer the ProfilePictureModalComponent as a parent to EditProfilePictureComponent, you need to call a method of the parent component during the ngAfterViewInit lifecycle hook of the EditProfilePictureComponent. This will allow you to pass the editCropper to the parent ProfilePictureModalComponent:

editProfileModal() {
  const modalRef = this.modalService.open(EditProfilePictureComponent, {size: 'lg'});
  modalRef.componentInstance.user_id = this.user_id;
  modalRef.componentInstance.editProfilePicModal = modalRef;
  modalRef.componentInstance.name = 'World';
  modalRef.componentInstance.parent = this;
}

editProfilePic(editCropper): void {
  console.log("hello");
  let image: any = new Image();
  image.src = "/api/uploadedFiles/profPics/download/"+this.sharedModalService.userProfilePic.name;
  editCropper.setImage(image);
}

Within the EditProfilePictureComponent, make sure to include:

@Input() parent;
......
......
ngAfterViewInit() {
  this.parent.editProfilePic(this.editCropper);
}

Is it possible to access NgbdModalContent properties from a different component?

Answer №1

Similar questions

Passing NextJS props as undefined can lead to unexpected behavior and

Finding the precise Time zone with date-fns: A comprehensive guide

How can I resolve a route error after converting typescript to es5 in an Angular2 example?

Angular2-starter configuration setup with environment-based variables (such as .env or .conf) for testing and production settings

Testing the throwing of errors when running Karma by utilizing sinon.spy on global functions like parseInt

Unable to grasp the mistake

Setting up Datatables for Pagination Features

What is the best way to execute a function that retrieves data from a MySQL query and then sends it back as a result in Express.js?

Using local fonts with Styled Components and React TypeScript: A beginner's guide

What is the best way to call a method from app.component in another component?

What is the correct method for packaging and using a TypeScript library built with webpack?

Adding an anchor tag to an ngx-datatable-column can be done by utilizing the properties

Exploring the Concept of Template Element Recursion in Angular JS 2

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

The playwright signs in to the application through the cached session in global-setup.ts, where the wait for the selector times out when DEBUG=0 but does not time out when DEBUG=

The directive does not function properly when used across multiple files

Error Type: TypeError when using Mongoose's FindOneAndUpdate function

Applying ngClass to a row in an Angular material table

The Angular service method is producing an error in the production build due to being undefined

The 'ObjectID' property is not present in the 'CollectionStatic' data type