The Angular Plus Show

What is a linter? For some, a linter is that round brush-thingy with sticky paper that you use to remove your cat's fur from your otherwise beautiful jacket before going out in public. For computer software engineers, a linter is a program that uses static analysis to determine if there are potential errors, stylistic problems, or other suspicious operations in an application. Attempting to use your lint brush with an Angular application might be tricky, or perhaps, it's an alternative method to cleaning the grime off your screen that has been there for months and you can somehow see past every day. Instead, Angular developers have long relied on tslint, which is a lint tool specifically built for TypeScript. Things were good, well, mostly good, up until last year when, in the midst of quarantining and eating ramen, you read a tweet that said maintenance of tslint was coming to an end. So, what is an Angular developer to do?Enter James Henry. James is a Consultant Architect for Nrwl, and generally coined by the Angular Show, as "that good looking guy at Narwhal" (not that everyone else isn't beautiful). James has worked alongside the eslint team for many years, and has provided a solution to those using TypeScript, and thus tslint, to migrate and leverage the power of eslint. James talks through his journey working with eslint, TypeScript, and more. To further prove that James good looking (scratch that)... an outstanding contributor to the community, James has provided a migration path for the most common tslint rules to eslint rules.Should you migrate to eslint today? How difficult is it? What about my existing tslint rules? Those are all great questions, and the panelists will explore and learn from James the answers to those questions and more. Go ahead, subscribe, and have a listen.Show Notes:discord.gg/angularhttps://astexplorer.net/https://github.com/typescript-eslint/tslint-to-eslint-confighttps://github.com/angular-eslint/angular-eslinthttps://twitter.com/cotufa82/status/1355901060636930049Connect with us:James Henry @mrjameshenryJennifer Wadella @likeOMGitsFEDAYBrian Love @brian_loveAaron Frost @aaronfrostFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Angular is a feature-rich and opinionated framework. Opinionated, for example, in terms of fetching data via XHR. Most, and perhaps all, Angular developers reach for the HttpClientModule. Most of us don't have to even think about that decision. While the debate will likely never end over JavaScript frameworks, Angular developers may never end their debate over what forms implementation to use. Do you use reactive forms (which are arguably not really reactive) or template-driven forms? The Angular show panelists want to take you on a learning journey into the depths of this debate in a healthy, fun, and educational way.If you read the Angular documentation you might be inclined to believe that Angular's template-driven forms approach is where you start, but real Angular devs use reactive forms. I mean, the name reactive is hip. And template-driven forms, that's so AngularJS-y. Why would I want to use template-driven forms?We have the perfect guest to answer that question for you. Ward Bell, a Google Developer Expert in Angular and President/Co-Founder at IdeaBlade, has put template-driven forms through its paces for many years, and in our opinion, is one of the foremost experts on using template-driven forms in Angular. Grab your kombucha, coffee, running shoes, or really whatever you want, and join us as we learn from the master on template-driven forms. By the end of the show, you might be asking yourself why you aren't already using template-driven forms in your Angular applications.Bonus notes from Ward after the show:I talked through a couple of approaches during the show but I didn’t have an actual sample to refer to... I just updated the StackBlitz sample with an example of both approaches. Color me “obsessive”.https://stackblitz.com/edit/angular-kkatri?file=src%2Fapp%2Fhero-form%2Fhero-form.component.htmlThe hero now has both a “Power” and a “Power Qualifier” (category and subcategory). Both are required. You pick a power and the list of qualifiers changes accordingly. A special “Select a power qualifier” appears until you pick a qualifier. This demonstrates the “disabled control” approach.One of the selectable powers is “Other”. It has no pre-defined qualifiers. Instead, you must enter a free-form description of the “other power”; what you enter is bound to the hero’s qualifier field.When you pick “Other”, the “Power Qualifier” selector is removed from the form and a required free-form input control takes its place. This is the alternative “ngIf” approach that I mentioned.Click the “New” button to see how it works when Hero has no power.Show NotesAbstractControl: https://angular.io/api/forms/AbstractControlConnect with us:Aaron Frost - @aaronfrostJennifer Wadella - @likeOMGitsFEDAYBrian Love - @brian_loveWard Bell - @wardbellFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Developing on the web can potentially be reduced to inputs and outputs, and further, a snapshot of current inputs and outputs is the state of our application. Inputs often come in the form of user events, and one of the primary methods for users to provide input into our applications is through forms. Whether you love or hate forms, web developers have no way of escaping this critical input method. In this episode of the Angular Show, our panelists are joined by two experts in the area of Angular and forms, Juri Strumpflohner and Bram Borggreve. Juri Strumpflohner is a Senior Software Engineer at Narwhal and Bram is a freelance developer and founder of BeeSoftLabs. Juri and Bram are members of the Angular Formly core team that produces and maintains this open-source project. While Angular ships with powerful form modules, Angular Formly builds on top of Angular's modules to provide an abstraction layer that enables developers to build robust and complex forms. One of the biggest advantages is the ability to dynamically and programmatically define form groups, arrays, and controls. Further, Angular Formly provides wrappers for control appearances based on several popular UI component libraries, such as Angular Material and Bootstrap, or you can create your own UI wrapper if necessary.Connect with us: Juri Strumpflohner - @juristrBram Borggreve - @beeman_nlAaron Frost - @aaronfrostJennifer Wadella - @likeOMGitsFEDAYBrian Love - @brian_loveFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Micro-what?!? What is a micro frontend, what does it have to do with Angular, why would I want to use this strategy, and how do I go about implementing this in my organization?These are all good questions. Whether you know what a micro frontend is, have never heard of it, or are currently implementing this strategy in your organization, this is an episode of the Angular Show that you do not want to miss.Join panelists Aaron Frost, Brian Love, and Jennifer Wadella as they start their journey in learning about Micro Frontends in Angular. We had the privilege to sit down with Zama Khan Mohamed, who is an expert in Micro Frontends. Zama teaches us the basics of what a micro frontend is and why we would consider this strategy for our applications. Then, we dive into the details on how Angular developers and organizations using Angular, as well as a mix of other frameworks, can leverage Micro Frontends in their architecture. We also discuss some of the benefits and costs of this approach, and why you might want to consider using micro frontends. Finally, we also touch on Webpach version 5's new support for federated modules and the impact this has on how we build modern micro frontends.Phew - that sounds like a lot, but have no fear, your friendly panelists are here to walk with you through this new landscape of micro frontends in the JavaScript ecosystem.Show Notes:https://github.com/single-spa/single-spahttps://webpack.js.org/concepts/module-federation/Connect with us:@mohamedzamakhan@likeOMGitsFEDAY@brian_love@aaronfrostFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Securing your Angular application is almost always necessary. And, it's almost always unnecessary for you to roll your own solution to authentication and security. Why? First, security is not easy and straight-forward. At first, you might be tempted to think, "Well, it's just a form with two fields, email, and a password, right?" Not really. Securing your app is complex, constantly evolving, and is critical to your application. Finally, implementing your own OAuth-based social account authentication can be mundane, and perhaps even trivial. You, your team, and your organization should prioritize what you know and do best: building your app.While there are many identity providers to choose from, Angular Show panelists Jeniffer Wadella and Brian Love wanted to learn more about the solution provided by Microsoft. So, we sat down with Christos Matskas from the Microsoft Identity Product Group to learn more.Microsoft Azure provides a robust infrastructure and tooling for securing Angular applications. And getting started only requires an Azure account and your existing knowledge of Angular. First, you register your Angular application, then you can configure your Angular application using the Microsoft Authentication Library for JavaScript. The Microsoft Identity Product Group team has also built a wrapper on top of the JS library specifically for Angular, making it very easy to install and import the necessary module into your Angular application's root module to configure your application. The team also provides plenty of source code examples in their documentation specific to Angular. Using Microsoft Identity platform, you can rest assured that your application is secure, and the security of your application is following best practices from security experts.Join us as we learn about the benefits of using an identity provider, the specific implementation of using Microsoft Azure identity solution with Angular, and how you can get started. Don't forget to subscribe to get more great content from the Angular Show!Show Notes:https://medium.com/identity-beyond-borders/what-the-heck-is-pkce-40662e801a76https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-angularConnect With Us:Christos Matskas - @ChristosMatskas@AzureAndChillaka.ms/425Showaka.ms/425Show/ytaka.ms/425Show/blogaka.ms/425Show/discord/joinJennifer Wadella - @likeOMGitsFEDAYBrian Love -@brian_loveFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Join us in part two of our series on RxJS Operators. As Angular developers, we rely on RxJS primary for asynchronous operations via the Observable primitive. While we can think of an Observable like a Promise, and simply subscribe, we can also take advantage of the many, many operators at our disposal for the transformation of events and data within the Observable stream.In order to learn more about RxJS transformation operators, we invited Lara Newsom and Zack De Rose to the podcast. Lara and Zack have a wealth of knowledge in both Angular and RxJS. Lara is a software engineer at Source Allies, a technical consultancy located in Iowa; and Zack is a senior software engineer at Narwhal, where they build Nx and Nx Cloud, as well as provide Angular consulting services.To get started, the group tackles the mapping operators, including map, pluck, scan, and reduce. They then dive into the various higher-order mapping operators, including switchMap, exhaustMap, mergeMap, and concatMap. Learning the different behaviors of each of the mapping operators is important when determining which operator to use within the pipe method. Next, the panel talks about the buffer operators, including buffer, bufferCount, and bufferTime. This then leads into discussion about the window operators, including window, windowCount, and windowTime, all of which have nothing to do with the global window variable in JavaScript when executing in the context of a browser.This episode is jam-packed with great content, humor, and fun. Don't forget to subscribe so you can continue to join us in our journey of learning about RxJS Operators.Lara Newson @LaraNerdsomZack DeRose @zackderoseAaron Frost @aaronfrostJennifer Wadella @likeOMGitsFEDAYBrian Love @brian_loveFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

The Angular Show is primarily focused on engagement with the Angular community through education. But in this week's episode, we won't be learning anything new; we won't hear from a community expert about a particular technology; we won't discuss the past, present, or future of Angular; and we won't learn about state management, flux, redux, NgRx, or RxJS...You might be asking - "Well, then what ARE the wonderful panelists going to talk about on today's show?"In the first installment of the Angular Sideline, our lovely panelists Jennifer Wadella, Aaron Frost, & Brian Love, brought you into a range of their hysterical and odd musings. And you can expect nothing different for this second episode. Just ask yourself this - "How much do you love Angular and just how far would you go to express that love?" We won't give away any of the juicy nuggets of comedy that are about to caress your ears and tantalize your neurons. Just click play - and don't forget to subscribe so you don't miss any of our future episodes of the Angular Show.Jennifer Wadella @likeOMGitsFEDAYBrian Love @brian_love@aaronfrostShow Notes:https://twitter.com/zackderose/status/1315647734729248768Follow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Let's admit it - sometimes CSS can be difficult. Seasoned veterans of web development even struggle with CSS. It's this magical thing that makes our applications look and work with beauty. But, it can also be a challenge, especially as our applications and teams grow and evolve. Most Angular developers spend their day writing TypeScript, HTML, and CSS, or potentially use a preprocessor for CSS such as SCSS or LESS. This episode of The Angular Show focuses on the latter.The panelists are joined by Nicole Oliver, a senior software engineer at Narwhal, who teaches about styling applications in Angular as she shares her experience working with large organizations to reign in the beast that is CSS.The group dives into topics such as block-element-modifier (BEM), Scalable and Modular Architecture for CSS (SMACSS), Object-oriented CSS (OOCSS), and utility-first methodologies. They also chat about using SCSS variables, CSS custom variables, and other approaches for consistent styling of Angular applications.Nicole Oliver @nixalloverJennifer Wadella @likeOMGitsFEDAYBrian Love @brian_loveAaron Frost@aaronfrostShow Notes:Material.iohttps://material.io/design/material-studies/fortnightly.html#product-architectureFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

RxJS provides both the observable primitives as well as a broad set of operators for the creation and transformation of data. And, as you know, Angular leverages RxJS for cancelable asynchronous actions and events. In our opinion, the two are a perfect match. Interactions with web applications are asynchronous in nature and Angular provides a robust solution to detecting those asynchronous actions, enabling developers to build interactive experiences for the web with ease.In this series on RxJS operators, we help you learn the operators. As you likely know, there are a lot of them, and it can be difficult to know what each of them does, and often, how to determine which operator, or operators, are succinct and current for solving the complexities of streaming data, actions, and events in our applications.Join panelists Jennifer Wadella, Aaron Frost, Brian Love, and guest Jan-Niklas Wortmann as we explore the creation operators. These functions enable the creation of new observables, or the composing of existing observables into a new observable stream. Jan-Niklas is a Google Developer Expert in Angular and volunteers his time on the RxJS core team. Listen in and learn from Jan-Niklas as he teaches us about many of the creation operators in RxJS. We're sure you'll walk away from this episode with a new and expanded knowledge of RxJS.Find us on Twitter:Jan-Niklas Wortmann | @niklas_wortmannBrian Love | @brian_loveJennifer Wadella | @likeOMGitsFEDAYAaron Frost | @aaronfrostFollow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5

Grab your favorite cola, some swig, a beer, or sangria, and sit down with panelists Jennifer Wadella, Aaron Frost, and Brian Love for a hangout. This week's episode of The Angular Show is about the show. It's a bit meta, we know, but we wanted to share with you a little bit about why we spend a few hours every week to create the Angular Show. This podcast was born out of a desire to make a podcast that reflects the community, that is inclusive, and that is welcoming.We also wanted to share with you some of the funny moments that have occurred both before and during the show. We can't give away the herbs and spices that make up the secret sauce that coats the delicious podcast that tantilizes your ears, but (hint, hint) we offer a slight possibility of leaking some of the juicy bits if we get enough tweets on the 'ole Tweet Machine.Finally, we share with you how we pick our guests and how we determine the topics that we talk about. We also shared how we transitioned the show this year to focus on producing several series, with more in depth series yet to come on topics such as forms.Follow us on X:@DevLifePodcastThe DevLIfe Podcast  is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge  every year to attend talks and workshops by the Angular team and community experts.JoinAttendXBluesky        ReadWatchStock media provided by JUQBOXMUSIC/ Pond5