Episodes

  • In this episode of the Angular Show, the panelists (Aaron, Brian, and Jennifer) have the esteemed privilege to be chat with Misko Hevery. In case you haven't heard, Misko is the creator (and sometimes lovingly referred to as the father) of Angular. Misko has spent the last 16 years building Angular at Google, and we have much to thank him and the team for. For some of us, we make a living from teaching, writing, speaking, and coding with Angular. We cannot thank Misko and the entire Angular Team enough!

    Now, don't get your feathers ruffled - Misko recently transitioned from the Angular team at Google to join the Builder.io team that is building (pun intended) Qwik - a DOM-Centric, resumable web-app framework. Does this mean that Angular is doomed? No, definitely not. This means that Misko continues to pioneer in the land of the web.

    What is Qwik and how is this framework any different than Angular (or Vue or React)? Join us as we learn about Qwik with Misko Hevery!

    Show notes:

    https://github.com/builderio/qwik

  • Internationalization (i18n) and localization (l10n) can be critical for Angular applications that are used throughout a country, continent, or around the globe. As Angular developers, we have several tools at our disposal to accomplish i18n and l10n. As you might expect, since Angular is an opinionated framework that comes with batteries included, there is a solution provided by the Angular Team. We recently sat down with Kaitlyn Ekdahl to learn about the built-in solution to i18n provided by Angular. Kaitlyn taught us how to get started, some of the recent improvements, as well as the pros and cons of this solution. We also briefly mentioned that there are a few open-source community-led efforts at solving i18n with Angular, such as ngx-translate and Transloco.

    As engineers, the panelists for the Angular Show (Aaron, Jennifer and Brian) are always curious. We want to learn more, and we endeavor to share our learnings with you! We were excited to learn more about Transloco from Inbal Sinai, a member of the ngneat team, and a Senior Front End Developer at Datorama Salesforce. Inbal shares with us how Transloco works, how easy it is to use, and some of the runtime advantages that Transloco provides. Transloco also makes it easy to get started using the provided `ng add` command. And, if you're currently using Angular's i18n library, Transloco has documentation on how you can easily switch. Oh, did we mention docs? Yeah, they have that covered too (and quite well we might add).

    If you are considering supporting i18n and l10n in your Angular application we recommend you listen to this episode of the Angular Show, check out Transloco, and don't forget to subscribe so you can go back and listen to the show we did with Kaitlyn to learn about Angular's localization library.


    Show Notes:

    https://ngneat.github.io/transloco

    Connect with us:

    Inbal Sinai - @SinaiInbal
    Brian F Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY

  • Missing episodes?

    Click here to refresh the feed.

  • Angular is more than a JavaScript framework, it's a community of caring people who use Angular to build and deploy amazing products and solutions that enrich lives and improve organizational pursuits. For many of us, the community is more important than the technology. Sure, Angular is awesome, but not as awesome as you the community!

    So how can we connect as a community? We can connect, engage and learn through conferences, meetups, blogs, podcasts, and now, the new(ish) Angular Discord. The Angular Discord server is a free and safe way for you to connect with the Angular community, ask questions, and learn from others.

    If you haven't used Discord before, it's a bit like slack, or other chat messaging services. There are channels that range from questions and discussions about Angular, community topics and events, libraries and technologies, meetups, and more. You can connect with library authors and contributors, people in your local area, and people that speak your language.

    In this episode of the Angular Show, we get to hang out with Stephen Cavaliere from leading agile, and Rob Gant from LearnLux, who are a few of the moderators and people behind the Angular Discord. Stephen and Rob share with us about how the Discord server was started, why it exists, how to join, and some of their future hopes and plans.

    You can join the Angular Discord for free at discord.ng.show. It's free, safe, and inclusive.

    Connect with us:

    Stephen Cavaliere - @SteveCavaliere
    Brian F Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY
    Aaron Frost - @aaronfrost

  • Single Page Applications (SPA) have many advantages, including increased interactivity, responsiveness, and user experience. However, a SPA often requires sending large chunks of JavaScript code to the client. This code must be downloaded and parsed by the client, not to mention the execution time required. There are many strategies to achieve a highly performant single-page application. One of the most commonly used strategies is to lazy-load as much of the application as possible. It's likely that the client does _not_ need the entire application's code upfront, rather, we can deliver a minimal amount of code to the client to bootstrap the application. We can then either prefetch and preload the remaining chunks or wait until the user interacts with a specific feature or module of our application, and then fetch and load the JavaScript that is necessary to render and execute.

    As Angular developers, you are likely familiar with the built-in router's ability to lazy load child modules via routing. This is a big win for all of us. But, what if you could dynamically load modules and components at runtime? The Angular Show panelists (Aaron, Jennifer, and Brian) sat down with Jay Cooper Bell to learn more about this solution and the approach that he has used. Jay is the CTO and co-founder of Trellis, a fundraising platform for non-profit organizations, and a frequent contributor and speaker in the Angular community. Jay, and the team at Trellis, created rx-dynamic-component, an open-source library that enables Angular developers to dynamically load and mount a component at runtime using RxJS Observables. Jay teaches us about what he learned building the library along with the advantages of lazy-loading components using an Observable's next notification as the observer.

    Don't forget to subscribe so you can continue to hang out with the Angular Show panelists as we learn from the Angular community!

    Show Notes:
    rx-dynamic-component source code:
    https://github.com/trellisorg/platform/tree/master/packages/rx-dynamic-component

    rx-dynamic-component demo:
    https://github.com/trellisorg/platform/tree/master/apps/rx-dynamic-component-demo

    https://blog.angular.io/ivys-internal-data-structures-f410509c7480

    Video about Memory Management: https://www.youtube.com/watch?v=Zs-d6_FPfMY&t=1s

    Article: https://www.nytimes.com/interactive/2021/05/24/us/tulsa-race-massacre.html

    Connect with us:

    Jay Bell - @JayCooperBell
    Brian F Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY
    Aaron Frost - @aaronfrost

  • How long does it take to build your application? When you build your application are you rebuilding the entire universe, or are you using incremental build caching? For some applications, build times are perfectly acceptable, and there are no major complexities around building the application. For others, the build time is unacceptable, is impacting the developer experience, and perhaps most importantly, it is causing your organization money. So, what is your organization to do?

    There are a few organizations that manage development scale at the largest level, and one of those organizations is Google. All source code at Google is part of the google3 monolithic repository, and further, building applications can be complex. Google set out to solve this problem and built Blaze, and then released Bazel as an open-source project in 2015. In this show, we learned from Zack Gray, from Flare.build, about how Bazel is an automated tool for building and testing. Bazel is language and framework agnostic, meaning, it can be used to build and test not just TypeScript and JavaScript, but any language. Further, Bazel leverages parallelization, enabling the tool to build multiple aspects/modules of your application simultaneously. This also leads to building and testing across many machines. Finally, Bazel is smart enough to only build the artifacts that need to be re-built. This leads to incredible performance and reliability.

    If Blaze sounds like a potential solution for you, then this is an episode of the Angular Show that you will want to listen to. Finally, if you need help with building, running, configuring, and extending Blaze, then be sure to reach out to Zach and the team at Flare.build.

    Connect with us:

    Zach Gray - @zachgray_io
    Brian F Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY
    Aaron Frost - @aaronfrost

  • Have you heard of Stackblitz? If not, have you ever clicked the button in the Angular docs to launch a demo of the code and you are instantly transported into an environment that is running the Angular code alongside a slick code editor that resembles VS Code? We're going to assume that you answered yes to both of these questions. If not, go check out stackblitz.com and start-up an Angular application to see just how fast and easy it is to create a demo application running in the browser. Stackblitz is building incredible tooling for developers to use in the context of the browser, and to do so, they are pushing the envelope of building a web application. So, how do they do it?

    In this episode of the Angular Show, we are thrilled to sit down with Eric Simons, the co-founder, and CEO of Stackblitz to discuss the future of JavaScript and to learn how the team at Stackblitz is building an OS in the browser. Crazy - we know! Join the panelists as they ask Eric just how they are going about this. As you might guess, they are leveraging web APIs that some of us have probably never touched, like WebAssembly, to accomplish this task.

    What is the future of JavaScript? None of us know for sure, but we can take a look at cutting-edge solutions like Stackblitz to get a glimpse into what the future might look like.

    Show notes:
    https://www.chromium.org/teams/web-capabilities-fugu
    https://stackblitz.com/v2

    Connect with us:
    Eric Simons - @ericsimons40
    Aaron Frost - @aaronfrost
    Brian F Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY

  • Internationalization (i18n) and localization (l10n) can be critical for Angular applications that are used throughout a country, continent, or around the globe. As Angular developers, we have several tools at our disposal to accomplish i18n and l10n. As you might expect, since Angular is an opinionated framework that comes with batteries included, there is a solution provided by the Angular Team. What you might know is that the Angular Team made some big improvements in the localize package when Ivy, the new compilation and rendering pipeline for Angular that was released in version 9, was released that improves the development of Angular applications that support i18n and l10n. There are also a few community-driven open-source solutions for i18n with Angular, including Transloco and ngx-translate. With all of these options, which one should you choose?

    Thankfully, as loyal subscribers and listeners to this very podcast, we want to help you make an informed decision. And to do that, as usual, we turn to an expert in the community. Please welcome, Kaitlyn Ekdahl, a Senior Software Engineer at Narwhal Technologies, to the Angular Show to teach us about i18n and l10n with Angular. Kaitlyn shares her experience and in-depth knowledge of using Angular's localize solution, Transloco, and ngx-translate. We discuss the pros and cons, and why you might choose one over the other.

    Whether or not your current Angular applications require i18n and l10 today, this is an episode of the Angular Show that you do not want to miss. Share this with your colleagues and other Angular developers so that we the community can be educated, informed, and ready to build applications that can be used throughout our communities and throughout the world.

    Show Notes:
    i18n vs l10n - https://blog.mozilla.org/l10n/2011/12/14/i18n-vs-l10n-whats-the-diff/
    Locl - https://www.locl.app/
    Introducing Transloco - https://netbasal.com/introducing-transloco-angular-internationalization-done-right-54710337630c
    Runtime i18n with Ivy by Olivier Comb: https://www.youtube.com/watch?v=miG-ghJhFPc
    Angular Athens: https://www.meetup.com/Angular-Athens/events/277017190/


    Connect with us:
    Kaitlyn Ekdahl - @kaitlynekdahl
    Aaron Frost - @aaronfrost
    Brian F Love - @brian_love

  • The Angular Show invited Minko Gechev to come on the show and talk through some of the big Angular-related announcements, namely, Angular version 12, IE11 deprecation, and the shiny new Angular DevTools. Minko Gechev is a longtime contributor to Angular, a member of the Angular Team, a good friend of ours, and an all-around wonderful person to spend time with. To kick things off, Minko takes us through some of the big changes as part of the Angular version 12 release, including Ivy (no not the plant, the new-ish compilation and rendering pipeline in Angular) libraries and the final sail-off of ViewEngine (the thing that Ivy replaces), updates to the Language Service (VS Code plugin) to use Ivy, strict mode as the new default for new Angular projections, webpack 5 support, nullish coalescing operator in templates, and inline Sass. Phew!! That's a long list. I guess the team has been a bit busy. Hopefully, they got a break to attend Minko's amazing talk at Google I/O.

    And that's just the Angular version 12 content we cover in this episode! We also talk about DevTools, the new Chrome extension for Angular developers from the Angular Team, its features, how it works, the integration with the Chome DevTools, and how you should never touch an internal Angular API with three theta symbols (joking, but, seriously, no touchy)! The new DevTools are available in the Chrome Web Store to download and install today, and will soon be available for Firefox.

    Oh, we almost forgot! In the midst of all of these amazing technical accomplishments, the team snuck in some easy-peezy Tailwind CSS support for those of you that love to add dozens of classes to your HTML elements and are afraid of CSS (we get it, CSS is, like, really challenging). We're speculating that future versions of Angular might even write your CSS for you.

    Angular as a platform continues to grow and thrive. Want to be a part of the journey? Go ahead and subscribe so you can listen to this info-packed episode with Minko, and you'll be sure to not miss a future episode. Subscribe today!

    Show notes:
    Article about a Introducing Angular DevTools
    https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

    Connect with us:
    Minko Gechev - @mgechev
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost
    Jennifer Wadella - @likeOMGitsFEDAY

  • Ever wonder about being in Developer Relations (aka DevRel)? Or starting a meetup? Or building a technical community? In this episode, the panelists have the pleasure to sit down with Ana Cidre, a Developer Advocate at Auth0, and learn about how she got started with being a part of, and building, communities. Ana shares a bit of her story about how she got started, was mentored by Sherry List, and began engaging with technical communities, the JavaScript community, and of course, the Angular Community. Ana's story is both inspiration and education, and we know you will enjoy this special episode from the Angular Show.

    Ana shares how being a DevRel is not about selling, rather, developer relations is about building tools and education so that developers will remember a specific product or solution when they need it. She also shares with us about the Avocado Labs initiative that she pioneers at Auth0. Avocado Labs provides educational online content for developers, focusing on frontend engineering technologies, and of course, security and identity management. Avocado Labs hosts online presentations and panels. They have upcoming events that you can sign up for, as well as recordings from past events.

    In a rift with Ana about online communities, our beloved panelist Brian proposes an (according to Jennifer "cute") community idea called "async/await" where attendees consume some educational online content asynchronously on your own, and then gather later in-person, or online, to discuss, ask questions, or have a panel. It's an idea, and you hear it here first.

    Finally, Ana shares with us the Auth0 Ambassador program, how it works, the perks, and more. You can learn more about the Ambassador program using a link in our show notes.


    Show Notes:

    https://www.goodreads.com/book/show/30121783-social-architecturehttps://avocadolabs.dev/
    Links:
    https://javascript-conference.com/
    https://twitter.com/joshsimmons/status/1236060608153280513
    https://www.ted.com/talks/celeste_headlee_10_ways_to_have_a_better_conversation

    Connect with us:
    Brian F Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY
    Ana Cidre - @AnaCidre_

  • In this episode of the Angular Show, we wanted to learn about workspaces. What exactly is a workspace? Why do we have this angular.json file? What is a builder? How does this all fit together with building Angular applications, both small, and at scale? What about Nx from the team at Nrwl?

    Join us as we spend some time learning from Benjamin Cabanes, an expert on Angular workspaces, and a senior engineer at Nrwl. Ben clearly defines what a workspace is, and what it is not. We learn from Ben how the Angular Workspace is configured, the primary components, and how it all fits together and integrates with the Angular CLI. Ben also teaches us about the benefits of a workspace over simply code colocation, and how we can use the power of Nx to improve the developer experience in our organizations.

    Be sure to subscribe so you can continue to learn from experts like Ben and the amazing Angular community.

    Show Notes:
    Node Rockets - https://www.node-rockets.com/

    Connect with us:
    Benjamin Cabanes - @bencabanes
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost

  • How many domains do you currently own? One for your blog, maybe one for your email, a family website or two, oh, and of course a bunch of domains for those awesome side projects and ideas you have. Side projects can be fun, challenging, and rewarding. Have you ever thought about what it might take or look like to bootstrap your own side project and successfully launch a new startup?

    Join the panelists of the Angular Show as we have the opportunity to spend some time with Niall Crosby, the founder, and CEO of AG Grid. Niall shares with us the story of how he got started building AG Grid, some of the early decisions he made, and how he was able to bootstrap and launch a successful startup.

    AG Grid is the best JavaScript grid in the world. And, as such, it wasn't built in a day (kinda like Rome, which we think is quite promising). If you're not familiar with AG Grid, head over to thinkster.io or check out some of the free workshops that our very own Brian Love has delivered for teaching you AG Grid, from the basics to the most advanced use cases.

    This is an episode of the Angular Show that you don't want to miss, especially if you're eager to be an entrepreneur or if you're considering launching your own company.


    Show notes:
    Article about a story of ag-Grid https://medium.com/ag-grid/why-the-world-needed-another-angularjs-1-x-grid-17e522a53bc8

    Connect with us:
    Niall Crosby - https://www.linkedin.com/in/niallcrosby/?originalSubdomain=uk
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost

  • Let's be honest, most engineers are not good designers. Working closely with product and design teams improves our applications, and is necessary for building a successful product. So, what are design systems and what role do they play to solve this challenge?

    In this episode of the Angular Show, we sit down with our friend Bill Odom. Bill loves Angular and his passion is to share his knowledge with the community, through speaking and teaching. Bill is a trainer at Oasis Digital that provides the popular Angular Bootcamp training. The panelists learn from Bill that design systems enable effective communication, planning, implementation, and ongoing maintenance of user interface and experience between engineering, design, and product development teams.

    You can expect to learn what a design system is, how they are valuable to organizations, some widely used design systems today, integrating design systems with tooling to develop components in isolation such as Storybook, and how design tokens fit into the model. Angular is well-positioned for developing applications using modern tooling, including design tokens, design systems, and more. Don't forget to subscribe so you can follow along with the panelists as they learn from community members like Bill.


    Show Notes:

    Oasis Digital
    https://oasisdigital.com/
    https://oasisdigital.com/training
    https://oasisdigital.com/code-talk-teach/

    Angular and CSS Grid: Get ready to fall in love - ng-conf 2019 - https://youtu.be/lh6n0JxXD_g

    Storybook
    https://storybook.js.org/
    Angular and Storybook, Oasis Digital - Nathan Kerr - https://www.2021.ng-conf.org/workshops/angular-and-storybook,-oasis-digital
    The benefits of a design system - Angular Berlin - Kai Röder - https://youtu.be/mWsNQB0fV38

    Design tokens
    WTF are Design Tokens? - Jina Anne - https://youtu.be/q5qIowMyVt8
    Theo - SalesForce - https://github.com/salesforce-ux/theo
    Style Dictionary - Amazon - https://amzn.github.io/style-dictionary/

    Why Angular is the best framework for a design system - Jan Greger Hemb -
    https://youtu.be/yERBKsNVE60

    Connect with us:
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost
    Jennifer Wadella - @likeOMGitsFEDAY
    Bill Odom - @wnodom

  • We here at the Angular Show strive to deliver fun, newsworthy, and exciting developments in the Angular community. And, while databases may not be something you are familiar with or really have to even worry about, we wanted to take a break from our usual programming to reflect briefly on data persistence. After all, you need to put your user data somewhere, and we don't recommend stuffing everything into localStorage.

    In this episode, panelists Brian Love, Jennifer Wadella, and Aaron Frost welcome Oren Eini, founder of RavenDB, to the Angular Show. Oren teaches us about some of the key decisions around structured vs unstructured databases (or SQL vs NoSQL in hipster developer parlance). With the boom of document-driven unstructured databases, we wanted to learn why you might choose this technology, the pitfalls and benefits, and what are the options out there. Of course, Oren has a bit of a bias for RavenDB, so we'll learn what RavenDB is all about and why it might be a good solution for your Angular application.

    Show Notes
    http://howfuckedismydatabase.com/nosql/
    Shadon: https://www.shodan.io/
    Data Breaches: https://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/
    Israel COVID Stats: https://datadashboard.health.gov.il/COVID-19/general

    Connect with us:
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost
    Jennifer Wadella - @likeOMGitsFEDAY
    Oren Eini - @ayende

  • In the final part of our series on RxJS operators we welcome Zack DeRose, senior engineer at Nrwl, back to the show to learn about multicasting, error handling and utility operators. To kick things off we do a quick recap of hot vs cold Observables, unicast vs multicast, and then the Subject class as well as a few of its child-classes.

    You might be wondering, "What is a multicasted Observable; Why would I want that; and what is the implication for my application?" In short, the multicast operators provide the functionality to create a multicasted Observable (duh! and huh?). The complexity and confusion usually arise around what operators to choose from. Why would I choose publish() over shareReplay()? And, what about ref counting? Don't worry - panelists Aaron Frost, Brian Love, and Jennifer Wadella, along with our esteemed guest Zack, answer these very questions.

    We then go into detail on error handling in RxJS and the various operators for error handling, from catchError() to throwError(), and everything in between. Finally, we talk through various utility operators such as tap() and delay().

    While you don't need to have listened to the first 3 episodes on RxJS operators in this series to enjoy this episode, we do recommend you check them out if you haven't already. Be sure to subscribe so you don't miss a single episode of the Angular Show!

    Show Notes:
    WTF is a cold observable: https://www.youtube.com/watch?v=4btjdWHM6lI&ab_channel=AngularSeattle
    DeRose Hpothesis on Code Complexity: https://www.youtube.com/watch?v=H9EZZDREMEk&t=779s&ab_channel=AngularSeattle
    zackderose.dev
    Multicasting: https://dev.to/bitovi/understanding-multicasting-observables-in-angular-2371

    Connect with us:
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost
    Jennifer Wadella - @likeOMGitsFEDAY
    Zack DeRose - @zackderose

  • The Angular Show welcomes back our friends from Infragistics to talk about their new App Builder prototype as a low-code solution to building Angular applications that integrate seamlessly with their Indigo Design platform. Infragistics is a design and development company that also builds tooling and products to enable developers to build robust applications in .NET and Angular. In this show, we welcome George Abraham and Konstantin Dinev back to the show to teach us about design systems and their low-code solution for Angular.

    We start out by learning about design systems and the importance of using a design system to integrate the UI/UX team with the development workflow. In many organizations, there is a gap between these two teams, and further, making feature iterations and scaling designs across many applications can be difficult and complex. Design systems seek to solve these issues. Infragistics Indigo Design is built with this purpose in mind.

    Infragistics' new App Builder build (see what we did there) on Indigo Design to provide a low-code solution for application prototyping and development. Imagine taking your UI design, building the design and navigation using their cloud solution, and then downloading the resulting Angular application that is ready to go. Now now, you might find this a bit scary being an Angular developer. But, have no fear, the panelists ask the tough questions for you, such as what about the quality, maintainability, and testability of the generated code?? We think you'll be pleasantly surprised to learn what the team at Infragistics is building. Besides, who really enjoys spending hours writing out semantic HTML and CSS?

    Head over to infragistics.com to learn more about Indigo Design and the new App Builder for Angular. Check it out, and let us know what you think!

    Show Notes:
    Indigo Design: https://www.infragistics.com/products/indigo-design
    App Builder: https://www.infragistics.com/products/indigo-design/app-builder
    Indigo Design Feedback: feedback@indigo.design

    Connect with us:
    Brian F Love - @brian_love
    Aaron Frost - @aaronfrost
    Konstantin Dinev - @KonstantinDinev
    George Abraham - @jabberSGA

  • In the final installment of our series on forms, the Angular Show welcomes one of our favorite speakers and expert on forms, our very own panelist, Jennifer Wadella. Jennifer is the Director of Angular Development at Bitovi, a front-end JavaScript consulting firm.

    In the first two installments, we discussed Angular Formly with Bram (better known as Beeman) and Juri Strumpflohner, and then we sat down with Ward Bell to expand our understanding and appreciation for template-driven forms. In this episode, Jennifer will take your knowledge of reactive-driven forms to the next level. To get started, we will broadly discuss the basics of reactive forms and its API; including the AbstractControl, the FormBuilder, and more. We'll then briefly learn about the differences between using the reactive forms API and the template-driven approach. We'll also discuss some more advanced topics, such as the value control accessor and validation. Finally, we'll look at a few of the open issues related to reactive forms and discuss how the API could be improved (ehh hemm, typings).

    If you haven't subscribed to our show, go ahead and do it now. We love this community and we want you to be a part of it! The Angular Show is your home for the latest Angular news, to learn more about Angular, and to meet amazing people in the community.

    Show Notes:
    ngx-typed-forms: https://github.com/Quramy/ngx-typed-forms
    Strong typings: https://github.com/angular/angular/issues/13721
    Andrew’s reply: https://github.com/angular/angular/pull/40772#issuecomment-776456955
    Improvements: https://github.com/angular/angular/issues/31963
    Control touch state observable: https://github.com/angular/angular/issues/10887
    Control.getValidators() is missing: https://github.com/angular/angular/issues/13461
    Input as Observable: https://github.com/angular/angular/issues/5689

    Identity made simple for developers with Auth0 - https://a0.to/youtube
    Demo: How to add user login to an Angular application using Auth0 - https://a0.to/angularSDKqs

    Connect with us:
    Brian Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY
    Aaron Frost - @aaronfrost

  • In part 3 of our series on RxJS operators, the Angular Show panelists Aaron Frost, Jennifer Wadella, and Brian Love, along with our friend Lara Newsom, take a stroll through the filtering operators. The filtering operators enable developers to filter next notifications from an Observable.

    The most logical filtering operator to start with is, well, you guessed it, the filter() operator. From there, we look to the operators that only emit a single next notification: first(), last(), find(), and single(). Most of these operators are fairly straight-forward, and often have an optional predicate that can be provided to determine when the operator returns a new Observable that immediately emits the next notification to the Observer, or to the next operator in the pipe. Moving onward Lara teaches us about the family of take() and skip() operators. We didn't list them out here since we are lazy and don't want to type them all out, plus, you should really just have a listen to the show and subscribe! Ok, phew, now Lara and the panelists talk about the ignoreElement() operator, which like the window() operator, has nothing to do with the DOM. Rounding the final bend in our run through the filtering operators we talk about the family of distinct() operators. And, with a sprint to the finish line, we learn about the audit(), debounce() and simple() operators for rate limiting. Speaking of rate-limiting, this is getting long. But, thankfully, this show on the filtering operators is not that long, plus, you can always expect a good time hanging out with the Angular Show. Enjoy!


    Show Notes:
    https://dev.to/rxjs/debounce-vs-throttle-vs-audit-vs-sample-difference-you-should-know-1f21

    Connect with us:
    Lara Newsom - @LaraNerdsom
    Brian Love - @brian_love
    Jennifer Wadella - @likeOMGitsFEDAY
    Aaron Frost - @aaronfrost

  • 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/angular
    https://astexplorer.net/
    https://github.com/typescript-eslint/tslint-to-eslint-config
    https://github.com/angular-eslint/angular-eslint
    https://twitter.com/cotufa82/status/1355901060636930049

    Connect with us:
    James Henry @mrjameshenry
    Jennifer Wadella @likeOMGitsFEDAY
    Brian Love @brian_love
    Aaron Frost @aaronfrost

  • 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.html

    The 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 Notes
    AbstractControl: https://angular.io/api/forms/AbstractControl

    Connect with us:
    Aaron Frost - @aaronfrost
    Jennifer Wadella - @likeOMGitsFEDAY
    Brian Love - @brian_love
    Ward Bell - @wardbell

  • 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 - @juristr
    Bram Borggreve - @beeman_nl
    Aaron Frost - @aaronfrost
    Jennifer Wadella - @likeOMGitsFEDAY
    Brian Love - @brian_love