CODEWITHSUNDEEP
angulartypescript
Barnes
Barnes

Reputation: 13

Document is undefined Angular

I have this code in my html to trigger a file input when this div is clicked. Currently I get an error that document is undefined, but when I add a breakpoint and watch for the document variable I see that it is infact defined at the time this html runs. I'm using the angular framework.

  <input id="file-input" type="file" name="name" style="display: none;" />
  <div class="csvBox" id="csvBox" (click)="document.getElementById('file-input').click();">

Upvotes: 1

Views: 1181

Answers (2)

Brian Stanley
Brian Stanley

Reputation: 2196

Sounds like you need to import document from angular.

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component()
 export class MyService {
 constructor(@Inject(DOCUMENT) private document: Document) {}
}

Upvotes: 1

HTN
HTN

Reputation: 3604

The template have access only to component properties. document is not one.

Moreover, you should never use document.getElementById with Angular. You can use template variable like this:

<input #fileInput type="file" name="name" style="display: none;" />
<div class="csvBox" id="csvBox" (click)="fileInput.click()">

Upvotes: 3

Related Questions