I hate angular, fight me.
I have been trying to fix a problem with an angular site I'm co-writing and it's the most annoying and frustrating thing I have ever done, to the point I almost want to give up.
A month ago me and my friend started working on a website which was going relatively and surprisingly well until it didn't. So where did we get stuck? The-fucking-navbar. Sorry for the bad language but it's hard not to feel frustrated after wasting so much time on one thing. We got it all down, it looked cool, had cool animations and had a clean look overall. Then, responsiveness came into question. It was not my first time tackling this annoying task and at first I was making a lot of progress which was honestly a good time. I managed to center the navbar items, change the header height and rearrange the icon for logging in when the width got down to phone size. It was doing it all automatically so my friend reasonably suggested that we make a burger button for the navbar so phone users don't immediately lose half their screen once they open our site. I thought this would be a simple thing to do, but it clearly wasn't.
This is where Angular comes into play. We were and still are using Stackblitz, which made it real easy for us to write and test our code and to also work on separate site elements without breaking what the other person was working on. So until this point angular seemed cool as hecc and probably is for someone who is experienced in it. For me though it was pure frustration. I first tried making a JS script so that the icon that I click would change the class of the header and of the navbar items to “active”. Manually this worked so I only needed this script to work. It didn't. It said that my function “openbtn()” wasn't defined in HeaderComponent which was the Component for our header. I looked this up and after reading through a few StackOverflow articles I still couldn't solve my problem. I tried defining the function in my component.ts file, but the error still persisted, I also tried using controllers and whatever basically was working for people, my script was so simple yet nothing worked. I thought that maybe putting the script path in angular.json would help, but it also didn't and overall nothing worked. After staring at the documentation for angular for any kind of hint for more than two hours and not getting anywhere I kinda gave up. Summer break started, I finally left my school with good grades and was not in the mood to try my luck again.
A few days ago I tried going over the same fixes and posts hoping that I missed something obvious. I even tried to convert some default navbar into what I wanted, but I soon realized that it wasn't what I wanted. I mean, my navbar is perfect, I love the look of it and via css it can transform into a mobile friendly navbar, but I can't automatically do that, because then it would be annoying and would take up half the screen. I have the css classes that work, I have the navbar that works, I just for the love of me can't change the class of an object via button. Hopefully in the future I will make a blog post about how I solved it and how it's all good now, but right now I wasted more than a week on this navbar with no end in sight.
2024 update: Well, it's been almost 3 years and I can confidently say that I'm never touching angular ever again.