Angular Bootstrap Modal value setting inconsistency

Question

Update 2

Update 1: Here is my upload-modal.ts

export class UploadModalComponent implements OnInit {

  constructor() { }
  @Input()
  id:number;

  @ViewChild('toggleButton') 
  private toggleButton : ElementRef;     
 
  ngOnInit() {
  }

  clickToggleButton() {
     this.toggleButton.nativeElement.click(); //trigger button click
  }

}

And upload-Modal.html


  
  
    
      
        
          
            
              
            
          
        
        Replace Video
      
      
        
          Please upload a MP4 file you want to replace with the existing one. This will replace {{videosToBeReplaced?.video?.title}}

Old Code : First Question

Here is my component.html

At the lower part of the code, there is a modal. Modal value is set when

this method is clicked. As you see, there is a list drawn here uiVideos. For each element of this list, there is a row generating with edit, move and several actions. I have specified the action in above line code.

Problem : for the first row binded from uiVideos are being shown in Modal. But for the next rows of the uiVideos are not binding to the Modal.

As you can see, I have checked the value in this.videosToBeReplaced.video.itemId, And they absolutely are correct for any of the rows of uiVideos list. but after triggering the modal, The value becomes empty.

And below, there is the code to show the modal.

{{c.video.title}} Replace Video Please upload a MP4 file you want to replace with the existing one. This will replace {{videosToBeReplaced?.video?.title}}

In component ts following code determines the modals videosToBeReplaced value

OpenUploaderAndBindContent(c: UIVideo) { console.log('before c: ' + c.video.itemId + ' - ' + c.video.title); this.videosToBeReplaced = new UIVideo(); this.videosToBeReplaced = c; console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title); document.getElementById('videoReplaceTrigger').click(); }

Sunil · Accepted Answer

Issue

Your problem is related to the operating on the same DOM element for each iteration of for loop.

See your OpenUploaderAndBindContent function.

OpenUploaderAndBindContent(c: UIVideo) {
    console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);

    this.videosToBeReplaced = new UIVideo();
    this.videosToBeReplaced = c;

    console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
    document.getElementById('videoReplaceTrigger').click(); <-- ISSUE 1
  }

You are trigger the same button for each video and eventually this will try to open the same modal. Because button is target the same modal id=videoReplace. Refer below snippet. button is targeting videoReplace.

Solution

The solution of your problem is -

Do not target the same button and modal by id.
You should create the multiple modal for each video so create new modal component say modal-component
Move the following modal content in it.

Make the set the button and model id dynamic by using @Input.

  
    
      
        
          
            
              
            
          
        
        Replace Video
      
      
        
          Please upload a MP4 file you want to replace with the existing one. This will replace {{videosToBeReplaced?.video?.title}}

4.Use the modal-component inside the for loop

note : modal-component has the input id. This will generate the dynamic id for modal and button.

5.Finally your method will look like -

OpenUploaderAndBindContent(c: UIVideo, index:number) {
    console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);

    this.videosToBeReplaced = new UIVideo();
    this.videosToBeReplaced = c;

    console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
    document.getElementById('videoReplaceTrigger'+index).click(); <-- ID IS GENERATED BY INDEX
  }

Here is the id is generated dynamically.

Angular Bootstrap Modal value setting inconsistency

Answers (1)

Issue

Solution

Related Questions