DEV Community: Anto Ani

What’s New in Angular 17 and for Syncfusion Angular Components

Anto Ani — Tue, 27 Feb 2024 11:32:10 +0000

Angular 17 is brimming with innovative features that are set to redefine coding experiences and make a significant impact on the Angular community. In this blog, we’ll dive deep into the heart of Angular v17, exploring its robust features and how Syncfusion’s Angular components work with them.

Key features
Angular 17 introduces a plethora of key enhancements.

Angular learning is reimagined with Angular.dev
With Angular 17, developers can now access an updated documentation platform hosted on Angular.dev. This update brings a fresh structure, revised guidelines, enriched content, and an interactive Angular playground. Features such as directive composition, hydration, standalone components, and signal-based reactivity have been significantly improved.

Simplified built-in control flow
Angular 17 introduces a new block template syntax, enhancing the developer experience by offering powerful features through simple, declarative APIs. Managed by the Angular compiler, this updated syntax streamlines control flow and lazy loading, improving overall efficiency.

Insights from in-depth user studies revealed common stumbling blocks with *ngIf, *ngSwitch, and *ngFor that many developers, including seasoned ones, encountered. These insights led to the introduction of this change.

The benefits of this built-in control flow are manifold:

Streamlined syntax: The more intuitive syntax, resembling JavaScript, reduces the need for extensive documentation lookups.
Improved type checking: More precise type narrowing is achieved through improved type checking.
Efficiency at build-time: Being primarily a build-time concept, it reduces the runtime footprint and potentially shrinks the bundle size by up to 30 kilobytes, benefiting Core Web Vitals scores.
Automatic integration: It integrates automatically into templates without requiring additional imports.
Performance enhancements: Significant performance enhancements are achieved.
Simplified conditional statements
The if and else directives offer a fresh approach to handling conditional logic in your templates. These directives provide a more concise and declarative method for rendering different sections of your template based on specific conditions. This is a significant improvement over the traditional *ngIf and *ngElse directives, as well as [ngSwitch].

Example
When we use Syncfusion Angular Tabs. Each tab corresponds to a different social media platform: Twitter, Facebook, and WhatsApp. The content of these tabs dynamically changes based on the socialMedia value.

When socialMedia matches one of these platforms, the corresponding tab displays content related to that platform. However, if socialMedia doesn’t match any of these platforms, a message stating, “No tabs to display,” will be shown. This example illustrates the power and flexibility of the new if and else directives in Angular v17.

Performance surge with the familiar for syntax
Angular 17 introduces a new, built-in for loop, which brings about substantial performance enhancements compared to the traditional *ngFor directives. Benchmarks reveal a runtime improvement of up to 90%, leading to a noticeable speed boost in your apps.

Additionally, the empty block offers a neat solution for handling scenarios with empty collections, further simplifying your coding process.

Let’s illustrate this with an example. We’ll use for in the Syncfusion Angular Data Grid data source.

Here are some key advantages of the for syntax:

Familiar syntax: You can write loops like JavaScript, making it easier to understand and maintain your code.
Explicit tracking: The track expression ensures efficient DOM manipulation, especially for dynamic datasets.
Empty list handling: The empty block provides a clean way to handle scenarios with empty collections.
Deferrable views
Angular 17 introduces a concept known as deferrable views or defer blocks. This innovative design paves the way for future enhancements in performance and efficiency by enabling the dynamic loading of components.

Unlike the traditional, router-based lazy loading, defer embeds the loading logic directly within your templates. This streamlined approach simplifies component loading management and optimizes your app’s performance.

Let’s illustrate this with an example. We’ve used the Syncfusion Angular Data Grid component within the @defer block. The rendering of the grid component is deliberately delayed for three seconds. This delay displays an initial “Waiting…” message, optimizing the first-page load. Once loaded, the grid dynamically displays its columns based on the provided data source. A “Something went wrong” notification appears if any errors occur during the process.

@defer (on timer(3000)) {

@for (column of getGridColumns(data[0]); track column){

}

}
@placeholder {

Waiting for 3 seconds to load Grid with data
}
@error {
Something went wrong
}
Revamped hybrid rendering experience
Angular 17 brings a revitalized hybrid rendering experience, offering robust server-side rendering (SSR) and static site generation (SSG) support. This support is accessible through command-line prompts and flags, simplifying the process for developers.

You can run the following command to enable SSR in your new Angular project. This command will automatically include the necessary dependencies and configuration for server-side rendering.

ng new my-app --ssr
This enhancement in Angular 17 improves your apps’ performance and overall user experience by enabling faster initial page loads and improved SEO.

New @angular/ssr package
Angular 17 brings a significant shift in the ecosystem by introducing the new @angular/ssr package. The Angular Universal repositories have now been integrated into Angular, making it easier than ever to update your existing Angular CLI to support hybrid rendering (SSR).

Moreover, while Angular version 16 introduced hydration in the developer preview, version 17 has made it the default for all server-side rendering. This enhancement paves the way for more efficient and dynamic web apps.

Vite and esbuild as the default for new projects
Vite and esbuild became the standard build tools for new projects in Angular v17. This shift prioritizes simplifying developers’ workflows and enhancing app performance.

Benefits:
A 67% improvement in build time.
An 87% speed improvement with SSR and SSG.
A lightweight and efficient build process.
Note: For more details, refer to the new esbuild system.

Default standalone components
With v17, Angular has made standalone components, directives, and pipes the default format. This means all components generated via ng generate will be created as standalone components by default, streamlining the development process.

Moreover, you can leverage the schematic to automate the conversion of your existing app into the standalone format.

Run the following command.

ng generate @angular/core:standalone
This command transforms your existing components into standalone ones, enhancing modularity and maintainability.

Roadmap: signal-based reactivity
Looking ahead, Angular v18 promises to introduce exciting new features beyond its signal-based components. These enhancements will deliver predictable performance, cleaner code, and an improved developer experience.

As announced by the Angular team, signals are graduating from the developer preview stage. This advancement indicates that we can anticipate the arrival of features like signal-based inputs, and view queries in the coming months.

Other features
Dive into the detailed debugging of dependency injection directly within DevTools, effectively utilize input value transformations, and enjoy the convenience of string-based styles and styleUrls. Enhance your skills with dedicated Angular developer training. Angular 17 offers improved development workflows, increased flexibility, and enhanced control, catering to a diverse audience.

Syncfusion Angular components now support Angular 17—Time to upgrade!
Exciting news for Syncfusion Angular users! Starting from version 23.2.4, Syncfusion Angular components are fully compatible with Angular 17. It’s the perfect time to upgrade your Syncfusion Angular packages to maximize this compatibility.

Why should you upgrade?
Upgrading ensures seamless compatibility and optimal performance with the latest Angular 17 features. Keep your Syncfusion Angular components up to date to leverage the newest enhancements, fixes, and features.

How to upgrade?
For step-by-step guidance on upgrading Syncfusion Angular packages, visit the Getting Started page in the Angular documentation. This resource provides straightforward instructions to help you kickstart your project on the latest Angular 17 version.

Don’t miss out on the enhanced capabilities and improved performance —upgrade your Syncfusion Angular components today!

Conclusion
Thanks for reading! In this blog, we’ve seen the new features of Angular version 17 and Syncfusion’s Angular component’s compatibility with this latest update. As we conclude, we trust that you’re departing with a renewed enthusiasm for Angular development!

Blazor Synchronized Charts: The Perfect Tool for Trade Analysis

Anto Ani — Thu, 08 Feb 2024 06:59:40 +0000

Syncfusion Blazor Charts component offers a wide range of functionalities, including data binding, over 50 chart types, animation, tooltip, zooming and panning, crosshair, selection, and highlighting.

With the 2023 volume 4 release, Blazor Charts component now supports a synchronization feature.

Synchronized Charts: An overview
A synchronized chart provides access and interaction with two or more charts at the same time. This means that actions performed on one chart, such as positioning a cursor, clicking on a specific point, or activating a tooltip, are reflected simultaneously on corresponding positions or data points across other synchronized charts based on their x- and y- coordinates.

Synchronized charts prove invaluable when navigating multiple datasets or diverse information simultaneously. By linking data across several graphs or charts, they empower users to effortlessly discern connections, identify trends, and recognize crucial patterns.

In this blog, we’ll explore the user-friendly features of the new Blazor Synchronized Chart and its uses!

Uses of Synchronized Charts
The use cases of Synchronized Charts include:

Correlation analysis:** Revealing interconnected relationships within data.
Holistic view: Enabling comprehensive understanding by combining multiple perspectives.
Real-time analysis: **Empowering instantaneous insights into evolving trends.
**Comparative analysis: Facilitating side-by-side comparisons for insightful observations.
Improved decision-making: Empowering informed and strategic choices.
Enhanced user experience: Elevating the accessibility and usability of data.
Analyzing trade data using Blazor Synchronized Charts
When traders delve into a market, synchronized charts emerge as their closest allies. These charts enable traders to survey distinct facets of market data concurrently. This capability aids in making astute decisions while comprehending the comprehensive landscape of market dynamics.

In the following sections, we’ll see how easy it is to implement synchronization for different interactive chart features.

Synchronizing chart elements
Let’s seamlessly analyze stock market data by configuring the following elements using the Blazor Synchronized Chart:

Tooltip
Crosshair
Zooming
Selection Tooltip synchronization You can easily synchronize tooltips across multiple charts. This will enhance the user experience and comprehension of interconnected data. The process involves utilizing two essential methods: ShowTooltip and HideTooltip.

The ShowTooltip method allows the display of pertinent information across various charts when a user hovers over a data point in a chart. In synchronized charts, this functionality enables simultaneous showcasing of related data.

To implement the ShowTooltip method for a chart, specify the following parameters:

x: Represents the x-value of the point or its x-coordinate value.
y: Represents the y-value of the point or its y-coordinate value.
Refer to the following code example.

@code {
SfChart? _chart1;
SfChart? _chart2;

public CurrencyRates[] ChartPoints { get; set; } = new CurrencyRates[] { };

protected override async Task OnInitializedAsync()
{
    ChartPoints = await Http.GetFromJsonAsync<CurrencyRates[]>(NavigationManager.BaseUri + "synchronized-data.json");
}

public class CurrencyRates
{
    public DateTime USD { get; set; }
    public double EUR { get; set; }
    public double JPY { get; set; }
    public double SGD { get; set; }
    public double INR { get; set; }
}       

public void OnMouseEventChart1(ChartMouseEventArgs args)
{
    _chart2.ShowTooltip(args.MouseX, args.MouseY, false);
}
public void OnMouseEventChart2(ChartMouseEventArgs args)
{
    _chart1.ShowTooltip(args.MouseX, args.MouseY, false);
}

public void OnMouseLeaveChart1()
{
    _chart2.HideTooltip();
}
public void OnMouseLeaveChart2()
{
    _chart1.HideTooltip();
}

public void OnMouseLeaveChart1(ChartMouseEventArgs args)
{
    _chart2.HideTooltip();
}
public void OnMouseLeaveChart2(ChartMouseEventArgs args)
{
    _chart1.HideTooltip();
}

}

Crosshair synchronization
Synchronizing crosshairs across multiple charts can significantly enhance data analysis and comparison. The ShowCrosshair and HideCrosshair methods facilitate this synchronization.

When hovering over one chart, invoking the ShowCrosshair method for other connected charts aligns their data points, streamlining the process of comparing information across the charts.

To enable the crosshair for a specific chart using the ShowCrosshair method, specify the following parameters:

x: The x-coordinate value.
y: The y-coordinate value.
Refer to the following code example.

@code {
SfChart? _chart1;
SfChart? _chart2;

public void OnMouseEventChart1(ChartMouseEventArgs args)
{
    _chart2.ShowCrosshair(args.MouseX, args.MouseY);
}
public void OnMouseEventChart2(ChartMouseEventArgs args)
{
    _chart1.ShowCrosshair(args.MouseX, args.MouseY);
}

public void OnMouseLeaveChart1()
{
    _chart2.HideCrosshair();
}
public void OnMouseLeaveChart2()
{
    _chart1.HideCrosshair();
}

public void OnMouseLeaveChart1(ChartMouseEventArgs args)
{
    _chart2.HideCrosshair();
}
public void OnMouseLeaveChart2(ChartMouseEventArgs args)
{
    _chart1.HideCrosshair();
}

}
Refer to the following output image.

Crosshair synchronization in Blazor Charts
Crosshair Synchronization in Blazor Charts
Zooming synchronization
Ensuring uniform zoom levels across multiple charts significantly enhances the visualization experience. This synchronization is accomplished by using the OnZoomEnd and OnZooming events.

Within these events, you’ll retrieve the ZoomFactor and ZoomPosition values unique to each chart and then apply these values to ensure consistency across all charts. This not only streamlines the viewing experience and maintains coherence in data analysis across various visual representations.

Refer to the following code example.

@code {
SfChart? _chart1;
SfChart? _chart2;

List toolbarItems = new List() { ToolbarItems.Pan, ToolbarItems.Reset };

public void ZoomEvent(ZoomingEventArgs args)
{
    if (args.AxisCollection != null && args.AxisCollection.Count > 0)
    {
        zoomfactor = args.AxisCollection.Find(item => item.AxisName == "PrimaryXAxis").ZoomFactor;
        zoomPosition = args.AxisCollection.Find(item => item.AxisName == "PrimaryXAxis").ZoomPosition;
        InvokeAsync(StateHasChanged);
    }
}

}
The following image shows zooming synchronized across charts.

Zooming synchronization in Blazor Charts
Zooming synchronization in Blazor Charts
Selection synchronization
You can sync up the selection of a data point across charts by using the OnSelectionChanged event. You can easily apply desired values to other charts in your app by copying and pasting the values directly from this event to the respective chart.

Refer to the following code example.

@code {
SfChart? _chart1;
SfChart? _chart2;
public int SelectedSeries = -1;
public int SelectedPoint = -1;
public void Selection(SelectionCompleteEventArgs args)
{
var selectedValues = args?.SelectedDataValues;
if (selectedValues?.Count > 0)
{
var firstSelectedValue = selectedValues[0];
var seriesIndex = firstSelectedValue.SeriesIndex ?? -1;
var pointIndex = firstSelectedValue.PointIndex ?? -1;

        if (SelectedSeries != seriesIndex || SelectedPoint != pointIndex)
        {
            SelectedSeries = seriesIndex;
            SelectedPoint = pointIndex;
            InvokeAsync(StateHasChanged);
        }
    }

}

}

References
For more details, refer to the Synchronized Charts in Blazor documentation and GitHub demos.

Conclusion
Thanks for reading! In this blog, we explored how to use the new Syncfusion Blazor Synchronized Charts for seamless trade analysis. This feature is available in our 2023 Volume 4 release. Try out this powerful tool and share your feedback in the comments section.

For a detailed overview of all the exciting updates in this release, we invite you to visit our Release Notes and What’s New pages

To our existing customers, the new version of Essential Studio is available on the License and Downloads page. If you’re new to Syncfusion, we’re offering a 30-day free trial for you to experience the wide array of features we provide.

You can also reach us through our support forum, support portal, or feedback portal. We’re always happy to assist you!