Repository: angular
Issue: feature: force reference to element in template
Labels: feature,area: core,core: local references,feature: under consideration

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
In Angular template, a reference (without assignment) will refer to 1) DOM 2) component instance depends on if there's a component here, like:

```html
<div #ref1>Content for element</div>
<app-div #ref2>Content for component</app-div>
<p>{{ ref1.prop }}</p><!--DOM Property-->
<p>{{ ref2.prop }}</p><!--Component Property-->
```

That's seems fine, but once we have component without custom elements, say that:

```typescript
@Component({
  selector: '[appDiv]',
  template: '<ng-content></ng-content>'
})
class MyComponent {}
```

Then the template changes to:

```html
<div #ref1>Content for element</div>
<div #ref2 appDiv>Content for component</div>
<p>{{ ref1.prop }}</p><!--DOM Property-->
<p>{{ ref2.prop }}</p><!--Component Property (not expected)-->
```

But in case we want to refer to native `<div>` element, that cannot be done in template.
<sub>Bad example for using `div`, but may be important for other elements.</sub>

One workaround is using `{ read: ElementRef }` in component, but there's too much boilerplate.

## Expected behavior
<!-- Describe what the desired behavior would be. -->

Able to force reference the DOM element via some pre-defined `exportAs` like:

```html
<div #ref1>Content for element</div>
<div #ref2="$element" appDiv>Content for component</div>
<p>{{ ref1.prop }}</p><!--DOM Property-->
<p>{{ ref2.prop }}</p><!--DOM Property-->
```

## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

https://stackblitz.com/edit/angular-9g5zgh?embed=1&file=app/app.component.html

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->

In Angular component library, it's quite common to use *attribute selector* for components (easy to find example in material), but sometimes there're also case for dealing with the element rather than component.

But should be consider low priority since it's easy to workaround.

## Environment

<pre><code>
Not applicable

Angular version: X.Y.Z
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>