Typolino – Registration

Let’s apply the same pattern to style the registration form. I don’t really like to have so many options at once – the UI feels overloaded. But also being a technical demonstration of what we built so far I’d like to keep all the options. Why not have a default one and let the user show more only if requested? Let’s keep the whole page as simple as possible.

PrimeNg

I have added PrimeNg quite early. The reason is that I really think this is a quite complete widget set. It proved very helpful so far and it has a nice password component that I’d like to use to indicate the passoword strength.

<!-- Password-->
<div class="ui-g ui-fluid">
  <div class="ui-g-12">
    <input
      [(ngModel)]="password"
      type="password"
      pPassword 
      placeholder="Passwort"
    />
  </div>
</div>

Code

I’ll publish the complete code at end to Github and only focus on some interesting aspects on the blog.