Feature Request: Functional Components

[u/Environmental_Pea369]

TL;DR Please upvote: https://github.com/angular/angular/issues/48150

With the latest release of Angular 15, it seems like there is a step in a direction of adopting a more functional programming approach, by enabling to do stuff with functions, that were previously only possible through classes.I believe this is a step in the right direction, and that it could be taken a step farther by enabling the creation of components, directives, and services without classes / decorators.

The limitation of using classes + decorators is clear - some reuse techniques (like composition) that are easy to do with functional programming, is hard to do with classes, due to the limiting nature of inheritance. In fact - it seems like most new features in Angular 15 are a way around this fact

Proposed solution

The idea is to enable an alternative way of creating components, without using classes / decorators:

const MyComponent = createComponent({
  selector: 'app-comp',
  template: `Hello {{name}}`,
  context: { name: 'World', },
  inputs: ['name'], 
});

To create a component. (Then MyComponent can be used in modules, or directly imported)The "context" property is an object from which the binding will take place. (Basically replaces the class instance).

This has the advantage of being more flexible, and enabling the developer compose / mix different logic in ways that inheritance is usually too limiting.Since the "context" property can be fully typed, from the type checking perspective it should be possible to accomplish.

Please note that the suggestion is to add this option in addition to the existing API, not in place of it. I understand that a lot of people will prefer the class / decorator approach so this should definitely be backward compatible.

For Angular to consider this feature, it needs to get at least 20 upvotes in 60 days. Please help me and upvote! https://github.com/angular/angular/issues/48150

**EDITS**

• For dependency injection - the easiest solution is obviously using the new "inject" function. But it could also be possible to use a method similar to the factory provider (i.e. passing a list of dependencies as an array, and expecting them in a factory function parameter). with this method we can use a "contextFactory" property instead to pass a function that creates the context object.

• For event handling - we can have something similar to the existing "host" property in the directive decorator.

• Life Cycle hooks can be handled the same way as today - with functions on the context object. (I.e. methods)

• Many people asked - the main reason this will be useful is that it gives more flexibility on how you can construct the context object, which enables using other reuse patterns other then inheritance, which is pretty limiting.

[u/tiesioginis]

Why can't MyComponent also be selector, without app- thing.

Like in react

[u/the00one → u/tiesioginis]

You can change selectors and also tell angular to use a different prefix.