Flux RSS du blog Angular - Med... Note

Flux RSS du blog Angular - Medium

Le site web semble être le blog officiel d'Angular, un framework d'application web. La page d'accueil affiche une liste d'articles de blog récents intitulés comme "10ème anniversaire du projet Angular". Les thèmes courants incluent la technologie, le développement et Angular lui-même. Il y a une barre de recherche, ainsi que des catégories, des étiquettes et une page à propos. Il fournit des ressources, des mises à jour et des tutoriels liés au framework Angular.

Fil de notes

La prise en charge d'Angular pour la génération d'applications dans Google AI Studio est désormais disponible.

Google AI Studio prend désormais en charge la génération d'applications Angular. Cette collaboration vise à apporter la puissance de l'IA de Gemini à la communauté des développeurs Angular. Les développeurs peuvent accéder à cette fonctionnalité via l'onglet "Build" d'AI Studio, gratuitement. Pour générer du code Angular, les utilisateurs doivent d'abord sélectionner le modèle de framework "Angular (TypeScript)" dans les paramètres avancés. Après avoir sélectionné le modèle, les utilisateurs peuvent saisir des invites pour l'application souhaitée. Gemini générera alors l'application Angular en fonction de l'invite fournie. Cette intégration accélère considérablement le prototypage et le développement d'applications, réduisant les délais initiaux de plusieurs semaines à quelques jours. Au-delà de la génération de code, AI Studio permet de créer des applications alimentées par l'IA en utilisant l'API Gemini. Les applications générées peuvent être facilement déployées sur Cloud Run pour un environnement sans serveur. Le code peut également être exporté vers GitHub pour le contrôle de version et la collaboration. Le partage des applications générées pour obtenir des commentaires et des preuves de concept est également simplifié. Les développeurs sont encouragés à essayer cette nouvelle fonctionnalité sur goo.gle/angular-ai-studio et à partager leurs créations en utilisant #AngularInAIStudio.
CdXz5zHNQW_efWO6p8BJv.png

Au-delà de l'horizon : Comment Angular adopte l'IA pour les applications de nouvelle génération

L'équipe Angular a introduit l'outil Web Codegen Scorer pour améliorer la génération de code web pilotée par l'IA. Cet outil aide à optimiser les LLM pour l'état actuel du framework Angular et facilite l'intégration des fonctionnalités d'application évolutives. Il aide à analyser et à déboguer les échecs courants des LLM, permettant une itération plus rapide sur les améliorations. Le Web Codegen Scorer a été développé en collaboration avec des experts en IA, en sécurité et en accessibilité pour une évaluation robuste. Angular a également collaboré avec l'équipe SolidJS, démontrant le potentiel de l'outil pour améliorer la génération de code pour d'autres frameworks. L'outil est open-source pour encourager les contributions de la communauté et une adoption plus large des frameworks. Angular v20.2 inclut le serveur Angular MCP, fournissant aux agents de codage des outils intégrés pour les sessions de développement. Les futures fonctionnalités du serveur MCP incluront des outils de modernisation pour la migration de syntaxe et un moteur RAG local pour des informations d'IA à jour. Le support Angular a été intégré aux produits d'IA de Google, Gemini Canvas et Google AI Studio. L'équipe explore également un framework axé sur l'IA, se concentrant sur les capacités des agents pour les bases de code volumineuses et minimisant les problèmes courants des LLM. Ils expérimentent des formats d'auteur et des structures d'application, promettant la transparence dans les futurs développements Angular. L'équipe Angular s'engage à soutenir les développeurs dans la création d'applications évolutives et alimentées par l'IA.
CdXz5zHNQW_J8s9Nu3Qbl.png

Mise à jour estivale Angular 2025

Angular a publié des mises à jour mineures v20.1 et v20.2, mettant l'accent sur la productivité des développeurs et les améliorations de l'intelligence artificielle. Un point fort est la disponibilité en production d'Angular sans zone, offrant des avantages tels que des tailles de bundle plus petites et une débogage améliorée. De nouveaux primitives d'animation, animate.enter et animate.leave, permettent une intégration plus facile des animations CSS natives et déprécient le vieux package @angular/animations. L'équipe élargit ses offres d'IA avec des guides pour la construction d'applications alimentées par l'IA et améliore les outils de codage assistés par l'IA. Ils travaillent également sur un serveur MCP expérimental pour répondre aux besoins de l'IA, tels que la recherche de documentation et les meilleures pratiques pour les LLM. Les outils de développement Angular incluent maintenant une visualisation des routes et des graphiques de signal pour une débogage améliorée. Les tests de composants ont été simplifiés avec la prise en charge de la transmission d'objets de liaison à TestBed.createComponent. Le composant Mat Menu peut maintenant fonctionner comme un menu contextuel, et NgComponentOutlet prend en charge les injecteurs d'environnement personnalisés pour les composants dynamiques. D'autres améliorations incluent un guide de routage revu, un signal de navigation actuelle, une propriété détruite sur DestroyRef, et une meilleure prise en charge des opérateurs de modèle et des attributs ARIA. Angular prend maintenant en charge TypeScript 5.9 et a apporté des améliorations à httpResource et httpClient. La communauté a fourni des commentaires significatifs pour le nouveau mascotte Angular, avec un design final qui sera révélé plus tard cette année.
CdXz5zHNQW_bylcGSZJTi.png

La piste de profilage personnalisé Angular est maintenant disponible

Les équipes Angular et Chrome ont collaboré pour apporter des données et des insights spécifiques à Angular directement dans le panneau de performance des outils de développement Chrome, créant une expérience de profilage unifiée pour les développeurs. Cette intégration permet aux développeurs de combiner les avantages des deux outils, offrant une vue plus synchronisée et complète des performances de leur application. La nouvelle piste personnalisée pour Angular dans les outils de développement Chrome fournit des données de performance en utilisant des concepts Angular tels que le démarrage de l'application, les composants, la synchronisation de l'interface utilisateur et les hooks de cycle de vie. Les diagrammes de flammes de la piste personnalisée regroupent les appels de fonction ensemble sous les composants et les autres concepts Angular correspondants, permettant aux développeurs de zoomer sur des fonctions individuelles pour une vue plus granulaire. Les entrées du diagramme de flammes sont codées par couleur pour aider les développeurs à identifier rapidement ce qui se passe dans leur application, distinguant entre le code de l'application, les autres scripts ou les activités du navigateur. Les couleurs représentent différents aspects de l'application, tels que les services d'injection de dépendances, les modèles compilés par Angular et les points d'entrée. La piste personnalisée est interactive, permettant aux développeurs de cliquer sur une entrée dans le diagramme de flammes pour révéler plus d'informations détaillées sur une entrée donnée. Pour commencer, les développeurs doivent s'assurer qu'ils utilisent la dernière version d'Angular et une version à jour de Chrome, exécuter leur application Angular en mode développeur et activer la piste personnalisée en tapant ng.enableProfiling() dans la console. Cette intégration démontre l'engagement continu d'améliorer l'expérience du développeur au sein de l'écosystème Angular, permettant aux développeurs de construire des applications plus rapides et plus efficaces.
CdXz5zHNQW_arec9d2R1S.png

Annonce d’Angular v20

Angular a réalisé des avancées significatives au cours des deux dernières années, notamment en matière de réactivité avec Signals et d'applications sans zone. La dernière version, Angular v20, se concentre sur le perfectionnement des fonctionnalités en cours de développement pour une expérience développeur solide. Cette version stabilise des API telles que effect, linkedSignal et toSignal, et promeut le zoneless en version préliminaire pour les développeurs. Elle améliore également le débogage avec Angular DevTools et s'associe à Chrome pour des rapports Angular personnalisés directement dans les Chrome DevTools. La version améliore l'expérience développeur grâce à des mises à jour du guide de style, à la vérification des types et à la prise en charge du service de langage. De plus, elle fait progresser le développement de l'IA générative (GenAI) et lance une demande de commentaires pour une mascotte officielle d'Angular. Cette version promeut les fonctionnalités de réactivité en version stable, notamment les API signal, computed, input et view queries. Elle introduit également des API expérimentales, notamment l'API resource et httpResource, pour gérer l'état asynchrone avec Angular. En outre, elle promeut le zoneless en version préliminaire pour les développeurs et consolide Angular sur le serveur avec l'hydratation incrémentale et la configuration du mode de rendu au niveau des routes. Enfin, elle améliore l'expérience développeur avec des informations sur les performances dans Chrome DevTools et des ajouts et améliorations du framework.
CdXz5zHNQW_t5gWIMi5Tb.png

Découvrez Angular v19

Au cours des deux dernières années, l'équipe Angular s'est concentrée sur l'amélioration de l'expérience du développeur et des performances à chaque version. La dernière version, v19, introduit plusieurs nouvelles fonctionnalités et améliorations, notamment l'hydratation incrémentielle, le mode de rendu au niveau de la route et une expérience développeur améliorée. L'hydratation incrémentielle permet aux développeurs de spécifier quelles parties du modèle doivent être chargées et hydratées sur des déclencheurs spécifiques, améliorant ainsi les performances. Le mode de rendu au niveau de la route permet de configurer les routes individuelles pour être rendues côté serveur, pré-rendues ou rendues côté client. Les améliorations de l'expérience développeur incluent le remplacement de module à chaud pour les styles et le support expérimental pour le HMR de modèle, les valeurs par défaut autonomes sont vraies, l'application stricte des valeurs autonomes et un nouvel outil de configuration de tests.

Sortie d'Angular v19 : Rejoignez les soirées de visionnage !

La sortie d'Angular v19 approche et les développeurs se préparent pour célébrer. L'événement Angular v19 pour les développeurs aura lieu le 19 novembre à 9h du matin, heure du Pacifique. Pour marquer l'occasion, plusieurs événements de visionnage en direct sont organisés dans le monde entier. À Buenos Aires, un événement de visionnage en direct sera diffusé sur YouTube le 19 novembre. En France, plusieurs événements de visionnage en personne auront lieu à Nantes, Tours et Paris le 19 novembre, avec une inscription disponible sur Eventbrite. Angular Athens organise un événement de visionnage virtuel sur Discord le 19 novembre. Le meetup Angular de Singapour organise un meetup en personne le 19 novembre, avec une inscription disponible sur LinkedIn. Ces événements de visionnage offrent une excellente opportunité d'apprendre sur les dernières fonctionnalités d'Angular, de réseauter avec d'autres développeurs et de partager l'enthousiasme pour la nouvelle version majeure. Ils offrent une chance de se connecter avec la communauté Angular et de célébrer la nouvelle version. N'oubliez pas ces événements et marquez vos calendriers pour le 19 novembre.

Dernières mises à jour de effect() dans Angular

Le processus de prévisualisation des développeurs d'Angular permet aux développeurs d'essayer des API et des fonctionnalités avant qu'elles ne soient promues en production. Cela permet également à l'équipe Angular d'ajuster ces API en fonction de l'utilisation réelle et des commentaires. Grâce aux commentaires sur l'API effect(), l'équipe a identifié plusieurs améliorations à la conception qui permettront de résoudre les problèmes réels de fonctionnalité et d'expérience développeur. L'une des modifications consiste à supprimer le drapeau allowSignalWrites, qui visait à encourager les bonnes pratiques, mais qui a finalement découragé l'utilisation de effect() dans les cas où il serait raisonnable de mettre à jour les signaux. Au lieu de cela, l'équipe se concentrera sur d'autres moyens d'encourager les bonnes pratiques, notamment l'ajout de nouveaux assistants de réactivité si nécessaire. Le moment où les effets s'exécutent est également en train d'être modifié, les effets s'exécutant désormais dans le cadre de la hiérarchie des composants pendant la détection des changements. Ce changement vise à rendre le moment des effets plus prévisible et plus utile, et à résoudre les bogues liés aux effets qui s'exécutent trop tôt ou trop tard. La plupart des utilisations de l'API effect() continueront de fonctionner comme prévu, mais certains cas d'utilisation peuvent être affectés, tels que les effets sur les résultats de la requête de vue et toObservable() des signaux d'entrée. L'équipe Angular a corrigé environ 100 cas où le changement de moment a eu un impact significatif sur le code pendant les tests chez Google. Suite à ces modifications, l'API effect() restera en prévisualisation pour les développeurs au moins jusqu'à la version 19.0, avec des plans pour stabiliser l'API dans une prochaine version mineure. L'équipe Angular remercie la communauté pour ses commentaires et son soutien, qui ont joué un rôle crucial dans le développement d'Angular.

Le futur est autonome !

Dans Angular v19, la valeur par défaut pour les composants, les directives et les pipes sera définie sur standalone : true, ce qui facilitera l'écriture de code Angular. Ce changement suit le succès de la fonctionnalité autonome introduite dans la version 14, qui a été largement adoptée dans l'écosystème Angular. La fonctionnalité autonome simplifie le chargement paresseux au niveau des routes, permet un meilleur modèle de composition pour le comportement des composants et autorise le chargement paresseux des composants et des directives au niveau du modèle. Les composants autonomes existants verront standalone : true supprimé dans le cadre de la mise à jour ng pour la version 19, tandis que les composants NgModule existants verront standalone : false ajouté pour s'assurer qu'ils continuent à fonctionner. L'option de compilateur strictStandalone peut être définie pour exiger que seuls les composants autonomes soient écrits dans une application. Rien ne changera pour FormsModule et d'autres bibliothèques npm avec des NgModules, et les composants autonomes peuvent continuer à importer les dépendances NgModule selon les besoins. Les auteurs de bibliothèques n'ont pas besoin d'apporter de modifications, car leurs composants se comporteront correctement lorsqu'ils seront importés par les utilisateurs, quelle que soit la version.

Utilisation de isolatedModules dans Angular 18.2

Angular 18.2 introduit la prise en charge des modules isolés de TypeScript, offrant des améliorations significatives des performances. En activant cette option, le code TypeScript est transpilé via le bundler, ce qui entraîne une réduction de jusqu'à 10 % du temps de construction de production. Le bundler, esbuild, optimise le code de sortie, notamment en insérant des énumérations, et supprime les passes d'optimisation Babel pour le code TypeScript. Pour activer cette fonctionnalité, ajoutez "isolatedModules" : true à la section "compilerOptions" de votre fichier tsconfig.json. Assurez-vous de supprimer l'option "useDefineForClassFields" ou de la définir sur true pour une taille de sortie optimale. Pour en savoir plus, consultez la documentation TypeScript sur les modules isolés. En mettant en œuvre ces modifications, les développeurs peuvent tirer parti de cette fonctionnalité pour améliorer les performances de construction et créer des applications Angular efficaces.

Le futur du support matériel dans Angular

Les modifications apportées à Material Web Components (MWC) de Google n'affectent pas Angular Material, car il n'utilise ni ne dépend de MWC. Angular Material utilise internement MDC Web et est en train de passer à une version forkée et améliorée du code de MDC Web au sein d'Angular Material, ce qui n'aura pas d'impact sur les API de composants ou la sortie. La dernière version d'Angular Material inclut les styles Material 3, le support des variables CSS et les schémas de thématisation. L'équipe prévoit d'étendre les fonctionnalités et la documentation d'Angular CDK pour améliorer le développement d'applications. Angular Material reste activement pris en charge et en développement, offrant aux développeurs des outils robustes pour créer des interfaces utilisateur de haute qualité.

Immersez-vous dans l'art génératif : une aventure WebXR Angular

La session Angular de Google I/O a présenté la démo de la Galerie d'Art Génératif, combinant les technologies d'apprentissage automatique, Angular et WebXR. La démo utilise l'API Imagen de Vertex AI pour générer des œuvres d'art, l'API Gemini pour des explications éclairées, et affiche les œuvres dans une galerie 3D. Accessible via les navigateurs, la réalité augmentée (AR) ou la réalité virtuelle (VR), la galerie offre une expérience immersive. Les vues différables d'Angular assurent une expérience utilisateur fluide en chargeant les modèles 3D en arrière-plan tout en maintenant la vue de remplacement. Les signaux simplifient le flux de données et réduisent le code boilerplate. Les composants WebXR abstraient la création de scène et réduisent le code boilerplate. Le rendu du côté serveur et l'hydratation améliorent significativement les performances, avec des améliorations notables dans les temps de premier et de plus grand peinture de contenu. Les avancées d'Angular améliorent l'expérience du développeur avec une facilité d'utilisation et de nouvelles API. Le code de la démo est disponible sur GitHub, inspirant les développeurs à créer leurs propres projets Angular, WebXR et d'apprentissage automatique.

Présentation de @let dans Angular

Angular introduit une nouvelle syntaxe @let, permettant aux développeurs de définir et de réutiliser des variables au sein des modèles. Cette syntaxe résout un problème de longue date dans la syntaxe de modèle d'Angular. Les déclarations @let permettent de définir des variables avec des valeurs dérivées d'expressions Angular. Ces variables peuvent ensuite être réutilisées tout au long du modèle, améliorant la lisibilité et la maintenabilité du code. Contrairement aux solutions précédentes, les variables @let sont étendues au vue actuelle et à ses descendants, améliorant l'organisation du code et évitant les collisions de variables indésirables. Les déclarations @let sont en lecture seule et leurs valeurs sont recalculées pendant la détection des changements, garantissant l'exactitude des données. La syntaxe formelle de @let comprend le mot-clé, un nom de variable, l'opérateur d'affectation, une expression Angular et un terminateur de point-virgule. Des exemples illustrent l'utilisation de @let pour définir des variables à afficher dans le modèle, y compris des expressions complexes utilisant des tuyaux asynchrones. L'équipe Angular encourage les commentaires sur la nouvelle syntaxe @let pour continuer à améliorer l'expérience du développeur.

Angular v18 est maintenant disponible!

Angular 18 introduit la détection de changement expérimentale sans zone, offrant des performances améliorées, une composabilité et une débogage renforcés. Angular.dev devient le site de documentation officiel, proposant une expérience utilisateur améliorée. Les composants Material 3, les vues différables et le contrôle de flux intégré sont maintenant stables, ainsi que le support i18n pour l'hydratation du rendu côté serveur. L'attente native async/await est disponible pour les applications sans zone, réduisant les tailles de bundle et améliorant la débogage. La bibliothèque de gestion des événements de Google.com alimente la répétition d'événements dans Angular, préservant les événements utilisateur pendant le chargement de la page. Les outils de développement Angular offrent une débogage améliorée pour les processus d'hydratation. Tous les composants Angular Material et CDK sont maintenant entièrement compatibles avec l'hydratation. L'hydratation partielle est en cours de développement, permettant l'hydratation incrémentale après le rendu côté serveur. La détection de changement sans zone améliore la composabilité pour les micro-avant-plans et l'interopérabilité avec d'autres frameworks. Les vues différables améliorent les indicateurs de base web, tandis que le contrôle de flux intégré offre de meilleures performances et ergonomie.

Envoi d'événements dans Angular

Le nouveau système de délégation d'événements d'Angular, inspiré d'Angular et de Wiz, permet la gestion des événements, en capturant les événements avant l'hydratation. Cela empêche les éléments d'interface utilisateur non réactifs et améliore l'expérience utilisateur. La gestion des événements utilise JSAction, une bibliothèque éprouvée utilisée par les applications Google. En activant la gestion des événements, les applications Angular peuvent cesser de perdre des événements avant l'hydratation et permettre l'interaction utilisateur dès le chargement de la page. Il s'agit d'une étape cruciale vers une hydratation plus fine, réduisant la quantité de JavaScript dans le chemin critique d'hydratation. Les vues différables seront hydratées de manière paresseuse sur le serveur pour minimiser le temps d'attente pour les réponses d'événements. Les prochains billets de blog fourniront des détails sur l'activation de cette fonctionnalité via des API publiques. Cette initiative pose les bases de la reprise d'Angular, comme offert par Wiz.

Angular et Wiz sont mieux ensemble

Angular et Wiz, deux frameworks web de Google, ont des objectifs distincts : Angular met l'accent sur l'expérience du développeur, tandis que Wiz se concentre sur les performances. Cependant, la demande croissante d'applications très performantes avec une bonne expérience du développeur a conduit à une convergence de leurs cas d'utilisation. Pour répondre à cela, Angular et Wiz collaborent pour apporter le meilleur des deux mondes. Angular adopte des fonctionnalités de Wiz, telles que le chargement de code fin et la délégation d'événements, pour améliorer les performances. Inversement, Wiz a adopté la bibliothèque de signaux d'Angular, ce qui a entraîné des améliorations significatives des performances en éliminant la nécessité de la mémorisation manuelle du code. L'objectif à long terme est de fusionner progressivement Angular et Wiz, en mettant à disposition les fonctionnalités de Wiz via Angular tout en encourageant les contributions de la communauté via le processus de RFC. Le partenariat vise à améliorer le framework Angular et à promouvoir l'adoption du rendu côté serveur pour une expérience utilisateur finale améliorée. En combinant les forces de ces deux frameworks, Angular et Wiz aspirent à révolutionner les performances web, bénéficiant aux développeurs et aux utilisateurs finaux.

Rencontrez la nouvelle API output() d'Angular

Angular v17.3 introduit une API améliorée pour déclarer des sorties, disponible en tant que version préliminaire pour les développeurs. La nouvelle API simplifie le processus de déclaration des sorties dans les directives et s'aligne sur d'autres API basées sur des fonctions comme les entrées de signal. Elle fournit également des types plus précis pour émettre des valeurs, améliorant ainsi la sécurité des types et réduisant le risque d'erreurs de runtime subtiles. Les développeurs peuvent déclarer des sorties en utilisant la fonction output(), qui initialise un champ de classe et permet d'émettre des valeurs en invoquant la fonction .emit. Pour les sorties basées sur des flux observables, la fonction outputFromObservable() peut être utilisée. La nouvelle API n'est pas un signal mais une amélioration ergonomique qui réduit le code boilerplate. Elle présente une suppression automatique des sorties lors de la destruction de la directive et une sécurité des types améliorée pour les valeurs émises. Toutes les sorties implémentent l'interface OutputRef, fournissant une manière cohérente pour les développeurs d'écouter les sorties de manière programmatique. Le package d'interopérabilité RxJS inclut la fonction outputToObservable pour écouter les sorties de manière idiomatique RxJS. La nouvelle API de sortie est disponible en version préliminaire pour les développeurs et Angular encourage les commentaires de la communauté. Les développeurs peuvent essayer les nouvelles API en installant la dernière version d'Angular avec ng update. L'API de sortie améliorée dans Angular v17.3 offre plusieurs avantages, notamment une alignement conceptuel avec d'autres API basées sur des fonctions, une syntaxe simplifiée, une suppression automatique, une sécurité des types améliorée et une écoute programmatique cohérente. Les développeurs sont encouragés à fournir des commentaires sur les nouvelles API de sortie via des commentaires, des discussions GitHub ou d'autres canaux. Les commentaires seront utilisés pour affiner et stabiliser davantage les API.

Angular avec NativeScript : Création de la console d'éclairage Blackout

Les consoles d'éclairage sont des appareils électroniques utilisés dans la conception d'éclairage théâtral pour contrôler les lumières de scène. L'équipe de nstudio a développé Blackout, une application iPad qui offre les mêmes fonctionnalités que les consoles autonomes. L'application prend en charge les protocoles de contrôle DMX et le contrôle Bluetooth via les puces LumenRadio TimoTwo. Blackout maintient un taux de transmission de données constant vers les lumières connectées tout en offrant une interface utilisateur fluide avec des indicateurs de données en temps réel et des contrôles de projecteur détaillés. Elle utilise Angular 17+ et NativeScript 8+ pour le développement, combinant l'injection de dépendances, la mise en page et la gestion d'état d'Angular avec les vues optimisées pour la plateforme et l'intégration de CoreMIDI d'iOS de NativeScript. L'architecture de composants déclaratifs d'Angular, les directives et la gestion d'état via NgRx ont aidé à créer des fonctionnalités d'interface utilisateur sophistiquées, telles que le mode d'apprentissage MIDI et la directive nsIf, qui améliore les performances en détachant les vues de la détection des changements jusqu'à ce qu'elles soient nécessaires. En associant Angular à NativeScript, l'équipe a pu styliser les vues UIKit avec Tailwind CSS et utiliser des API et des techniques spécifiques à la plateforme. NgRx a joué un rôle crucial pour garantir une couche d'état solide pour gérer le flux de données et minimiser les calculs inutiles, tandis que NativeScript a permis l'utilisation de moteurs de rendu optimisés pour la plateforme pour des performances idéales et un comportement naturel de l'appareil.

Entrées de signal disponibles en version préliminaire pour les développeurs

Angular 17.1 introduit les entrées de signal, une alternative réactive aux entrées basées sur des décorateurs @Input(). Les entrées de signal améliorent la qualité du code et la productivité grâce à une sécurité de type accrue, permettant une intégration plus facile avec les signaux Angular. Les entrées de signal permettent aux développeurs de répondre efficacement aux changements d'entrée en utilisant des signaux, en prenant en charge les entrées facultatives et obligatoires. Par rapport à @Input(), les entrées de signal marquent automatiquement les composants OnPush comme sales, améliorant l'expérience utilisateur et ouvrant la voie à Zoneless. Les entrées de signal exploitent la puissance des signaux, permettant un suivi efficace des changements et une dérivation de valeurs tout en notifiant Angular pour un re-rendu nécessaire. Les cas d'utilisation potentiels incluent la déclaration et le rendu, la surveillance des changements, la dérivation de valeurs et les transformations de valeurs. Les entrées de signal prennent en charge les transformations et les alias, offrant une flexibilité dans la gestion des valeurs brutes et la satisfaction de besoins spécifiques. L'équipe Angular recommande d'utiliser les entrées de signal une fois qu'elles seront promues au statut de production dans une version à venir. Les développeurs sont encouragés à fournir des commentaires sur les entrées de signal en version de prévisualisation pour les développeurs. La notation abrégée pour input() peut causer de la confusion en raison de l'utilisation implicite de undefined comme valeur initiale. Les entrées sont désormais en lecture seule, ce qui peut affecter les applications qui comptaient sur la mise à jour des entrées à partir du composant.

Angular v17.2 est désormais disponible

Angular v17.2 introduit un support expérimental pour Material 3, un système de design rafraîchi basé sur la dernière spécification Material Design pour le Web. Cette version inclut également des API de prévisualisation pour les requêtes de signal et les entrées de modèle, améliorant la réactivité et offrant une sécurité de type pour les requêtes de vue. Pour améliorer les performances, les outils de développement Angular (DevTools) prennent désormais en charge le débogage de l'hydratation, tandis que la directive NgOptimizedImage propose des espaces réservés automatiques et une intégration avec le chargeur d'images Netlify. L'interface de commande Angular (CLI) gagne le support du gestionnaire de paquets Bun, le contrôle du pré-emballage Vite et la capacité de configurer PostCSS de manière personnalisée. De plus, l'équipe Angular exprime sa gratitude envers la communauté pour les retours qui ont contribué à la formation de ces API modernes. La prochaine version majeure, Angular v18, est prévue pour mai.