In Angular we have input properties

@Input()
myInputProperty: string;

and event emitters

myInputPropertyChange = new EventEmitter<string>();

We can use these to bind to in the template

<my-component [myInputProperty]="propertyToBindTo (myInputPropertyChange)="propertyToBindTo = $event"></my-component>

Because of the way this input property and event emitter combination are named where the event emitter has the same name as the input property with the suffix Change we can do the above binding with the short hand version called two way binding.

<my-component [(myInputProperty)]="propertyToBindTo"></my-component>

In the above banana box syntax [()], it looks a banana in a box, the compiler looks for an input property with the…


When we are building a forms based application we often need to validate form fields in relation to other fields. If we have a simple form with two dates, start date and end date that looks like the following

<form>
<label>Start date:
<input type="date" name="startDate" [(ngModel)]="startDate" required>
</label>
<br>
<label>End date:
<input #endDateInput="ngModel" type="date" name="endDate" [(ngModel)]="endDate" required>
</label>
</form>

Our form will not be valid until both fields have been filled in as they have been marked as required. But what if we want to make the form invalid if the end date is not after the the start date?


To subscribe or not to subscribe, that is the question.

In this follow up to part 1 I will discuss the difference between the Observable properties and direct access properties to the data stored in an RxCache item. If you haven't read part 1 then you should catch up on it first as I will skip over what we covered in that article. Click here to read part 1.

An RxCache item has multiple properties that gives us information about the state stored in it, value$, clone$, loading$, loaded$, saving$, saved$, deleting$, deleted$, hasError$ and error$. These observables can be…


Angular state management with RxCache

What is RxCache?

RxCache is a light weight state management library for Angular built on RxJs behaviour subjects. It is used to implement a single source of truth application state with barley any boilerplate code. It is designed to help you write efficient, easy to maintain and testable services.

The source code for RxCache can be viewed on GitHub at https://github.com/adriandavidbrand/ngx-rxcache and there are a few demo applications on StackBlitz.

StackBlitz testbed: https://stackblitz.com/edit/angular-3yqpfe

The official ngrx demo app redone in RxCache: https://stackblitz.com/edit/github-tsrf1f

The subject of this article is a CRUD demo app of a simple…

Adrian Brand

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store