Unlock the Full Potential of Angular v16 with FIYU

Imagine having access to a complete set of tools that streamline your development workflow and empower you to build high-quality applications effortlessly. FIYU is a full-code RAD platform that provides clients with an all-round infrastructure for product development that comes with ready-made modules and solutions. From a front-end viewpoint, FIYU software is developed using Angular, which is a highly influential and widely  adopted framework built on the popular JavaScript programming language.

Angular has undergone significant advancements, making it an ideal choice for building modern and scalable web applications. FIYU takes full advantage of Angular’s newest features to provide a seamless and exceptional user experience. From enhanced performance and improved loading speeds to dynamic and interactive user interfaces, FIYU harnesses the power of Angular to create software that sets new standards in the industry.

Why is it important to stay up to date with the latest framework versions?

Updating software regularly with the latest versions typically results in easier software maintenance in the future. By upgrading to the latest versions, developers can reduce technical debt and take advantage of bug fixes, performance improvements, and new features introduced in each update. This proactive approach ensures that software remains up-to-date, compatible with evolving technologies, and easy to modify or upgrade when needed. Regular updates not only improve the overall stability and efficiency of the software, but also contribute to its long-term maintainability, making future maintenance tasks more manageable.

Staying up to date with the latest versions and changes in Angular is important and crucial for developers. It means keeping abreast of the latest advancements and improvements in the framework, which directly impacts their development process and the quality of their applications.

Keeping track of the latest versions ensures security. Updates often include patches for known vulnerabilities and bug fixes, providing a safer environment for developers and their applications. By staying informed, developers can safeguard their applications and maintain a secure environment for their users. Developers can optimize their code and deliver a better user experience by implementing the latest features and optimizations introduced in each new release.

Unleashing the Power of Angular v16

At FIYU, we believe that keeping up with the latest trends is essential in the fast-paced world of software development. Let’s explore the newest features and updates introduced in Angular v16 that FIYU has skillfully implemented.

Signals

Angular 16 has introduced the rising star of the new version: signals. Signals are “wrappers” around a value that can alert interested users whenever that value changes. These signals can hold any type of value, ranging from basic elements to more complex data structures. Signals allow our code to communicate with our templates and other code, informing them when  data changes occur. This makes Angular’s change detection faster and improves overall performance. Signals, like Behaviour Subject, must have an initial value. Signals are synchronous and able to return a value at all times. Usually, signals are read-only, allowing us to access and change the current value. Yet, Angular gives us a way to modify the value using built-in methods:

set // setting a new value, replacing the existing one

update // setting a new value created from the current one

mutate // mutating current value

asReadOnly // creates a new signal and holds the same value as the original signal, but does not allow it to be modified

Let’s create an example of how to use signals in your app. We will create a list of students with the ability to check whether the user has passed the exam. If he/she has passed the exam, the list of students who passed the exam and the total number of students who passed the exam will be displayed.

image

Computed signals

In this example, we have used the computed signal – totalStudentsPassedExam. It is not a writable signal, its value depends on the writable signal – passedExam, it can be updated, set or mutated. If you try to set value of totalStudentsPassedExam, the compiler will throw an error.

Effects

Signal’s role is to notify interested users when a certain value changes. An effect, on the other hand, is an operation that triggers whenever one or more signal values change. It is executed asynchronously.

Required Inputs

One of the most wanted features from Angular developers over the years has been the possibility to declare Input() as required value. Ensuring that your components receive the necessary input data eliminates the possibility of reaching an error by not setting the input value. It is beneficial and practical feature focused on raising the level of code quality to a higher standard. If the required value is not provided, the compiler will throw an error, thus improving the code quality as well as the developer experience.

The usage is simple, we enable the required property in the Input() decorator or set the  input as required in the @Component() decorator.

image 1

Router data as component inputs

With this feature, Angular simplifies the process by automatically binding router query parameters to component inputs, making it effortless to handle URL-based parameters.

Using @Input() to pass data from parent to child was the only functionality of this decorator until now.  With Angular v16, we can bind route data — resolvers and data properties, path parameters and query parameters to the appropriate component inputs. Injecting the ActivatedRoute service to get the route parameters could be an outdated methodology.

image 2

To do this, use the withComponentInputBinding feature with provideRouter or enable the flag bindToComponentInputs in RouterModule.forRoot([]).

In FIYU, we used withComponentInputBinding(). In order to maintain a clean and organized codebase, we have consolidated all the providers into a single constant that we later just import into the  main.ts file.

image 3

image 4

Standalone Project with no NgModules

Angular 14 started supporting standalone components, which are independent of modules (C. Dulanga, 2023). Before it was “the future without NgModules” and now it’s reality.

Standalone components, directives and pipes aim to simplify the authoring experience by minimizing reliance on NgModules. Setting the standalone flag to true in their respective decorators eliminates the need for a declaration within an NgModule. This eliminates the need for a declaration within an NgModule, as the Angular compiler will promptly notify any attempt to do so. By utilizing imports, developers can incorporate dependencies, even if they are not explicitly marked as standalone. This provides the freedom to employ existing NgModules by importing them directly into standalone components, bypassing the necessity of managing template dependencies through NgModules. All components in FIYU are standalone.

Angular 16 took it a step further with the introduction of standalone project creation.

By executing the command ng new with the –standalone flag, the Angular CLI generates a project devoid of NgModules. The absence of NgModules in standalone projects eliminates the need for extensive module configurations and declarations.

If you want to upgrade their project to a standalone project, you should follow the  Angular documentation link with detailed instructions.

With this approach, you can focus on writing clean, modular code without the overhead of module management.

DestroyRef

DestroyRef is a new type that encapsulates the ngOnDestroy lifecycle hook and provides a reference to it. You can inject DestroyRef anywhere within the injection context, not just limited to component contexts. This means you can register the onDestroy hook, with DestroyRef, for components, directives, services, and pipes alike, regardless of their location within the application.

The DestroyRef provider is designed to facilitate cleanup tasks that should be performed before a scope is destroyed. This provider plays an important role in preventing memory leaks which, as we know, can affect application performance.

How to use it:

image 5

In FIYU, we use the takeUntilDestroyed() operator that relies on DestroyRef to unsubsribe from Observables:

image 6

Conclusion

In conclusion, leveraging the latest features of Angular in Software-as-a-Service (SaaS) applications is a game changer for modern businesses. By adopting features from the latest release like signals, required inputs, router data binding and more, SaaS providers can deliver better user experiences, higher application performance and benefits in the developer experience. It ensures staying ahead of the competition, highlighting the importance of growth, and staying up to date with new versions and shaping the future of SaaS in a rapidly evolving digital landscape.

FIYU offers unmatched performance, real-time updates, modular architecture, and cross-platform compatibility. With its focus on efficiency, cost-effectiveness, rapid deployment, and seamless integration, FIYU is the ultimate solution for businesses looking to take their digital operations to the next level.

References: https://angular.io/guide/signals

cross