Une autre API Signal partagée aujourd’hui dans l’aperçu du développeur concerne les entrées de modèle. Les entrées de signal, publiées dans la version 17.1, sont en lecture seule pour promouvoir les meilleures pratiques de développement. Pour faciliter le partage d’état entre un composant parent et un composant enfant nécessitant des signaux inscriptibles, les entrées du modèle comblent cette lacune :
Ce schéma nous permet d’avoir une liaison bidirectionnelle avec les signaux. Vous pouvez en savoir plus sur les entrées de modèle sur angular.io.
Des performances simplifiées
Avec l’évolution de l’expérience des développeurs, le deuxième pilier d’Angular au cours des dernières années a été la performance. L’année dernière, l’hydratation non destructive a été introduite, et des améliorations continues ont été apportées à la directive d’image pour prévenir les écueils lors du chargement des images.
Aujourd’hui, deux nouvelles améliorations significatives sont présentées.
Prise en charge du débogage d'hydratation dans Angular DevTools
Déboguer les erreurs de non-concordance du DOM d’hydratation peut s’avérer complexe, surtout lorsque les données diffèrent entre le client et le serveur, ou lors de manipulations manuelles du DOM.
Une contribution de la communauté, de Matthieu Riegler, a introduit la prise en charge du débogage d’hydratation dans Angular DevTools, facilitant ainsi la résolution de ce problème.
Dans l’image ci-dessus, vous pouvez observer comment Angular DevTools révèle les divergences entre le DOM du navigateur et le HTML généré par le serveur.
La mise à jour d’Angular DevTools sera automatiquement déployée dans les prochains jours.
Chargeur d'images pour Netlify
La directive NgOptimizedImage intègre des fonctionnalités de performances puissantes pour vos images, telles que l’extension automatique des fichiers srcset. De plus, elle vous permet de spécifier un chargeur d’images.
À compter de la version 17.2, vous avez désormais la possibilité d’utiliser provideNetlifyLoader pour appliquer cette optimisation spécifiquement avec Netlify ! Pour en savoir davantage, consultez la documentation sur le chargeur et la directive image.
Espaces réservés automatiques avec NgOptimizedImage
Lorsque vous utilisez la directive NgOptimizedImage pour vos images, vous avez désormais la possibilité d’ajouter facilement un espace réservé flou pendant le chargement de l’image. Il vous suffit d’ajouter l’attribut placeholder à votre image, et la directive image demandera automatiquement une petite version de l’image, l’estompera et l’affichera jusqu’à ce que l’image complète soit prête.
Vous n’utilisez pas de chargeur d’images ? La nouvelle fonctionnalité d’espace réservé prend également en charge les espaces réservés d’image base64 intégrés. Ainsi, elle peut être utilisée dans n’importe quelle application !
