TekOnline

Category: Angular

  • 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 prettier splitting HTML tags in VSCode

    Fix for prettier splitting HTML tags in VSCode

    🎉🎉🎉 ng on an Angular application can be a joyous experience, but when prettier starts splitting your HTML tags, it can quickly turn into a nightmare 😱. Fear not, for I have found a solution that will have you dancing 💃 in your chair with joy. After trying a few different settings, it turned out…

  • 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 ✔

  • How to map from one dynamic object to another in typescript 🌏

    I wanted users to be able to select a style from a drop down at GeoJson-Styler (jcianci12.github.io) The user can choose how they want their geoJSON objects styled. at the moment the options are colour, text, and opacity. The classes look as follows: As you can see the text class is different to the other…

  • Angular CSV to JSON 🚗

    Here is a handy little pipe that allows csv to JSON (Usefull for importing CSV files into your angular app)

  • 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…

  • Angular Getters and Setters on @Input() fields

    Here is a handy cheat sheet… I kept forgetting the syntax of when an @input() decorator was used with a setter 🤦‍♂️ Getter Setter The cool thing is that when you set the value of the variable, you can trigger a function call as above 😎

  • 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:…