Hola tengo dos componentes. El componente 1 tiene un elemento de entrada para cargar videos. Tiene un archivo variable.
<input type="file" accept=".mp4" #file />Ahora tengo Component2 que es un componente compartido:
<button (click)="file.click()">upload video</button>Ahora necesito que se pase la variable "archivo" al componente compartido para ejecutar el archivo.click();
No puedo tomar el elemento de entrada en el componente compartido
https://stackblitz.com/edit/angular-ivy-9wi6qs?file=src/app/component1/component1.component.html
Esto es tan simple como enviar el valor al componente:
@Component({ selector: 'app-component1', templateUrl: './component1.component.html', styleUrls: ['./component1.component.css'] }) export class Component1Component implements OnInit { constructor() { } public fileAddress: string; public fileChanged(event) { // read the file when it changes and store it locally if(event.target.files.length > 0) this.fileAddress = event.target.files[0].name; } } ngOnInit() { } } <!-- bind the event handler --> <input type="file" accept=".mp4" (change)="fileChanged($event)" /> <!-- bind the local variable to an input on the child component --> <app-upload-video [fileAddress]="fileAddress"></app-upload-video> @Component({ selector: 'app-upload-video', templateUrl: './upload-video.component.html', styleUrls: ['./upload-video.component.css'] }) export class UploadVideoComponent implements OnInit { //input variable to receive the value inside the component @Input() public fileAddress: string; constructor() { } ngOnInit() { } }