<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Gopikrishee</title>
    <description>The latest articles on DEV Community by Gopikrishee (@gopikrishee).</description>
    <link>https://dev.to/gopikrishee</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1093204%2Fd6eaf204-3466-4d12-907a-1a296a5951ad.png</url>
      <title>DEV Community: Gopikrishee</title>
      <link>https://dev.to/gopikrishee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gopikrishee"/>
    <language>en</language>
    <item>
      <title>What's new in Angular 19.2?</title>
      <dc:creator>Gopikrishee</dc:creator>
      <pubDate>Tue, 04 Mar 2025 14:24:56 +0000</pubDate>
      <link>https://dev.to/gopikrishee/whats-new-in-angular-192-51ac</link>
      <guid>https://dev.to/gopikrishee/whats-new-in-angular-192-51ac</guid>
      <description>&lt;p&gt;There are few cool features released by Angular at its 19.2 release. &lt;/p&gt;

&lt;p&gt;Let's get started knowing it one by one&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdgltopyfh9nzczpo5mox.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdgltopyfh9nzczpo5mox.jpg" alt="man showing letter" width="610" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  TypeScript 5.8 support
&lt;/h2&gt;

&lt;p&gt;TypeScript 5.8 released on Feb 13, 2025. Angular Team worked day and night for 13 days and finally made Angular to support the latest typescript release on Feb 26, 2025.  &lt;/p&gt;

&lt;h2&gt;
  
  
  Now Literals at String Interpolation
&lt;/h2&gt;

&lt;p&gt;Traditionally concatenation operator (+) is being used to include text with an embedded variable in a template.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;{{ 'Number of people who loves Angular'  + peopleCount() }}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Angular 19.2 allows template literals to make string interpolation more readable and concise. Just add your string inside (`) backtick and wrap your variable using ${}&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;br&gt;
&lt;br&gt;
&lt;/code&gt;&lt;code&gt;{{ `Number of people loves Angular ${peopleCount()}` }}&lt;/code&gt;&lt;code&gt;&lt;br&gt;
&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe8hmntb8cylleq1ze6v0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe8hmntb8cylleq1ze6v0.jpg" alt="guy selects one over other" width="500" height="500"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Experimental httpResource
&lt;/h2&gt;

&lt;p&gt;Suppose if you want to call an API service everytime when an Id value changes, what would be the traditional approach? We would inject HttpClient service and calling the function getUser manually whenever the Id changes. Isn't?&lt;/p&gt;

&lt;p&gt;`&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@Injectable(providedIn: 'root')
export class UserService {
https = inject(HttpClient);

getUser(id: number): Observable&amp;lt;Item&amp;gt; {
return this.https.get&amp;lt;Item&amp;gt;(`https://api.example.com/items/${itemid}`)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;br&gt;
`&lt;/p&gt;

&lt;p&gt;Now, by the introduction of httpResource we don't need to worry about the manual calling.&lt;/p&gt;

&lt;p&gt;`&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const userResource = httpResource&amp;lt;User&amp;gt;({
method: 'GET',
url: () =&amp;gt; https://api.example.com/items/${itemid}
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;br&gt;
`&lt;/p&gt;

&lt;p&gt;Once the {itemid} value changes, the http request automatically refreshes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb3750uc7yfo45zwit8ft.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb3750uc7yfo45zwit8ft.jpg" alt="animated boy playing with butterfly" width="556" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Other enhancements
&lt;/h2&gt;

&lt;h4&gt;
  
  
  Support Default value in resource()
&lt;/h4&gt;

&lt;p&gt;Before the resource is fully loaded, resource().value() remains in an unknown state, from 19.2 version, it is possible to specify a default value that will be used when the resource has not yet loaded.&lt;/p&gt;

&lt;p&gt;Before 19.2 version&lt;/p&gt;

&lt;p&gt;&lt;code&gt;resource().value();  // returns undefined&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;After 19.2 version&lt;/p&gt;

&lt;p&gt;&lt;code&gt;resource({defaultValue: 'hello' }).value()  //returns hello&lt;/code&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Detect missing structural directive imports
&lt;/h4&gt;

&lt;p&gt;Missing imports wouldn't trigger warning from compiler for custom structural directive, from 19.2 compiler will trigger the warning to help frustrated developers.&lt;/p&gt;

&lt;h4&gt;
  
  
  Support type set in form validators
&lt;/h4&gt;

&lt;p&gt;Set objects did not work correctly with Validators such as Validators.required, Validators.maxLength and Validators.maxLength&lt;/p&gt;

&lt;p&gt;With this update, it will work correctly.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const set = new Set([1,2,3]);&lt;br&gt;
const formControl = new FormControl(set, [Validators.maxLength(10)]);&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Angular team never disappoint us whether it is compatibility or enhancement. They understand the core of developers day to day problems and fix it on time.&lt;/p&gt;

&lt;p&gt;Angular 19.2 provides full compatibility with Typescript 5.8, interactions with templates, http requests handling, form validators and resource management.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F69tdfxksed2amil36vaj.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F69tdfxksed2amil36vaj.jpg" alt="Guy saying bye" width="620" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>angular</category>
      <category>dotnet</category>
      <category>dotnetcore</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
