angular / angular/components

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

Abierto
#28,292 0 comentarios 7 reacciones 0 asignados Ver en GitHub
area: many feature P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

No se nombra ningún archivo fuente, prueba ni punto de entrada. Empieza revisando las Angular Material component APIs y las limitaciones de atributos en tiempo de ejecución descritas; después, determina qué componentes y atributos deberían admitirse. Se considera terminado cuando exista un enfoque definido y probado para cambiar variantes como mat-button y mat-fab después de la inicialización sin las soluciones alternativas indicadas.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.