Enhanced Support for Dynamically Setting Attributes Across Angular Material Components (e.g. `mat-fab`, to Change Button Variants at Runtime).
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Feature Description
This feature would enable developers to update not only the appearance of Material Design buttons but also other components dynamically, based on user interactions or other real-time factors. The ability to dynamically update attributes such as mat-fab, and others that significantly alter the layout or styling, is currently limited post-initialization.
The existing workarounds for this limitation are often complex and can significantly impact performance.
**Current Workarounds and Their Limitations**:
I have attempted several approaches, including:
1. **Manually setting the attribute using Renderer2 and ElementRef**: While this method provides direct control over component attributes, it can lead to verbose and complex code, especially when dealing with multiple attributes and components. Moreover, it requires careful management of Angular's Lifecycle, adding a layer of complexity in ensuring that attribute changes align with Angular's change detection and update cycles.
2. **Creating a Proxy around the component element to intercept and apply attribute changes**: This approach offers a degree of flexibility and a more elegant solution for attribute manipulation. However, it adds an additional layer of complexity and can be challenging to manage across different components. Additionally, the reliance on Metaprogramming techniques, which are less familiar to many developers, can hinder maintainability and reduce the ease of updates.
3. **Forcing the component to re-render by updating a key value within an `*ngIf` directive**: This approach, although effective in certain scenarios, can lead to performance issues. It involves destroying and recreating components, which is inefficient and resource-intensive, especially for large and interactive UIs. Such a method goes against Angular's philosophy of efficient, reactive UI updates and can drastically affect the user experience in more complex applications.
### Use Case
In many web applications, the UI needs to respond dynamically to user actions and other application states. For example, a button may need to change from a standard button (`mat-button`) to a floating action button (`mat-fab`) based on a user's selection or a specific state in the application.
Currently, such dynamic changes require workarounds that are less efficient and potentially less performant. Having native support for this functionality would streamline the development process, reduce the need for custom solutions, and align Angular Material more closely with dynamic and reactive design patterns.
Another significant use case for this feature is the **creation of interfaces designed to configure other software interfaces.**
Such UIs need to dynamically respond to runtime changes efficiently, adapting their appearance and functionality on the fly.
This feature would be particularly valuable in scenarios where developers are building highly interactive and configurable environments, eliminating the need to prepare static lists of elements. Instead, developers could leverage Angular Material to dynamically adapt UI components like buttons to varying requirements and states, enhancing the overall flexibility and user experience.
This capability is crucial in modern software development, where adaptability and responsiveness are key to meeting diverse and evolving user needs and expectations.
We appreciate the continuous efforts of the Angular Material team in advancing the framework and thank you for considering this feature request.
コントリビューションガイド
調査の方向性
ソースファイル、テスト、エントリポイントのいずれも指定されていません。まず Angular Material component APIs と、説明されている実行時の属性の制限を確認し、その後、どのコンポーネントと属性をサポートすべきかを判断してください。完了条件は、列挙された回避策を使わずに、初期化後に mat-button や mat-fab などのバリアントを変更するための、定義済みでテスト済みのアプローチがあることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100