harre.dev

Angular

Angular (5) and aspnet core (2) quickstart

Here is a get-up-and-go style post to get going with the angular CLI and aspnet core. Before we begin, there is a template you can use to set (most, if not more) of this up, but it’s good to know what is going on behind the curtains.

First things first.

You need some tools installed to get the base project set up.

  1. dotnet core SDK
  2. Node
  3. angular-cli which we’ll install using NPM.

Open a command prompt and run the following command:

Date validation in AngularJS

Another angular post! This time we take a look at how to create a directive that ensures the user enters a valid date (and/or time).

Let’s start with some boilerplate stuff first. I’m going to assume that you have something working Angular already, we will only cover the date validation directive in this post. Here is some HTML.

<div ng-app="validDateApp">
    <div ng-form="myForm" ng-controller="testController">
        <input ng-model="myDate" my-valid-date name="myDateInput" type="text" />
    </div>
</div>

And it’s Angular app to go with it:

Simple dialogs with AngularJS and TypeScript

While working an Angular (1) web app I ran into the age-old problem of showing the user notifications when certain conditions are met. Show them a little pop-up, in simple terms.

So what does it take to show a popup? We know the dialog element exists but cannot be used in this case due to browser requirements. The easiest way I could think of is adding a fixed positioned div the the user on top of all other content. Add some CSS in there to make it look nice and we have dialogs.