<p dir="auto">Discussed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="75355912" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/1818" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/1818/hovercard" href="https://github.com/angular/angular/issues/1818">#1818</a> and submitted a PR in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="115259445" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/5140" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/5140/hovercard" href="https://github.com/angular/angular/pull/5140">#5140</a>. Because the team is rewriting the compiler. The PR cannot be rebased. cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tbosch/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tbosch">@tbosch</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class MyClass {
  constructor(@Attributes() atts: Map&lt;string, string&gt;)
}
//Originally, @Attribute('foo') returns Map.get('foo'), now support @Attribute() to return the Map.
"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">MyClass</span> <span class="pl-kos">{</span>
  <span class="pl-c1">constructor</span><span class="pl-kos">(</span>@<span class="pl-v">Attributes</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">atts</span>: <span class="pl-v">Map</span><span class="pl-c1">&lt;</span><span class="pl-c1">string</span><span class="pl-kos">,</span> <span class="pl-c1">string</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-c">//Originally, @Attribute('foo') returns Map.get('foo'), now support @Attribute() to return the Map.</span></pre></div>
<p dir="auto">PS: About <code class="notranslate">@attribute()</code> vs <code class="notranslate">@attribute</code>, since all decorators from angular has parentheses and according to the developer guides: 'Always include the parentheses! Always call <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Injectable/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Injectable">@Injectable</a>(). Our application will fail mysteriously if we forget the parentheses.' So I think we should use <code class="notranslate">@attribute()</code></p>
<p dir="auto">In the existing material design library for Angular 1, there are some components that use a concept of "responsive attributes". Say you have a component like <code class="notranslate">md-grid-list</code>, which has an attribute <code class="notranslate">cols</code>. You can specify the value conditionally on screen size, for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="cols-sm=&quot;2&quot;     // Small screen size
cols-lt-lg=&quot;4&quot;  // Less than large screen size"><pre class="notranslate"><code class="notranslate">cols-sm="2"     // Small screen size
cols-lt-lg="4"  // Less than large screen size
</code></pre></div>
<p dir="auto">We currently have a way to inject a <em>single</em> attribute (<code class="notranslate">@Attribute('cols')</code>), but the number of combinations gets large quickly (this one attribute has 9). One could also set up <code class="notranslate">properties</code>, but again it's a lot of boilerplate and unnecessary bindings.</p>
<p dir="auto">One solution would be to allow injection of a <code class="notranslate">&lt;string, string&gt;</code> attribute map.</p>
<p dir="auto">As a workaround, when per-component renderers are supported, the renderer can read the attributes and pass the values back to the directive via an event.</p>