Monday, 26 September 2016

Building A Notepad with Dart Angular 2 : Part Three

Continuing on with my personal 'Learn Angular 2' project... Here's some details of what made it into v0.03.

Change of plan - we are going to look at pipes! Pipes are the renamed 'Filters' from Angular 1. They work in pretty much the same way. A last modified DateTime object is now stored part of the TextDocument class. Let's add it onto the status component.

Let's use the built-in filters to show the full date in upper case:

Last modified: {{modified |  date:'fullDate' | uppercase}}

Notice the * before ngIf. This is critical for ng2 to identify the target element. If omitted, you will get an error as Angular will search for a template.

Angular 2 is keen to mark attributes more clearly on components. For the updated status bar the square brackets denote an input. Round brackets are for outputs and both types denote 2 way binding as on the TextArea.

    HTML
    text-status [text]="note.text" [modified]="note.lastModified"

    CODE
    @Input('modified')
    DateTime modified;

Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.