How I code in Angular when nobody is watching

My Angular course: angularstart.com/
I get surprisingly few opportunities to code Angular applications specifically the way I want to without needing to carefully consider risks and weigh trade offs.
This video covers how I'm using the Analog component format, createInjectable, and signalSlice in a situation where I do get to code however I want.
More on Analog SFC: • What happened to Analo...
More on Nx: • How to structure your ...
createInjectable: ngxtension.netlify.app/utilit...
signalSlice: ngxtension.netlify.app/utilit...
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Want to build mobile apps with Angular?: ionicstart.com
0:00 Introduction
1:07 Analog SFC
1:38 Nx
1:48 createInjectable
3:37 signalSlice
#angular
- More tutorials: modernangular.com
- Follow me on Twitter: / joshuamorony

[@JoshuaMorony]

Get more content in the newsletter: mobirony.ck.page/4a331b9076

[@Mong3]

Hey! Can you create a stack blitz or publish the code for this video in Git Hub? I would appreciate it.

[@JoshuaMorony]

@@Mong3 usually I have the source code in the description but this one is from a private repo sorry

[@muhamedkarajic]

@@JoshuaMorony please make some example code so we can play around with it. I see lots of issues in the analog github. I'm worried its not gonna work out so great.

[@HassanRaza-ym3uf]

Hit like button if you want Joshua to open source this code so we can learn more from it.

[@jovanthournout9707]

Hey Josh, suggestion for a follow-up video. Typically in complexer applications, you have global state, feature state and also view state. One builds on the other. Each layer of state can be managed by signalslice, but perhaps you could give some pointers or insights in how you manage this.

[@Amnahbrhm]

is analog a full stack framework? can i use it with dotnet? if i want to use is bc the SSR so can i use it in production?

[@jovanthournout9707]

hey Josh, when exploring the signalslice docs, what is the idiomatic way of performing a backend call? So i create an action source for a create new user command In the pipe on the action source, I can concatMap and perform a http request Either the httpRequest responds with a the new user json, or I could follow up this concatmap with a switchmap that loads the users from the backend. After that, I can map either of these responses to a Partial of the State. Is this the way of doing things? Any example or suggestion on how to deal with a failures in the http call to the backend? Use onError and switch to a stream that returns an error object which is then mapped to the state? I must say, it takes some time to start thinking in sources, but once you get it, the pattern is often the same. SignalSlice appears to remove even more boilerplate. Feels natural and forces you to colour within the declarative lines. I like it ❤

[@JoshuaMorony]

Sounds like you've pretty much got it - yes essentially the same way I am calling the async operation in the example in the video, actionSource -> switch to request -> map result to partial of state, and yes you can also use catchError to retry/return an observable that maps to the appropriate error state

[@jovanthournout9707]

@@JoshuaMorony tnx for the confirmation 🙏

[@jovanthournout9707]

Where does signalslice differ from ngrx signalstore? What are the pro's of one over the other? They both seem to create / declare a sort of encapsulated service that manages some state and only expose particular functions to the outside world and all that with reactivity in mind. Or am I overlooking a difference?

[@JoshuaMorony]

Keep in mind this is coming from someone who hasn't actually properly used SignalStore yet (me), but the key philosophical difference imo is the focus on the more declarative model for signalSlice i.e. you can't patch state in signalSlice, only pre-defined sources can update the state. Also, and I don't know if it translates to actual bundle size differences or not and I don't think that's particularly important anyway, but signalSlice is more of a simple utility function rather than a more feature complete state management library I think SignalStore is great though, to be clear

[@bric305]

For context, I believe that Joshua released his signalSlice utility before ngrx' signalStore. But obviously the main angular state management library couldn't passs on making a signal based approach (I mean that ngrx didn't copy or steal anything from Joshua ofc)

[@jovanthournout9707]

@@JoshuaMorony Tnx again Josh 👌

[@jordanking3715]

I like the signal slice approach, is there a way to integrate it with redux dev tools. mostly the action triggering and starts with portions. Its helpful for debugging to examine the redux action stream that preceded an error.

[@JoshuaMorony]

I've thought about this, I think it's probably possible but I haven't actually looked into it yet

[@phill13able]

How many times do you run "ng new..."

[@CodeZakk]

hi .analog extension is not supported in vscode. when you try to create that file it will not read by vscode. what IDE are you using and how to solve this problem in vscode. thanks in advance!!

[@JoshuaMorony]

There's a VS Code extension available for analog language support (this is an early/alpha version though), I'm using neovim which can also make use of the same plugin with some configuration: github.com/analogjs/language-tools/blob/main/INSTALLATION.md

[@ToJak91]

I feel like an old grumpy man now. I truely love both `this` and the decorators. It makes reading and understanding location and purpose soo intuitive. One of the things i really miss when working in our MASSIVE monolithic c# backend, is the forced use of `this`. I have no idea, weather a variable is defiend, and possible changed on the partial parent class, of inside my method scope. And when some methods are 600 lines long, and parent object have 50 fields, it's nice to know what the scope of a field is... With @Input and @Output no longer needed (Or.. We're currently running angular 13, 14 & 15, so i can still use it with good conscience) , the purpose of the variable is no longer screamed in my face when i read the source code. Now i need to skim the entire end of RHS, instead of just the first character from LHS... :( 33 years, and ancient.. 😢

[@JoshuaMorony]

The input/output organisation is definitely something I miss (though I would still take the new input/output on the whole) - I do find myself wanting to use comments or at least gaps to more clearly delineate whats an input etc.

[@larshanisch]

The public properties are input/output on my components. I use "protected" for the things I need in the template. And #private syntax for private fields.

[@Zeth3D]

are there differences when writing tests for createInjectable?

[@JoshuaMorony]

I haven't properly tested in an actual application scenario yet with createInjectable, but there shouldn't be (spoiler: createInjectable actually just creates a standard injectable class under the hood)

[@davidromaniuk]

Do you think it is easier to do unit testing?

[@JoshuaMorony]

I haven't done large amounts of testing with this approach, but generally it shouldn't really make much difference

[@ngathanh8438]

thanks

[@pezo1919]

Nice to see CycleJS getting reinvented 😁

[@sivuyilemagutywa5286]

About the (ACF) Analog Component Format. 1. what are the benefits of using this in Angular? 2. what is deferent from Vue, Svelte? 3. why not use svelte or vue? I'm sorry if I seem like an Angular police. I just don't get this? Why would I use Analog if I don't get to use the Angular syntax?

[@JoshuaMorony]

To be brief: 1) less boilerplate, no loss of features (unless you specifically use OOP stuff) 2) everything else in Angular 3) same reasons I want to use Angular (the existing component authoring syntax is not why I use Angular)

[@sivuyilemagutywa5286]

​@@JoshuaMorony Ok I see? For me I just use Astrojs for (static sites, websites), I use vuejs for small things like chrome extensions, but I don't like SFC, but it is great for that stuff. But for Enterprise or Large projects, I like Angular OOP.

[@JoshuaMorony]

@@sivuyilemagutywa5286 which OOP features specifically do you make use of in large projects? just curious, not trying to judge (and btw, "Analog SFC" components don't specifically need to be SFC, it also allows defining templates/styles in separate files if that is what you want)

[@sivuyilemagutywa5286]

@@JoshuaMorony Modularity , Encapsulation and Organisation. OOP is easy for me to maintain in a large project.

[@vutruong4164]

​@@sivuyilemagutywa5286 I think all those points you need are still there if you use Angular Single File Component? Each component in a single file is basically encapsulation, modularity and organisation. Nothing has changed conceptually. Just the way u write code is less boilerplate.

[@paell0]

Title isn't true by definition - my very smart conclusion 😝

[@JoshuaMorony]

I think as long as this isn't a live stream I'm all good... maybe

[@paell0]

I like it, have similar approach. There must be a space for experiments and a space for tested solutions. Thanks for all your content - very inspiring 👍

[@io_inc]

you really love Angular, huh?

[@carlosabud]

my only comment is: How do I get to work with you? lol

[@mattlaw4395]

Curious on the fact your argument for createInjectable is mostly around only exposing public apis, and you don't like typescripts private modifier. why don't you just use an octothorpe (hash names), a native javascript :D

[@JoshuaMorony]

I don't have anything against the private modifier specifically, and I do use the private field syntax sometimes (TIL the hash symbol is technically called an octothorpe) - it's not so much a "man I hate typing the keyword "private" everywhere" it's more that it forces you to think specifically about what it is you want to expose since everything is private by default

[@sodium7554]

This looks like React philosophy. The best thing about Angular is that it's not React.

[@jazy3091]

First! Now that I just made the most important comment of the week, back to watching.

[@Dekutard]

why does front end have to be this wildly complicated?

[@JoshuaMorony]

imo front end just can be wildly complicated, and things like this look complicated because they are dealing with that complexity - but, in some cases we do deal with simpler things and might handle complexity we don't actually need to, but also in some cases we ignore complexity we should be dealing with which results in buggy applications (and imo, I think we probably do this too much, which is probably a big part of why so many web apps provide buggy and frustrating experiences for users)

[@Dekutard]

@@JoshuaMorony it’s such an interesting field. i’m not exactly senior and my angular experience was from ‘19 to ‘21 so i’m mad rusty. maybe with more experience it would end up making so much sense. but in my early career it’s so easy to get terrified of how daunting all these many abstractions can be. i wondered if certain devs were just far ahead of me, or if simplicity is king and were just over engineering stuff so far ahead of what’s necessary.