What's the difference between using id="mydiv" and #mydiv in Angular HTML?

Question

It's a simple Angular HTML question, I would like a bit clarity about the id of tags. For example, in my code I have:

    <input class="inputfile" type="file" name="file" #file id="file" 
    (change)="onFileChange($event)"/>

    <button mat-mini-fab color="primary" (click)="file.click()">                        
            <mat-icon aria-label="Icon to upload file">cloud_upload</mat-icon>
    </button>

    <label for="file" >Upload your portifolio</label>

In that example, I had to set #file in the input for the button to work and also had to set id="file" for the label to work. Previously I thought they had the same function and it was just about syntax. Could someone clarify what are the uses of each?

Answer 1

If you want to identify an element using javascript function or from your controller using getElementByID or to point to a style in a style sheet, you need to set the id that has to that element be unique throughout your DOM.

However, when you want to access your element within the DOM file you need to refer the element using #. if you use just id you will have the error Cannot read property 'XXX' of undefined in your browser.

For example, in order to show/hide a button using the value of an input in DOM file without writing any javascript/angular code you could do something like the following, in which setting the id wouldn't work out.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #nameField matInput placeholder="Name">
  </mat-form-field>

  <button type="button" *ngIf="nameField.value!==''" >Submit</button>
</form>

Reference to this to dealing with user input and this as a broader explanation of the # tag.

Answer 2

In an Angular application #mydiv can have different functions depending on the context.

• On a DOM element <div #mydiv> is a reference to the element
• A reference to an Angular component
• On an element that is an Angular component, or has an Angular directive, where exportas:"ngform" is defined, #mydiv="ngForm" creates a component reference.