Suggestion: Functional Components

This issue has been created since 2022-11-21.

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

core

Description

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.

Alternatives considered

Obviously there are many other ways that the API for this can be built, but the important thing is that you can provide any object / factory function to the context, and not necessary a class. That is what will enable to flexibility of reuse of code that functional programming enables, but OOP does not.

mlc-mlapis wrote this answer on 2022-11-21

@ShacharHarshuv But there are also many cases where class inheritance is how to solve them effectively and elegantly. Angular certainly need both ways.

ShacharHarshuv wrote this answer on 2022-11-21

Angular certainly need both ways.

Of course! My suggestion was not to replace the existing API, but to supply an alternative way of doing the same thing.

angular-robot[bot] wrote this answer on 2022-11-23

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Not Grasping: Visual Studio Code runs the console app in project folder? 4 2022-01-30 2022-11-23
[Crash]: Ash stairs [1.19] 1 2022-08-18 2022-10-24
Unable to read or write without readOnlyUrl in config (if user is connected) 0 2022-06-01 2022-11-27
Support custom actions 1 2021-10-03 2022-10-07
scRGB-nl to scRGB transformation equation does not appear to be present in IEC 61966-2-2:2003 1 2021-06-07 2022-11-08
Internationalize <blockquote> and <q> style 1 2018-03-09 2022-10-07
Tracking issue for typos in current partiql specification 0 2022-08-24 2022-09-22
Make titkok api like this 2 2022-08-28 2022-09-18
Some questions about this hack 27 2019-04-11 2022-09-24
CSS 奇思妙想边框动画 3 2021-01-14 2022-01-01
Whiteboard: Issue on mobile devices 0 2021-11-28 2022-10-12
What's wrong with this? Do I need to do anything else? It will affect my result? 5 2021-10-28 2022-11-10
can't add "orderBy:"id", orderDesc: true, limit: 1" to findOne 5 2022-10-08 2022-11-20
Page_to_pdf throw page not found alert 0 2022-10-09 2022-11-20
How set Locale Flatpickr and full calendar 4 2022-10-10 2022-11-20
AttributeError: 'Standard_Wallet' object has no attribute 'get_depending_transactions' 2 2022-08-12 2022-10-14
Stop scrolling immediately when scroll wheel stops. 0 2021-03-08 2022-11-08
Release latest Tag for compatibility with go modules 0 2021-04-15 2022-11-23
How can I send an complicated object to queue? 2 2021-05-20 2022-11-23
BUG: <Please write a comprehensive title after the 'BUG: ' prefix> 3 2022-09-01 2022-09-09
How to roll the log by date and size 8 2018-07-25 2022-11-23
Emacs-style comment break state file processing when non-default environment used 5 2021-06-26 2022-10-23
[FEATURE] Open window on currently focused monitor. 3 2022-01-17 2022-11-08
Hand off Projectile creator to collided entity as notifier 0 2021-07-17 2022-09-28
Question: can you set a tint for the URL? 1 2021-02-19 2022-09-02
How to remove footer/navigation bar in android/ios? 1 2021-02-11 2022-11-11
Disable colors when output is directed to a file 0 2021-04-10 2022-11-11
No Proton Games Work - Intel Xe - Wayland KDE 6 2021-12-15 2022-10-10
ThreadSanitizer issues 13 2022-02-20 2022-11-19
Allow NodePort to be specified for services to allow connection to services such as databases 1 2021-09-28 2022-11-27
Jython2.7.2 coexisting with Ghidra as primary 5 2022-09-09 2022-09-07
[question] How to set package_manager:mode 11 2022-10-04 2022-10-21
[Feature Request] [Enhancement] 希望增加el-time-picker的picker-option选项 1 2022-04-20 2022-11-23
TreeSelect单选时nzAllowClear设置为false应必选中一个值 1 2021-08-25 2022-11-27
label_format not working for question mark in the regex 2 2022-03-06 2022-11-25
Features that are not enabled and should not be displayed in the toolbox 3 2021-10-25 2022-11-23
LSP: Visit type aliases in Indexer 0 2022-07-28 2022-09-07
Preferred language is ignored 10 2021-09-27 2022-09-16
Autocomplete or custom rendering 0 2022-03-07 2022-11-14
Cannot update a ConnectionString for local PBIRS, PBI file with Live Connect to a SQL (relational) Data Source 3 2021-09-27 2022-11-23
Using New-RsRestSession with Credentials fails 0 2022-05-30 2022-11-23
New-RsRestCacheRefreshPlan fails to write description 0 2021-06-15 2022-11-23
After writing folder to SSRS, Datasets and Data Sources Cannot be Found 1 2021-06-25 2022-11-23
New-RsRestFolder.ps1 - Description in Script Example is not right. 0 2021-07-21 2022-11-23
Error messages in `gulp setup` are misleading 1 2017-10-17 2022-11-08
Group Memberships not shown in Report 6 2020-10-08 2022-11-23
Create Recovery Link API: 403 security_csrf_violation 0 2022-10-17 2022-11-21
Load from Url 1 2020-02-17 2022-01-16
The point cloud and image correlation of the rear view in the DeepFusion work 1 2022-03-18 2022-11-21
[kubelet] Ability to tweak resolution for metrics calculated by kubelet 3 2022-07-04 2022-10-30