Angular 18 Tutorials - usmtechworld

ANGULAR 18 Tutorials

WELCOME TO ANGULAR 18

Angular 18 has come up with lot of new features such as Change Detection using Signals,Routes redirect function,Developer Tooling Enhancements,Signals,Deferrable Views and built in control flow,Server Side Rendering improvements,Internationalization.

1.Change Detection using Signals :-

one of the most interesting features in angular 18 is signals.The signals play a vital role in state management.Here zoneless change detection is being used. Now go to app config file and include provideexperimentalzonelesschangedetection in providers section.Next go to angular.json file and remove zone.js from polyfills array.Now restart the server.Now check whether zone library is used in browser.

                    bootstrapApplication(App, {
                    providers: [
                    provideExperimentalZonelessChangeDetection()
                    ]
                    });

2.Routes redirect function :-

The RedirectTo is now can be used as function and not just a string.For eg:- App.routes.ts

                    export const routes:Routes=[
                    {
                        path:'userprofile',
                        redirectTo:()=>{
                                        return '/user';
                                },
                            pathMatch='full'
                    }]
                    }

Reads URL information:


                                        path:'userprofile',
                    redirectTo:(urlInfo)=>{
                    console.log(urlInfo)
                    return '/user';
                    },
                    pathMatch='full'

You can see UrlInfo in the terminal.

3.Developer Tooling Enhancements:-

Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. When you open the extension, you will find 2 tabs

Components
Profiler

Components: It explores the components and directives in your application and preview or edit their state. Profiler:It profile your application and shows the performance during the change detection execution. In Angular18, SSR and hydration process are previously hidden are now visible with angular devtools updates.It provides problem identification and resolution.

4.Signals,Deferrable Views and built in control flow stabilised in Angular 18:-

The deferrable views allows components to be loaded on demand, makes application performance better.For example, you can restrict a component to be loaded on init.Instead you can load the component on demand. The other features which are used along with 'defer':-

Triggers: Define the user interactions or custom logic that initiate content loading.
Placeholders: Keep users informed with temporary placeholders while content is on its way.
Loading indicators: Provide visual cues to avoid confusion during loading processes.
Error Handling: This handles errors that might occur during the loading process. You can display error messages or fallback content.

5.Server Side Rendering improvements:-

Server side rendering requires node server to deploy the project.It is useful when your site is showing dynamic content.You can disable serverside rendering in config file using 'Prerender' option .

                    "architect": {
                    "build": {
                    "options": {
                    "server": "src/main.server.ts",
                    "prerender": false,
                    "ssr": {
                    "entry": "server.ts"
                    }
                    }

The enhancement done in server side rendering are ,

Improved prerendering
Faster server side hydration
Angular Universal improvements

6.Improved Internationalization :-

Angular 18 provides new APIs for internationalization and tooling support.This helps apps content to be viewed in their own languages. The internationalization provides users to enjoy the benefit of viewing their application on different languages