Add an option in the @Component() decorator to add scope to the view template

Which @angular/* package(s) are relevant/releated to the feature request?

common

Description

To expose constants or enums to a template is messy and becomes uncomfortable to manage.

It would be great if there was another way to bind data without adding it to the class.

Proposed solution

Add an option to the @Component() decorator to quickly bind data without polluting the class.

It could look like this:

import { myBigData, MY_CONSTANT } from './data';

enum Colours {
  Red,
  Green,
  Blue,
}

@Component({
  selector: 'app-colours',
  templateUrl: './colours.html',
  scope: [Colours, myBigData, MY_CONSTANT],
})
class ColoursComponent {}

These would be available in the template.

<button (click)="trigger(Colours.red)"></button>

<div *ngFor="let item of myBigData">{{ item }}</div>

{{ MY_CONSTANT }}

Alternatives considered

An alternative could be a second decorator potentially, however that doesn’t sound great. A different name could work too of course.

[JoostK]

Thanks for linking the duplicates @rafaelss95; closing as dup of #25963.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}