1

I need to transfer loaded file from file-upload modal dialog to the QuestionsComponent. How I can do it? I have tried to do it via @Output, but I don't understand where I need to insert the modal dialog component selector in template.

questions.component.ts:

export class QuestionsComponent implements OnInit{
  constructor(public _modal: MatDialog, public $router: Router) {}
  ngOnInit(): void {
    while (true) {
      const _dialog = this._modal.open(FileUploadModalDialogComponent);

      const isBreak = _dialog.afterClosed().subscribe(result => {
        if (result !== undefined) {
          return true;
        }
      });
      console.log(isBreak);
      if (isBreak) { break; }
    }
  }

  loadFile(input: any) {
    const file = input.files[0];
    const fileName: string = file.name;
    if (fileName.endsWith('.tournament.json')) {
      console.log('Loading tournament file...');
      console.log('Name: ' + input.files[0].name);
      const fileReader = new FileReader();
      fileReader.readAsText(file, 'utf-8');
      let json: string | ArrayBuffer;
      fileReader.onload = () => {
        json = fileReader.result;
        if (typeof json === 'string') {
          try {
            this._modal.closeAll();
            json = JSON.parse(json);
            console.log('Loaded tournament file successfully. Redirecting...');
            this.$router.navigate(['/event']);
          } catch (e) {
            console.warn('Error loading tournament file!');
            console.error(e);
            alert('Invalid tournament file');
          }
        }
      };
    } else {
      alert('This is not a tournament file. Tournament file name must end with .tournament.json');
    }
  }
}


@Component({
  templateUrl: './file-upload.component.html',
})
export class FileUploadModalDialogComponent {}

file-upload.component.html:

<div class="main__wrap">
  <div class="file-upload mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    <span i18n="@@choose-tournament-json-btn">Choose file</span>
    <input type="file" name="FileAttachment" id="FileAttachment" class="upload" (change)="loadNewFile($event.target)"/>
  </div>
  <p id="fileuploadurl" i18n="@@choose-tournament-json-btn-caption">Choose tournament json file on your computer.</p>
</div>
  • 1
    Does this answer your question? [how to pass data from angular material dialog to parent component?](https://stackoverflow.com/questions/51815455/how-to-pass-data-from-angular-material-dialog-to-parent-component) – soumith Jun 15 '20 at 08:17
  • @soumith no, it doesn't help. – Mykhailo Yaremenko Jun 15 '20 at 15:20

0 Answers0