title: How can you explicitly mark @Input() properties as readonly in angular?
body: <p>Inputs are the main source of communication between components in Angular, but they are mutable by default which can lead to unwanted behavior throughout the application. This can easily slip through a code review (which I am responsible for) and end up in the production codebase.</p>
  <p>Given the following code:</p>
  <pre class="lang-js prettyprint-override"><code>export class UserListComponent {
    @Input() users: User[] = [];
  
    filterLocally(filter: string): void {
      this.users = this.users.filter((u) =&gt; u.name === filter);
    }
  }
  </code></pre>
  <p>Any array passed on from the parent component to the <code>users</code> input has the risk of being changed. Let's say that this array originated from a cache which is also being used in different pages throughout the application. After applying a filter, this data would become modified and all those pages would receive invalid data. I know that this is theoretically allowed, but this is (in my opinion) such a bad pattern that we should be able to block this, especially when you're working in a team with a lot of junior developers.</p>
  <p>Is there a way to explicitly mark an @Input() as readonly? I've tried the following:</p>
  <pre class="lang-js prettyprint-override"><code>export class UserListComponent {
    @Input() readonly users: User[] = []; // &lt;-- added the readonly keyword -|-|-|-|-|-|-|-|-|
  
    filterLocally(filter: string): void {
      this.users = this.users.filter((u) =&gt; u.name === filter);
    }
  }
  </code></pre>
  <p>Which will trigger the following error at code/build time which is perfect as it forces you to create a local copy of the variable:</p>
  <p><a href="https://i.stack.imgur.com/TBe3S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TBe3S.png" alt="Error in controller" /></a></p>
  <p>But it also blocks you from initially passing data to this component which kind of destroys the purpose:</p>
  <p><a href="https://i.stack.imgur.com/70iQs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/70iQs.png" alt="Error in template" /></a></p>
  <p>Marking the input as such also does not work, because this can easily be circumvented in the controller:</p>
  <pre class="lang-js prettyprint-override"><code>@Input() users: Readonly&lt;User[]&gt; = [];
  </code></pre>
  <p>So far I haven't found a way to properly block this. Right now I'd even settle for a way to simply disable the rule inside .html files, but I cannot figure out a way to do this. A simple find &amp; replace from <code>@Input() ...</code> to <code>@Input() readonly ...</code> in our project yielded 200+ errors, so being able to mark the inputs as readonly would be a tremendous help for us.</p>