Angular User Interface Projects

As it stands right now any time a control is interacted with angular kicks off a change detection pass that causes it to evaluate code that we know is static after it has been initialized. To prevent this from happening we are going to create several angular pipes. The reason this will help is that if the input to a pipe does not change then angular knows the output will not change and instead of evaluating the code again a cached version of the output is used instead.

By the time we are done with this article we will have created the example components for the rest of our controls. We will also have registered them and provided access to them through an update to our navigation. The navigation update will also include us make use of the iteration capability of pug to create our anchors in a much more DRY fashion. We will also create a feature module that will make importing our form components into an angular module much easier.

By the time we are done with this article we will have created a base class, a pug mixin, and a scss mixin that will make it very easy for us to add example components for each of our controls. We will also have used these tools to create an additional example component for our checkbox control.

In the previous article we created a radio button group which is pretty useless without having any radio button components to go with it. By the end of this article we will have a working radio button group that contains radio buttons which behave the way we expect them to and the radio button group's form control will contain the value for whichever radio button the user has selected.

In this article we will create a radio group control. For our radio group we will be taking a hands on approach to creating and inserting radio buttons into the DOM. To be able to do this by the end of the article we will have access to the location that we will insert our radio buttons.

By the time we are done with this article we will have created a select form control that we can add to our toolbox. In the process we will also have created a new base class that will make it a little bit easier to create our radio group control latter on. And we will finish with a couple of little styling adjustments so that my OCD will relax a little bit.

This article will be short one, since we have done a lot of the work in the last article, to create and add a checkbox control to our basic example.

In this article we will be adding a new control to our library namely a textarea control. We will make the job of adding new controls infinitely easier by making use of the mixin capabilities of both pug and scss.

In this article we will set up syntax highlighting for our code snippets.

In this article we will layout the left hand side of our interface as well as provide some styling. The format and layout that we are using will be used multiple times so to make it easier to implement for other examples we will create a snippets manager that we can reuse latter on.

In this article we will begin starting to style our application so that it is easier to use. We will also provide access to the data contained within our form group and display it to the user. In the process of doing this we will start using css grid and rxjs.

When we are finished with this article we will have gain access to the controls that are contained with our form group component's template. We will also have added the input contained within our controls to the angular form group that is contained within our form group component.

In this article we will get our form group up and running as well as our first control. We will also add several index files to make importing all of our components easier and a core file to contain all elements that will need access to in every file.

By the time we are done with this article we will have included the necessary packages for us to get up and running creating an angular application. We will also have created a razor page that will act as the starting point for our angular forms single page application. We will also have created the component that will contain the router outlet for the application and our first child component.