TekOnline

Tag: Angular

  • Angular 19 OAUTH2 bearer token interceptor example. (NswagStudio compatible 😎)

    In this article, we’ll explore how to set up an auth interceptor in Angular to automatically add an authorization header to all outgoing HTTP requests. We’ll also discuss how to avoid modifying the generated api.ts file after each API change. Step 1: Set Up the Auth Interceptor First, let’s create the auth interceptor. In the auth.interceptor.ts file, we’ll import…

  • Creating a component and adding it to an existing module.

    Sometimes when creating a component, we want it to exist under a module to keep things structured and so that our app module doesn’t get huge. It can also provide other benefits like lazy module loading and some nice other features. So that others know, the important thing here is that the file name of…

  • 💻 Angular Tip: How to Trigger a Pipe Update with Object Assignments

    💻 Angular Tip: How to Trigger a Pipe Update with Object Assignments

    If you’re building an Angular app that uses pipes to transform data, you may run into a situation where you need to update an object in your component and have the pipe react to the change. But what if the pipe doesn’t update, even though you’ve assigned a new value to the object? 😕 Here’s…

  • Fix for Angular template Autocomplete.

    Fix for Angular template Autocomplete.

    👋 Hey there, Angular developers! Do you use Visual Studio Code as your code editor and find yourself missing out on Angular template intellisense? 😩 Fear not, there’s a simple fix that can help you get the most out of your development experience! One of the reasons why you might not be getting Angular template…

  • Download JSON data dynamically in Angular

    Download JSON data dynamically in Angular

    Here is a quick code snippet that shows how we can download JSON data. This is useful for saving the application ‘state’ kind of like a save feature 📼 I hope this helps you create a component that allows you to save JSON data ✔

  • Angular behind NGINX blank page

    TLDR:- Try your site in edge OR reset your cache like so: Click on the hamburger menu Click settings In the search box enter “cache” You should see the option to “Clear Data” click this! Now you should be fetching all fresh data. And if the issue is resolved, the page should load. Otherwise likely…

  • Leaflet Types for Angular👩‍💻

    When developing angular applications that use leaflet, you can run into some issues. 💣 Perhaps you are trying to import leaflet like this One of the most common issues (perhaps when developing with later versions of angular which use strict typescript rules by default) is you run into an error where you receive the error:…

  • Debugging Angular with VS Code and Firefox

    Everyone has their own preference when it comes to debugging. Here is what has worked well for me! This example is based on a new angular application. If you would like to know how to get started with angular – head over here: https://code.visualstudio.com/docs/nodejs/angular-tutorial If you would like to clone the repo and give it…