Is #myId the same as id="myId" in HTML?

Question

While taking an angular course I read the following code:

<p *ngIf="serverCreated;else noServer">{{serverName}}  {{serverCreationStatus}}</p>
<ng-template #noServer>
  <p>No server was created</p>
</ng-template>

I wonder if the expression #noServer is equivalent to the expression id="noServer". Is this way of doing specific to Angular? Is it recommended to use this way of defining the id?

NO. with `#noServer` you're using a [template reference variable](https://angular.io/guide/template-reference-variables) that you can get using ViewChild and ViewChildren. id="noServer" only give an attibute to your tag that you can use to style (using .css) or get the htmlElement using javascript with document.getElementById -It's not very desirable when we are using Angular- — Eliseo, Mar 22 '22 at 09:07

score 0 · Accepted Answer · answered Mar 22 '22 at 09:08

The #noServer is what's called a template variable. It's not the same as an id attribute. It allows Angular to reference the element it's placed on, either from within the template:

<div *ngIf="myCondition; else otherDiv"></div>
<div #otherDiv>

Or from TypeScript using @ViewChild, for example:

@ViewChild('otherDiv') otherDiv: ElementRef

For more information, see Angular docs https://angular.io/guide/template-reference-variables

Is #myId the same as id="myId" in HTML?

1 Answers1