Migrating from Desktop to Web: A WPF to Angular Tutorial

    WPF to Angular tutorial is the first step that you should take in order to make a smooth transition from a desktop to web framework transition. The tutorial targets WPF developers, who make their first steps to web development and it examines some differences and similarities of both frameworks - applications structure, data binding, events, components, etc.

    The guide is divided into the following topics and has included video tutorials:

    Create your first Angular application

    Before you begin on your path of learning Angular, you’ll need to install the prerequisites for modern web app dev with Angular. This section covers using the Node.js package manager, installing the Visual Studio Code IDE, and a few of the basic concepts that are necessary for modern web development. Check out the video tutorial for this topic.

    Create your UI with Angular components

    Creating a UI in Angular is very similar to how we would create one in WPF. We normally use user controls, represented by the UserControl class. A UserControl groups markup and code into a reusable container, allowing the same interface and functionality to be used in several different places. Understanding components in Angular is key to the rest of this series – so let’s get started by understanding how WPF components translate to components in Angular. Check out the video tutorial for this topic.

    One-way data binding in Angular

    One of the most powerful and widely used features in WPF is data binding. It makes a developers' life much easier, by synchronizing the business logic with the view and vice versa, without having to write a single extra line of code. Without the power of it, WPF would just be a better-looking Windows Forms. Luckily, Angular supports data binding! There are two types of data binding - one-way binding and two-way binding. This section shows you how to accomplish one-way data binding and how it compares to WPF. Check out the video tutorial for this topic.

    Angular Events

    Binding to user input events is core to every app. It’s hard to imagine writing a new app that doesn’t respond to some type of user interaction one way or another. The most common way to do that is with some type of event system. WPF provides routed events, CLR events, and commands. While in Angular, there are DOM events. This section you’ll learn about DOM events and how to handle user inputs. Check out the video tutorial for this topic.

    Two-way data binding in Angular

    In Angular, one-way binding updates the view with data coming from the component class. Like WPF, we can do the opposite operation - update the component class from the view. In that case we need to use a two-way binding. This section compares two-way binding in WPF and shows how easy it is to get started. Check out the video tutorial for this topic.

    Transforming Data with Angular Pipes

    In WPF we use a IValueConverter to transform data, in an Angular application, we use Angular Pipes. The pipe is very similar to the WPF converter. It takes data as an input and then transforms that data into a desired output for display. This section shows some of the pre-defined Angular Pipes, and how to use them in an app. Check out the video tutorial for this topic.

    Structural Directives in Angular

    As WPF developers, anytime we want to add or remove an element from the visual tree we have to jump into some code-behind and write some C# or we can use a combination of binding and a visibility converter, which again requires some custom logic and static resources. That's the way we have always done it in WPF, but Angular makes it so much easier. This section demonstrates how structural directives enable the manipulation of elements in an Angular app. Check out the video tutorial for this topic.

    Layout Elements

    In WPF, in order to layout the elements in your application, you need to put them inside a Panel. In Angular, we use CSS. This topic discusses Layout, and how to use CSS features like Flexbox and CSS Grid.

    Our community is active and always welcoming to new ideas.