Access fileupload inner component of ng-template in Angular

[1stefan]

I'm using fileUpload component from primeng ( https://www.primefaces.org/primeng/#/fileupload ) in a modal component ( https://ng-bootstrap.github.io/#/compon ... l/examples )

When Im selecting the files and display them via `ng-template`, i want to have a button that removes some of the files.

In order to do that, i need to call the `remove` method from the FileUpload component.

My problem is that this doesnt work.

I initially tried to use ViewChild but I get `undefined`. I can't user service, because this means i need to update the package.


Code

Code: Select all

	<ng-template #upload let-c="close" let-d="dismiss">
		<p-fileUpload #fileUpload
						customUpload="true"
						(uploadHandler)="uploadMultiHandler($event)"
						(onSelect)="onFileSelect($event)"
						multiple="multiple"
						accept="image/*"
						maxFileSize="1000000"> 
			<ng-template let-file pTemplate="file">
			  <div class="ui-fileupload-row">
				<div><img [src]="file.objectURL" width="50"/></div>
				<div>{{file.name}}</div>
				<div>{{formatSize(file.size)}}</div>
				<div><button type="button" icon="fa-close" pButton (click)="remove(event, file)"></button></div>
			  </div>
			</ng-template>
			<ng-template pTemplate="content">
			  <ul *ngIf="uploadedFiles.length">
				<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
			  </ul>
			</ng-template>    
		  </p-fileUpload>
	</ng-template>

	@ViewChild('fileUpload') fileUpload: FileUpload;

	remove(event: Event, file: any) {
		const index: number = this.uploadedFiles.indexOf(file);
		this.fileUpload.remove(event, index);
	}

Does anyone has any idea?
What am I doing wrong?


Links I've checked:

1. https://stackoverflow.com/questions/437 ... g-template
2. https://angular.io/guide/component-interaction
3. http://plnkr.co/edit/p40g2xGgamfCUk8pShHq?p=preview
4. https://plnkr.co/edit/xrv8Ye5c7p3h9kCgSWjD?p=preview
5. https://github.com/angular/angular/issues/14842

[Primaryw]

Wow, no responses to this one? I have a similar issue.

[mszarata]

I have managed to do this by simply:

Code: Select all

  @ViewChild('fileUpload') fileUpload: ElementRef;

  remove(event, file) {
    this.fileUpload.remove(event, file);
  }

[quekqh]

.remove cannot be found?