Posts

The RxJs Subject

Sometimes an Observable lacks what you need to get the job done, one of those needs might be the ability to multicast to many observers, this is one of the benefits of using a Subject. A Subject is an Observable, you can do anything with a Subject that you can with an Observable, you can, of course, subscribe to it, you can create a pipe of operators, and you can unsubscribe from one. Now, where Subject differs is that it is also an Observer, that is to say you can call next, error and complete on it as well, this means you can have multiple listeners/observers subscribe to the Subject, and then you can use the next function to pass an event of your choosing to each of their observers. Interestingly the call to subscribe on a Subject is no different to that of an Observable to the Observer but internally all this does is add that observer to a list of observers that it needs to cast its emits to. From this brief description, I hope you have many ideas on how you could use a Sub
Post a Comment
Read more

JS/TS arrays - Getting a handle on the map function

In a previous post I explained the use of the filter function, it is worth a read for anyone that is reading this and does not feel comfortable with functional programming:  here we go . When we think of the word, map, at least some of us will instinctively think of a map of the world, or a map of a place (the rest probably of us probably jump to the Map data type found in most languages). This sort of map helps us navigate from a source location to a destination and this is a helpful way to think of the function map. We start off with a value (our source) and then we declare a transformation (the destination), apologies if this sounds condescending, I don't mean to be, but I often find it easier to think of concepts in these sort of ways, especially if I am unfamiliar with a term or way of thinking. I don't use the word transformation, I do this very consciously because 'transformation' hints at mutation, which is not what the map function does at all. It is
Post a Comment
Read more

JS/TS arrays - Getting a handle on the filter function

I think it is fair to say that functional programming has bounced back in a big way over the past number of years and it does not look like it is going anywhere, this holds true for Typescript as well. If I was a betting man, I would say that Typescript/Javascript is the most used language out there and whether you are mostly a back end java developer or a die-hard Angular developer I am willing to bet that if you haven't seen the filter function in action you will be thanking yourself for reading this! Those that come from a functional background will probably already have a very good idea on how this function works but let's go through some examples, hopefully, at the end of this post, you will have an appreciation for how powerful this function is. Array: filter() The filter function does exactly what it says on the box, it filters elements out of an array, let's get some examples out there: 1| const numbersArray: number[] = [1,2,3,4,5,6]; 2| const aboveF
Post a Comment
Read more

Angular material table with angular 7 - Defining columns using ngFor

Image
I am going to ramble slightly about this approach in general, below in bold will be the implementation that has best worked for me so far, so if that is why you are here then keep scrolling, scrolling, scrolling. Another point you should know before going through the trouble of implementing this, you will have to make some adjustments to your sorting behaviour, this is explained towards the end of the post, short version: it is a relatively trivial adjustment. Angular Material is something you would be hard pressed to have missed if you have been around Angular for any length of time, you'd also be equally as hard-pressed not to have used the Angular Material data table component . If you haven't come across it then no worries, have a little read to see if Angular Material is useful to you and then come back. So let's talk about the column definitions, to do that let's talk around a snippet of a template: <!-- Name Column --> < ng-container matC
3 comments
Read more

Creating contextual drop downs using RxJs, Angular 7 and Angular Material

Image
Let's start this post off with a scenario: [   {     type: "Bird",     options: [       {species: "Hawk"},       {species: "Eagle"},       {species: "Crow"}       ]     },   {     type: "Reptile",     options: [       {species: "Snake"},       {species: "Crocodile"},       {species: "Gecko"}       ]   },   {     type: "Mammal",     options: [       {species: "Human"},       {species: "Monkey"},       {species: "Ape"}       ]   },   {       type: "Fish",       options: [         {species: "Shark"},         {species: "Cod"},         {species: "Trout"}         ]     } ] Above we have a snippet of JSON (excuse the formatting), pretty simple, let's say we have a need to create a drop down for each object with the value showing being the type in each object. Easy of course, now let
1 comment
Read more

From nothing to an Angular 7 app running in 5 minutes with AWS

Image
Ever sat down, looked at your computer, had a great idea but then thought "Nope I can't be bothered with all the setup", I know I have. Now before you continue it is only fair to warn you that if you are not on the AWS free tier this may cost you a few cents but if you are just signing up this should be a free experience, I think it is fair to point out though, this is a small price to pay, I wrote a post on why this is a great way to develop, go check it out here People who read my blog will know my main development computer, unfortunately, blew up on me last year but now I am starting to see that as a blessing in disguise because I find myself using AWS a lot more than I used to, now I use it for everything including creating new projects, better yet I manage this task in minutes not hours. Naturally, you will need an AWS account, I am going to slightly cheat and say this does not figure into the promise of 5 minutes, you need only do this once and then you
Post a Comment
Read more

Exploring RxJs Operators - map

In a past post I talked about the filter operator in RxJs, perhaps there is an argument for having talked about map before that, why? Simply put; you are going to use it a lot! Now, before talking about map I want to make clear that if you are comfortable with the functional paradigm then you probably don't need to read any further, safe in the knowledge that you already know what you need to know about the map operator. This leads us on nicely to talking about what map is, simply it is a way of transforming one value to another value, therefore it is safe to call this operator, the transformation operator. Here is an example using the map operator: 1| private handleEnterPressed = this.keyboardEvents.pipe( 2|       filter(this.forEnterKey), 3|       map((val) => val.key), 4|     tap((val) => console.log(val + ' pressed)) 5|   ); First off, we filter for only the Enter KeyboardEvent  on line 2. Line 3 is what we are really interested in, we are passing i
Post a Comment
Read more