angular / angular/components

Enhanced Support for Dynamically Setting Attributes Across Angular Material Components (e.g. `mat-fab`, to Change Button Variants at Runtime).

Ouverte
#28,292 0 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
area: many feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Aucun fichier source, test ou point d’entrée n’est indiqué. Commencez par examiner les Angular Material component APIs et les limitations d’attributs à l’exécution décrites, puis déterminez quels composants et attributs devraient être pris en charge. Le travail est considéré comme terminé lorsqu’une approche définie et testée permet de modifier des variantes telles que mat-button et mat-fab après l’initialisation sans les solutions de contournement indiquées.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.