Angular CDK, Angular Material and the CLI with Nelson Gutiérrez
Translated transcription from Spanish of episode #1 of the Angularidades podcast
Listen to the entire conversation in Spanish with Nelson Gutiérrez on Spotify, Youtube, or other podcast platforms.
Alejandro: Hi Nelson; how are you?
Nelson: I am very good. Thank you very much for the invitation.
Alejandro: It’s great to have you here. First, Let me introduce you to those who don’t know about you yet. You are from Costa Rica and a software engineer at HeroDevs, a well-known consulting company in the Angular community for having directly inherited AngularJS and Protractor support from Google. You are also quite active in the open-source community, with exactly 716 contributions on GitHub in the last 12 months. And known for having built a very useful tool, which we will discuss later.
Recently, Nelson, you joined as a co-organizer of the Angular Community Meetup a couple of months after giving a spectacular talk that I personally loved —perhaps because I used to use Jekyll to generate static content. There we had the opportunity to learn from you what the whole process was like with Scully, generating static sites from an Angular codebase.
I'd also like to mention during this introduction that I have been following your Angular tips on Twitter — ahem, X — for a few months now. Thank you very much for accepting the invitation to this first episode of the new Spanish podcast to talk about Angular.
Nelson: Thank you very much for the invitation to this first episode of the podcast, and I think this will definitely be a very enriching space for the community. I declare myself a fan of the podcast from the very beginning.
Alejandro: It’s great to hear this. Thank you, Nelson. By the way, what day of the week do you publish your Angular tips, and why have you kept doing it consistently?
Nelson: I publish them on Tuesdays, and I’ve been doing it since… well, this started in November, if I’m not mistaken, last year, and I have kept doing it weekly. I think I have been quite consistent. With some exceptions of some weeks that I have failed, but… why do I keep doing it? Because it helps me a lot.
What I used to do was learn something, implement it, and then 15 months or 2 years later, I would find a problem and could not remember how I had solved it. So, I started to jot down all those things I didn’t know about Angular.
I started to make a list there like a small backlog, and I said, I’m going to start sharing them! I began to publish some other things that were on that backlog, and it has grown. I have kept doing it because it has helped me a lot to document everything I learn, and I also have had feedback that it has brought value to some people. I have really enjoyed doing it, to be honest.
Alejandro: I think for the anniversary you should consider an infographic or something to visually locate the different types of advice you have offered because they are accumulating and will soon be quite a few.
Nelson: Yes, I was just counting, and I think I already have more than 20. As a little sneak peek for the community, I am working on translating all of them, because they are all in English right now. I’m about 75% done, and I’m going to publish them on my site NelsonGuti.dev with a little toggle. So they will be under a Spanish path so that the community can also have them in this language.
Alejandro: That’s great! It’s an intellectual exercise that seems easy, but translating to Spanish terms like CDK (Angular Material Component Dev Kit) starts to get a little complicated. Speaking of the CDK, one of the suggestions I remember from the last piece of advice you posted is the use of the package that offers the functionality to copy and paste text from the system clipboard: the CDK Clipboard.
One of the basic programming tips that we basically adopt in our daily lives is the reuse of third-party code, so we don’t have to waste resources reinventing the wheel and exposing ourselves to possible errors and vulnerabilities that have already been resolved. Can you suggest a handful of two, three, or four Angular Material CDK directives that we should consider evaluating before venturing to develop graphical interfaces that can be moderately complex, whose design patterns, interaction, and use cases can be quite common in the industry?
Nelson: Of course, the CDK is gold. There are many things that can help us. In my case, I think one of the best-known is the module for tables. The CdkTableModule has many useful directives for tabulating data. I would also mention the drag-and-drop module, which has several directives such as CdkDrag and CdkDropList to unify all those elements that we want to drag and drop. This module is very handy.
One of the things that the Angular team recently added — I recall version 14 — was the CdkMenu module. Developing custom interactions that comply with all accessibility standards can be complex, and the Angular team provides us with several directives to cover this. I would highly recommend these three modules, which have many directives to create user interfaces in compliance with accessibility without reinventing the wheel, as you mentioned.
Alejandro: Exactly, compared to typical performance and load tests, accessibility audits can be somewhat complex. This is because, generally, as users or developers, we interact through the visual sense with the web product we are generating. We usually do not use screen readers or the keyboard tab all the time to jump from field to field, interacting in uncommon ways with the result that will be rendered in the browser. In this case, having the support of a third-party product saves you a lot of time and resources. And there we have component libraries like Angular CDK, luckily.
Nelson: To save us, exactly :)
Alejandro: Another suggestion you have offered is the use of the ngPlural directive to control the text display on an Angular template where there is a reference to a singular element — or several of them in the plural form. Having a minimum of logic in the graphical interface that controls how that text will be read is key. This avoids mistakes like the typical: “there are 1 products in your shopping cart” or “zero elements in your image gallery.” How easy is it to use this directive for Angular applications that support multiple languages?
Nelson: The i18n module of Angular supports pluralization. So, I would think it is the best way to approach this scenario. What they call "translating plurals" is a way to define what the pluralization will be according to the locales you have in the app. The ngPlural directive itself is more oriented for use, let’s say, with a language already defined. But if you are going to use more than two locales, I would recommend this other technique.
Alejandro: How interesting, because the directive handles conditionals based on quantitative values, and if we have to translate that result to internationalization, all the handling in the template would be quite suboptimal.
Nelson: It can get complicated, yes.
Alejandro: Tell us about what you have seen new and different in the objects where the application routes of Angular are defined. For example, passing route data as input values to components and other types of changes that we have been able to see in the last two versions.
Nelson: What you mentioned has been a long-awaited functionality, right? Until now, we had to use classes like ActivatedRoute. But now with a simple configuration, we can access all of this. I think the Angular team has done an excellent job of making the developer experience very simple.
Alejandro: How difficult has it been for you to refactor something from what you have had in previous routes, in case you have already used this mechanism with a real application in production?
Nelson: Well, I haven't used it for enterprise projects yet, but in personal applications, where it has been super easy for me. Just activate this configuration that I was telling you about and delete all that code we had before: starting with the ActivatedRouteSnapshot, and look for the params or the resolver with the data of interest. We delete all that, put it as input, and access it by the same name. Very simple to migrate, use, and implement at once in Angular 16.
Alejandro: This is completely in line with the goal that the Angular team has tried to fulfill: a greater reach to developers coming from other frameworks, not only reducing the learning curve but improving the development experience when using Angular.
Nelson: That’s right.
Alejandro: And offer more syntactic sugar, as they say in English. Something that can help a lot to launch an application super fast.
Nelson: And develop prototypes and proof of concepts quite quickly.
Alejandro: One of the things that allows me to prototype an Angular application in almost no time compared to not only with an HTML, CSS, or JavaScript application from scratch but also with other frameworks, is Angular CLI. Going back to the contributions you have made, Nelson, to open source in the community, what was the main reason that led you to develop your flagship product, the Angular CLI Explorer?
Nelson: My flagship product and for now the first one :)
Alejandro: You have several.
Nelson: Well…
Alejandro: You have many repositories on GitHub that are pretty interesting, mainly this last one of country flags with Signals. So I invite everyone to take a look.
Nelson: This is something I was playing with too. But yes, about the Angular CLI, what inspired me? A few years ago I saw a tool called Git Explorer, which was basically quite similar to what I did, but with Git. Through a menu, you selected, for example, to merge master with my branch, and it gave you the Git command you needed. It only covered some commands, but I loved the tool a lot.
Alejandro: RxJS also has something very similar, the Operator Decision Tree, which allows you to navigate from a flow based on the fundamental idea of what you want to do, and it ends up offering you the most suitable operator.
Nelson: Aha! Well, I saw it with this other one, so a shout-out, as they say in English, to the people of Git Explorer. So I said — this would be good for Angular — and from there I took the idea. I went to the Angular repository, where there's a JSON with the description, the name, and the options of each of the CLI commands. So I knew it wouldn’t be too difficult, because maybe in those cases the most cumbersome thing is to get all that information. I grabbed all that JSON with the data and developed the tool. Personally, it has helped me a lot, and I like it very much. Actually, I use it daily to make flags, options, and more. That’s where the inspiration came from, that’s the story of how I did it.
Alejandro: Do you have any analytics on how many people access your site, where the tool is available?
Nelson: Not yet but I should do it. I have the tool hosted on Netlify right now, which offers an option to view the analytics. It’s a paid option but quite cheap. So now that you are mention this, I’m going to activate it on my website.
Alejandro: You may also want to consider adding Google Analytics instead, which is currently in version 4. You don’t have to go through the GA4 migration process since they redesigned the interface and the way the data is passed.
Nelson: Thanks, I’m going to evaluate it. The good thing about Netlify is that I could see the historical data.
Alejandro: Well, if you could retrieve retroactively the information of previous visits, Netlify is worth considering.
Alejandro: Returning to the Angular CLI Explorer, while you were developing the project, was there any command that you had not discovered to date and has been useful to you since then?
Nelson: There were several that I did not know, really. I didn’t use the CLI much, so that’s also why I decided to develop the tool. I knew the basics of generating the app first, the workspace, the components, but that’s it. But yes, there is a command, the ng cache that is used to handle the cache that Angular’s local instance has. There is another one called ng doc that allows you to write a keyword and it opens the browser exactly in the Angular documentation page for that term.
The other thing is the flags, the options that one can use when we generate, for example, a component. I almost always used the same ones, for example, --standalone. But there are many more options, like when you want to use inline styles, or create a minimal workspace, generate a component without test .spec.ts files. I have known or remembered many flags that are now much more familiar to me.
Alejandro: Since you mention ng cache, I have to go back to the command documentation, because something that has happened to me recently is that I have to manually remove the .angular/ directory generated. It happens that when I link a project using npm link to an Angular library located in another local repository on the computer before deployment, I have to manually delete that directory after compiling each change in the library.
Nelson: I think it could help you, yes. There are four flags that ng cache has that are worth taking a look at. I’m also going to go back to the documentation because I remember when I was doing it, but it’s worth going back to see.
Alejandro: As long as there is no option of ng cache that results in removing the entire project, everything is fine :)
So, could you give us a preview of what would be one of the first tips you would publish about features that are scheduled to launch in the first week of November in Angular 17?
Nelson: Well, the tips I have generally been making are about slightly more stable features. I haven’t done much about the new stuff, because almost everything has been in Developer Preview. So, I may not share tips about Angular 17 for a while, but I do have several others. I could tell you in advance that the next three months will be about the CDK, because there is a lot there to explore and recommend.
Alejandro: Before concluding the conversation, is there anything you would like to mention?
Nelson: Well, I think I should thank you for this space, for creating it. I think it’s going to bring a lot of value to the community, and I feel super honored to have been the first guest. Thank you so much for that.
And one thing I wanted to do is invite people to dare to share content, something they have learned, something they have experienced. There is always someone who can benefit from our experiences. Select the format and just go for it, because only good things come from that.
Alejandro: Very good advice. For me, it’s a pleasure to have you here. Thanks for accepting the initial invitation. I learn a lot every time we have the opportunity to talk.
Nelson: No, thank you very much, Ale, really. I wish you success in this project which is going to be excellent. I will definitely share it because I think it will bring a lot of value to the community.
Alejandro: Thank you, Nelson, have a good night.
Nelson: You too.
Alejandro: ¡Chao!
Check out who is getting interviewed for future episode releases at twitter.com/angularidades.
