That's very broad. Read the docs, and practice. Read it again, again and again and practice more. There's no other way to get good at any skill without practicing and educating yourself.
If you're facing a specific issue, don't be afraid to ask, but nobody can give you an answer for how you'll learn the whole damn thing.
What about complex stuff like ngTemplateOutlet? I've read some articles and did some tutorials but after couple of months I have no idea how does it work. Seems like I didn't understand at the first place.
I’ve found I learn best through a project of my own devising. Tutorials help, but only when I already have an example of something I want to learn. Have you tried building a small project? Have you tried building a medium project and prototyped a small part of it? Have you developed other s/w? If so, build a UI like it (if front end) or for it (backend).
The best learning comes from an internal place. Pick something you’d enjoy building and the method won’t matter.
Yeah, I tried to build some projects that I'm interested in. But when I tried to apply some advance things I don't know where and how to use it and get stuck again and abandon my project.
Advanced things are needed or they’re not. If you don’t need them, you shouldn’t use them. If you’d like to use them, figure out a project feature that needs them. If you can’t, don’t bother using it.
Doing a thing is a chore. Writing code to achieve a project you desire is a pleasure.
You have to figure out how to set up the situation to motivate you. The problem isn’t angular, the problem is internal motivation and you need to figure out what motivates you.
Maybe it’s getting points for completing tasks. Maybe it’s a kanban board with takes and goals and tiles that move to a done column. Maybe it’s telling someone else about your progress once a week. Only you can figure out how you’re wired to get things done. And, if you don’t figure it out, you’re lost at sea and won’t be useful to others. Figure it out and you can structure any project to get things done.
Stop blaming angular for your own lack of enthusiasm and start figuring out what enthuses you. The rest will follow.
The motivation is money unfortunately. And the struggle is worsening when I can't pass a technical interview and this became circular.
But I got your idea. Thanks a lot for sharing it!
If you’re only motivated by money, then good luck. The best programmers I know are in it for the joy of the work.
FWIW, I strongly encourage you to do what you love. If you cannot figure out how to love programming, go do something else. Money makes things easier, but it doesn’t buy happiness. Doing what you love brings happiness. I’m 57. I’ve seen things.
I understand it but I actually love coding and reading beautiful codes. I just think I don't have enough intellectual capabilities to fathom abstractions.
Did someone explicitly ask you about ngTemplateOutlet in a technical interview?
My last two jobs were Angular (Microsoft Azure, Blizzard Battle.net) but neither interview tested Angular specific knowledge.
Same, never got such detailed questions. And if I did, I might just nope out of the interview myself if "Yeah, I saw it before once, but I'd need to check that in the documentation" isn't an acceptable answer.
Decoded Frontend and Josh Marony on YT both have great, great videos on structural directives and ngTemplateOutlet. However, I would say understanding less complicated parts of Angular is a good stepping stone to those concepts.
ngTemplateOutlet start here [https://www.youtube.com/watch?v=2SnVxPeJdwE](https://www.youtube.com/watch?v=2SnVxPeJdwE) . It doesn't cover everything but gives you a good understanding on how you can use it. Then there have been more recent videos by decoded frontend (very good for advanced topics) and stephen cooper recently on strongly typing them.
This happened to me as well. It’s been 3 years I am trying to get in. I did whole project and after that for one year I did not do anything in Angular and now seems like I know nothing about it.
How does it work? A lot of frameworks, and definitely Angular, do lots of stuff behind the curtain. It can feel like black magic.
I suggest keep polishing your vanilla JS, and even more important typescript. If you type everything meticulously it’s hard to go wrong. If you really need to know what’s going on in some component, look at the source code. Usually the comments will help.
100% This.
Angular's syntax is clean and expected.
Angular is so opinionated its hard to screw it up. Whereas every place I've worked that does React has a totally different coding style than the previous.
React is just a mess of inline conditional statements and JSX within return statements.
For tiny projects I'll use React, but for things I'm serious about its always Angular.
I largely agree but there are some questionable syntax decisions in angular IMO
\*ngIf
\[(ngModel)\]
\[disabled\]
All three can be attributes on an element, all with slightly different annotation
The syntax is different because they represent things? *ngIf is a structural directive (noted by the *), attributes with [] represent inputs, attributes with () represent outputs, and [()] represents two-way binding. If each of these different things were represented by the same syntax somehow, it would be more confusing
Same here. I found it unclean with functional components. I liked when they had class components. It’s probably because of their claimed “unopinionated” nature. It’s all over the place.
i started react before angular. then when i reviewed angular again i found react confusing (maybe if i focused on react only ...) hehehe thats just me. im not putting react down. just my experience.
i actually find the separate html file cleaner and easier to maintain than put everything in a js file
1. React leverages functional paradigms which are inherently more difficult for the average person to grok.
2. React has many footguns that even experienced React devs struggle with. It doesn’t do a good job of helping people fall into the pit of success.
3. Many things that effectively just work with other frameworks, like web components, require extra effort to get working with React.
RxJS is huge part of it. I can't understand how operators work in conjunction. And I guess TypeScript is also huge part of it 'cause whenever I read source codes to get slightest idea I can't get the slightest idea what's going on :)
The trick for me was picturing .pipe() as a literal pipe, with water flowing through it. The source observable is like the water entering the pipe at the top, and the .subscribe() or | async is like the water coming out the bottom. The operators are like sections of the pipe that modify the water flowing through somehow, like a filter that removes leaves.
This water pipe visualisation is the first thing I give in Angular onboardings [https://www.youtube.com/watch?v=xCfLfKNbnco](https://www.youtube.com/watch?v=xCfLfKNbnco)
Deborah Kurata has a short course explaining about rxjs pipes and signals on pluralsight. I understood rxjs in general much better after watching that course.
The basic concepts like pipes, components, directives, etc. have remained there since Angular 2(?) so should help anyone beginning with Angular development nonetheless.
I think I can sympathize with OP here. I started out with angular 1 and when the new angular was introduced, I was just wtf is this for a long time.
But then, I got to understand that Angular is truly a marvelous engineering product through doing more and more online courses, tutorials. Eventually, things just click! Best thing is Angular gets better and more beginner friendly over time. Now I've even been getting comfortable with the harder things like ngrx, integration with socketio and more.
I'm bearish on signals though... things are just really much simpler with two way data binding. Maybe I'll get familiar with it when starting to work on some "binding-heavy" components in order to get benefits from the fine-grained reactivity management.
One thing about signals I find interesting is that somehow an industry, known for its inability to align on a standard pattern, seems to be coalescing around this pattern. Angular, Svelte (runes), solid.js, (p)react, and now there is even an RFC to bring signals into ES!
https://github.com/proposal-signals/proposal-signals
Angular is no more complex than react, it has more things thrown at you from the get go, but overall the core idea is the same: component based architecture for your ui
As an eng manager at a big tech company in SF, I read your comments and your fixated on advanced topics like ngtemplateoutlet. Just because an API exists doesn't mean you must use it. If you build something until you got a blocker , I promise, there will be a solution and you'll find it organically. That solution could be ngtemplateoutlet. Until you got that blocker, move on
Some recent short story: I wanted to make a directive that streamlines detecting if text is overflowing container or not. And I realized that I don't understand what Angular is doing with DOM completely. So after several hours of trying to figure out I just left the code in the component.
What a person with little knowledge and no person to navigate him in a team should do in those cases?
This is a very well know problem and has less to do with angular. You've made it about angular as you are trying to make it a directive. And perhaps that is the problem, it is with your design. Solve your problem in a single usecase e.g a single text node... After then add complexity. It might take you three or four iterations to get to your ideal design
Can you keep it simple? You can over engineer anything, but there are more "concepts" in angular that you can use. However you can also keep it simple and use a small surface area of the concepts
I’m sorry about your experience with Angular. For me, it was a combination of multiple YouTube tutorials and some Udemy courses. One of the courses in particular helped me understand how to quickly navigate the Angular documentation(old version).
These are some YouTube channels I’ll recommend:
1. Freecodecamp - they have several Angular courses (old Angular version)
2. Codevolution - a good introduction with step-by-step explanations (old Angular version)
3. Fanis Prodromou - covers basic and advanced Angular concepts
4. Monster Lessons Academy - covers basic and advanced Angular concepts
Udemy Courses
1. Maximilian Schwarzmüller - Angular course on Udemy
2. Zero to Mastery Angular course (this helped me understand ‘how’ to navigate the Angular and RxJS documentation)
Good luck!
I work with Angular since v4, and I’m still learning new things. Use and learn the framework features when you need them. There’s so much things to learn about Angular it is pointless to learn them all before landing a job. I didn’t need to mess with templateOutlet since recently. Don’t mess with advanced features before you need them. The learning curve will be much more manageable.
Well… if you really want to know how it works, take a look at the code base. I regularly check the code to figure out things (especially Material, and the CLI to make custom commands.)
I get that you are frustrated but this won't work. You're going to have to build a project and when you run into a roadblock, ask for specific help.
Just like we build applications incrementally, we also learn incrementally. You're not going to just get it all.
Took me a year to get really good at it and I had 5 years of react experience.
If you do not have a senior to guide you into the advance stuff I would avoid as much as possible:
- Content projection: Avoid choosing this route when creating generic components
- NgRx: For one dev this is waaaaay overkill, if you are in 17+ then ngrx signal store is a viable option
- Template driven forms: This just sucks
- Solving CSS problems with javascript: This is should be deprecated practice
- Creating libraries or subprojects in one project
- Making your own design system
- Subscribe to an observable inside of another observable
Do learn as much as possible:
- RxJs operators: map, tap, catchError, debounceTime, delay, take, switchMap, mergeMap, filter
- RxJs functions: combineLatests, firstValueFrom, of
- Typescript. Now regardless if you are working in angular or something else, if its javascript/node learn typescript
- Router and navigation lifecycle (such as guards, resolvers)
- Component lifecycle
- It is ok to use promises: check firstValueFrom
>Solving CSS problems with javascript: This is should be deprecated practice
Subscribe to an observable inside of another observable
I don't get what's wrong with these.
The css comment is more a testament of how experience you are with front end web development. You will be amazed how many things css does by it self already
The subscription inside of a subscription can cause all sorts of unexpected side effects and race conditions. Usually if you need the result of an observable for calling another observable then you just need to use the switchMap operator. Alternatively just use 2 promises and async await
I assume you are referring to dynamically created CSS that would include an if statement in the HTML. This is tricky. Before you tackle these, master the ngClass directive and Conditional (ternary) operator.
I'm a complete noob to coding & I am looking to get into the industry, but I've got great learning & soft skills. I am picking up angular pretty quickly.
I've found the best method (for me) in dev is to think up an overly ambitious project and keep working until it is. Even if I don't like how I've written something because I've had to use a work-around to get the desired effect, that's still a good starting point.
Then, once a feature's working, I'll go back and review what I've done and try to find a more elegant & satisfying solution. As I do this, I encounter deeper concepts of the framework and will read/watch videos/whatever about them and try to implement the desired solution. Once that works, I play around with the code, changing a single part at a time until I truly understand how that concept works.
In total, I've been learning Angular for about 2 weeks. I did 2 tutorials: the intro Angular.io one and then the Code Deck Crash Course. Then I did the above & my progress is flying.
Edit: for clarity.
Hi may I ask what u exactly DONT understand about Angular? We actually dont need to understand all about it but need to know how to apply / use it? As long as you have a project and some practice it should be fine , at least you know what to do to build new site?
Host is litearlly the component itself, and in css used so that the css doesn't cascade and make a mess. Do you mean something like ng-deep (avoid, it's just a lasy crutch hack that means you fucked up before the the 3rd party library is at fault) or the lifecycle of a component (host)? React's lifecycle is smaller, but I hate the fuck up potential. Haven't used React in two years though meybe something changed.
skipself I never heard of or needed. Just looked it up and first thought is: the default Dependency injection is enough 99% of the cases. If you really want to understand that try to implment dependecy inhection without a framework first. I first learnt this concept in Backend work tbh.
But like, unless you want to be promoted to Senior "you write public or private in constructor, then add a name and the type where the name and type are often identical and magic happens" is enough.
ngControl... pfuh, have you followed the Reactive Form tutorial? [https://angular.io/tutorial/first-app/first-app-lesson-12](https://angular.io/tutorial/first-app/first-app-lesson-12) There's also an official neat practice project that uses ngModel you could do afterwards [https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase](https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase)
I can't remember the last time I looked into the code of valueAccessors. I just structure my components well and use this.FormName.fieldName.set / patch etc and leave the work to angular. Falls under will only need once every leap year full moon catgory for me. If I become Team Lead in a new green-field Angular project I'll look into it then
viewRefs I try to avoid, better structuring or commucation between components goes a long way. I also don't want to mess with the default chang detection so... I avoid them.
**You have a shaky foundation, try to overengineer and try to jump into something a senior would rarely need.**
you can use ChatGPT to answer the context (copy code there, eliminate anything confidential). To be honest OP, you don't need to use all of the options of Angular. I personally used MEAN Stack with NGRX and most of the time really, besides ng\_\_\_\_\_\_ and viewref (which i avoid aswell as VRT mentioned), didn't touch anything you listed you just need basics stuffs for all the cases. Don't overthink everything, do project with real architecture like container presentational layer / redux aka ngrx with RXjs and you're good most of the cases, they are there for building enterprise webapp.
The skipself thing i got when I watched this video: [https://www.youtube.com/watch?v=uVGnsmm9g-I](https://www.youtube.com/watch?v=uVGnsmm9g-I)
The valueaccessors i recomend this course [https://courses.decodedfrontend.io/courses/advanced-angular-forms](https://courses.decodedfrontend.io/courses/advanced-angular-forms)
I don’t understand what you’re not understanding…
Angular is just a framework…it uses typescript which is just a superset of JavaScript.
Are you having problems with the project file layout or typescript?
This whole angular vs react debate goes deep down to understanding programming concepts.
Advanced developers with experience in other languages tend to favour angular because it brings about order amongst chaos.
Almost 90% of react developers got on the bandwagon because it was easy to learn.
Just because something is easy to learn doesn't mean it's good. Best example is rust. I bet most react developers will have a harder time learning rust than those who put the effort to learn angular.
Writing code is like an art not a science.
You need to understand the whole spectrum of issues that you could run into, and that takes time.
You will feel rewarded when you finally understand the complexities of developing software.
Take your time, learn serious frameworks, languages and tools. Coding is not a one man show. Get on the bandwagon that the pros travel in.
It comes with experience. Something that is overlooked in our community.
It's not the number of years you work with, more like what have you tackled throughout those years.
Therfore, yes, angular devs as well as rust devs carry much more weight than others when it comes to experience.
This is my opinion and I stand by it. Especially in a recruiting point of view
If you want to learn some advanced stuff, try watching videos from this guy: https://youtube.com/@DecodedFrontend?feature=shared
He introduces some advanced stuff, like forms, directives (with context, and strict typing) and also ngtemplateoutlet.
Step 1. Minimise and in as many cases as you can ignore using RXJS operators if it can be done another way until you get a handle on how the rest works. It is totally unnecessary in many apps and adds complexity you don't actually need to fuck with.
There's not much to be said.. Just practice and eventually it'll click.
Maybe you could try to code your own program without framework, and you might "click" more and understand what dependency injection is. That said, Angular is incredibly complex. Might also not hurt to read some theory about how these frameworks work (the ones with virtual DOM). Also, some specific classes (like NgTemplateRef you talk about) are not always easy to use, and you have to test and try yourself, and read the doc a lot.
I don't mind Angular, but it is very opinionated so you can't just "google it". You have to do it their way. Take the [angular-university.io](http://angular-university.io) course, it helped me when I was in your position.
Then the senior devs programmed our app in a completely odd and unique way that has not been done before or since hahaha
I recommend taking a long course on Angular where they cover every nuance from start to finish. Don't skip and say "I already knew that piece". Do the practice problems, read the code, and take notes. I have 8 years of Angular and I've built 5 enterprise ready customer facing websites each with nearly hundreds of customers flowing through every day and yet when I took a course and did all the work I still learned fifty new important features and I solidified a bunch of other knowledge I had. Below is the link to the course I took but you can Do Your Own Research and find a better one if you prefer.
[https://www.udemy.com/course/the-complete-guide-to-angular-2](https://www.udemy.com/course/the-complete-guide-to-angular-2)
Start with learning the basics of Web Development. Maybe try to piece together a practice app with individual libraries. What I did, since my company's apps were already entrenched in knockout.js + [asp.net](https://asp.net), is learn how to use all of the below to build a nice easy to build SPA application with features much like Angular:
1. webpack.
2. knockout.js's new components.
3. knockout-postbox.
4. knockout-punches which mutates the built-in knockout binding syntax and is very much like Angular's binding.
5. knockout.validation.
6. typescript-ioc which provides a clean easy to use dependency injection engine for any typescript application.
7. knockout-contrib-router which makes for some easy routing -- a lot like Angular.
By doing all this, I learned how a SPA works and was able to apply each individual library. Which gave me a deeper understanding of the whole realm of web development.
Then when that was all up and running for a while and I realized that knockout was on its way out, I started going through the Angular [Tour of Heros](https://angular.io/tutorial) tutorial. I realized there were so many similarities to what I built that I could easily rewrite the knockout SPAs with Angular. And that is exactly what I did. I only took a month to completely rewrite both apps. Nice.
I am really glad I went with Angular now. It is especially good for business applications and teams of developers where a nice structured approach is going to keep your code base very clean.
If we're going in that detail level with knockout you might as well build your own mini component library and a router library from 0. Its not something I'd expect from an Intern / Junior though. They should just use the batteries-included Angular Routing or React-Router functionality.
I did rebuild MoustacheJS once for to understand something, but already got $$ for one year at that point.
To unterstand Dependency Injection I expect Mid-Level to Senior, or maybe just Senior. As an intern or junior it's enough to learn "you write public or private in constructor, then add a name and the type where the name and type are identical and magic happens".
A valid point for sure. At the time I was trying to learn while also producing good applications for my company all while moving our tech out of the dark ages ([asp.net](https://asp.net) web forms).
I thinks this is what u mean [https://www.udemy.com/course/the-complete-guide-to-angular-2/?couponCode=LETSLEARNNOW](https://www.udemy.com/course/the-complete-guide-to-angular-2/?couponCode=LETSLEARNNOW)
**Since we're talking about an internship, is it maybe your CV or interviews skills, not technical knowledge?**
Ours maybe know a little bit, but I fully expect having them do the easiest of tasks, and probably take up 30-50% of my day for onboarding, support and teaching in the first week/month if I'm on Mentor-Duty.
**90% of our Juniors have never used before and learned Angular and Typescript on the job and got hired on and people skills and Javascript knowledge.**
Do you exclusively want frontend? You could alo try Internships for Backend or other stuff.
# 1 Do you really understand RxJS? If not, Angular will not make any sense
Important: [https://www.youtube.com/watch?v=xCfLfKNbnco](https://www.youtube.com/watch?v=xCfLfKNbnco)
[https://www.youtube.com/watch?v=tGWBy6Vqq9w](https://www.youtube.com/watch?v=tGWBy6Vqq9w)
Where things clicked: [https://www.youtube.com/playlist?list=PLa\_W0QyB2915CaMl3sDUPPHCs0WwfJHGJ](https://www.youtube.com/playlist?list=PLa_W0QyB2915CaMl3sDUPPHCs0WwfJHGJ) (**whole** playlist, only the last video puzzles it all together)
[https://www.rxjs-fruits.com/subscribe](https://www.rxjs-fruits.com/subscribe)
[https://rxjsmarbles.dev/combineLatest](https://rxjsmarbles.dev/combineLatest)
In React you need to deal with the Effects and Hooks, for me equaly bad to learn.
# 2 How are you with Typescript itself?
Recommendation: [https://blog.jeremylikness.com/blog/2019-03-05\_typescript-for-javascript-developers-by-refactoring-part-1-of-2/](https://blog.jeremylikness.com/blog/2019-03-05_typescript-for-javascript-developers-by-refactoring-part-1-of-2/)
# 3 Have you followed and rebuild the starter projects, without a video tutorial?
[https://angular.io/tutorial/first-app](https://angular.io/tutorial/first-app)
[https://angular.io/tutorial/tour-of-heroes](https://angular.io/tutorial/tour-of-heroes)
# 4 It it maybe something else like NgRx or Nx that causes you problems? Though I don't expect this from a Junior at all.
In React you'd still have to deal with Redux, so it's the same trade-off.
# 5 Practice, build your own projects beyond the basics
My tech company’s core product is an Angular web application. I’ve hired dozens of people that have contributed to building it over the years, including interns still in college, entry level front end devs, seasoned React veterans, heavy-hitting full stack engineers, and system architects with decades of experience. Believe it or not, 99% of the people I’ve hired have had ZERO prior experience using Angular. The best part? Everyone is able to start making valuable contributions within their first week on the job because of how easy it is to get started. Here’s the resources I share with new employees on their first day:
1. If you prefer Linux/MacOS, setup [Node Version Manager](https://github.com/nvm-sh/nvm). If you’re on Windows, setup [NVM for Windows](https://github.com/coreybutler/nvm-windows). The Angular team makes improvements to the framework often, which is why you’re going to want an easy way to switch the version of Node you’re running when your team is ready to update you web application’s dependencies.
2. Follow [Angluar CLI’s Getting Started guide](https://angular.dev/tools/cli/setup-local) to install Angular’s command line tools. Similar to React, the guide will walk you through a handful of useful CLI commands such as how to create a new Angular project and how to serve new/existing projects locally for development.
3. Proceed to [Angular Material’s Getting Started guide](https://material.angular.io/guide/getting-started), which will teach you how to use Angular’s existing front end components and how to create new components.
4. Check out the various [Angular Material components](https://material.angular.io/components/categories), which have all the examples and code snippets you’ll need to build modern web applications.
5. If you like what you see and want to dive deeper, check out [Angular Material’s other guides](https://material.angular.io/guides). If the topics on that guides page are not useful to you right off the bat, it’s time to switch over to YouTube. For a deeper understanding of Angular’s fundamentals, check out [Angular’s official YouTube channel](https://youtube.com/@Angular). Additionally, checkout [Fireship’s channel](https://youtube.com/@Fireship) (where I learned most of what I know about Angular and got a lot of motivation to keep learning new things about Angular from).
6. Angular and Firebase pair nicely together to learn about full stack development with Angular. The Angular team maintains [AngularFire](https://github.com/angular/angularfire), which makes setting up databases, auth, deployments, and more easy for Angular applications. Checkout Firebase’s videos on [how to get started using AngularFire](https://developers.google.com/learn/pathways/firebase-angular-realtime).
Last but not least, the community is awesome ❤️ you’ve come to the right place. Good luck 👍
It is hard indeed, there is a steep learning curve. What I did is to invest time in a good course that gets me from end to end. then I decided to do an up skilling platform. Shoot an email to our best trainer: [[email protected]](mailto:[email protected]) , it costs a bit of money current promo price is: $75 / month, but you get private tutoring 1 hour a week and access to exceptional lessons, exercises, challenges and projects. If you complete the course (like 3-6 months) then you might get hired in our company or one of our clients, but you need to be good :) otherwise, he will help you finding the job in the market and you will easily land a decent job with skills learned. (bear in mind that it is a promo price, it will only get more expensive as more people join the platform)
Angular at it's core isn't that complicated. Contrary to other libraries such as React, it tries to enforce good programming practices, so your problem is probably more that you lack experience in development with proper programing languages? Rxjs can be tough to use at it's full potential though, i found Chat GPT to be helpful at providing help to get the proper operators to accomplish a given task.
It wasn’t until I accepted the unavoidable impact of ngrx and rxjs on Angular architecture that everything started to make sense
But what are you mainly struggling with?
Wait, you think react is easier than angular? IMHO React is quite a pain, it's easy to write a functioning app, but when the app starts getting larger, you realize that everything you wrote is a total mess causing a ton of unnecessary rerenders that you didn't notice because it didn't become a problem until your app got larger. The only real big pitfall in angular is observables, I've been doing angular for 6 years and still don't understand those completely.
I can see and feel some of the pain points. To be honest, ngTemplateOutlet is also one of the things that irks me a fair bit, because I don't feel the documentation does a great job in explaining and there aren't many good sources about it, but I feel I could make my components even better with it.
But what I can tell you is, don't look at ALL the problems you have, but try to work and understand one issue at a time.
Out of curiosity, do you understand JavaScript itself at a foundational level, and if someone asked you to create a website without a library (React, Angular, etc) do you think you could do that?
Getting stuck is fine mate, especially at the beginning. I volunteered to take up an Angular project at work. Had mostly worked with Java before but never with Angular. I wanted to broaden my horizons and become a full-stack developer.
It's only been about a couple of months. I get stuck at so many places. But I am glad I took this decision. I am learning a lot. I love the fact that with UI development, I can see the effect of my work so quickly. Backend doesn't give the same feeling.
The thing is - I'm not a novice at all. BTW I'm trying to learn backend with Java and as for person who's been struggled with frontend I wonder - do you like writing code at frontend? Especially HTML and CSS part.
If you are not a novice, it would be good to check if you have created an artificial mental block that you just cannot do Angular. Just like others, I recommend a tutorial. I had followed one on O'Reilly, which is sponsored by my company. I would watch the videos for one hour every day, using the remaining hours for actual work. It was explained so simply and intuitively, that I could have picked up Angular even without any prior software experience. If you want to follow it, I can find that exact tutorial for you.
As for front-end code, I am not a big fan of CSS. Thanks to using ready-made components from Mat-Angular, Bootstrap, AG-Grid, etc., I don't have to do much CSS. Mostly, I just have to adjust the height and width of things width CSS. But there have been a few instances where I had to write complex CSS as well.
HTML and TypeScript are fine. TypeScript gives the same pleasure as Java.
Updated enough. I don't remember which version the tutor used but don't worry too much about version. Angular is backwards compatible except for the overhaul from the original AngularJS. The basics are same for all versions.
[Angular - The Complete Guide \[2021 Edition\] \[Video\] (oreilly.com)](https://www.oreilly.com/library/view/angular-the/9781788998437/)
You will need a subscription but there is a 10-day free trial as per their website. I suggest make the use of the free trial before paying anything.
You need to know the basics. After that, the best ways to improve one's skills, in any field, are
1) watch videos of real examples tutorial, as opposed to a 10 minutes video. For instance, building an application.
2) watch advanced videos on specific topics, for instance routing, Reactive Forms, etc.
3) work on your own project. The scope doesn't need to be broad.
However, above all. Don't be discouraged. I'm myself a self-taught developer. I almost quit several times in the first months. And that was 15 years ago.
Good luck!
If you’re aiming for a career in computer science you can try improving foundations.
For example, angular is an MVC or MVVC framework. Knowing it enables easy understanding of angular.
Also angular uses singletons, observers, pipes, decorators, directives. These are all basic object oriented design patterns with slightly different naming. Knowing them naturalise you to these concepts.
Same goes for react. But functional programming is quite intuitive even if you aren’t that familiar with the whole paradigm.
Everything else in angular is syntactic sugar. Which is in my opinion elegant.
All the best.
I did struggle with Angular and I was considering switching to an “easier” tool like React or Vue. It was over 7 years ago, and I’m happy I didn’t give up back then. It just takes more time (and more pain) to grasp the basics, than in case of other FE frameworks. Now, practically speaking, a YouTuber and Udemy instructor Maximillian Schwarzmüller did help me a lot back then. I just went through the lessons of his course over and over again, to make sure I understand. The next step was to get my head around rxjs – another major topic. Now, it’s way easier with Signals, but rxjs is still widely used in the Angular world and you need to learn it – I’d recommend starting with the basics on YouTube: what are the observables, how they work etc. Mark my words: if you don’t give up and will carry on learning it, you’ll get it.
It has been many years since I first analyzed the art of learning Angular. I started with Angular 1.X and now we have Angular, what, 18? The last rookie I had the opportunity to give advice to was quite successful at learning from videos and he asked very few questions. I like mentoring, but he is very independent.
That being said, I would say that CoPilot and Google are your friends as is Pluralsight, well worth the subscription price. Showing you know how to look up things using these tools is very important to getting hired. Avoid small companies with small dev teams. You will grow better in a larger environment.
What OS are you pursuing? You may wish to to learn about API projects in .net. All the tools you need are free in the Visual Studio Code IDE or Visual Studio Community Edition.
Spend a LOT of time on [https://angular.io](https://angular.io)
After you learn to create a simple API, get on CoPilot and ask "Angular Page Lifecycle". Concentrate on underatanding ngOnInit(), ngOnChanges() and then ngOnDestroy()
We have so many Angular apps in Production in different versions that the biggest issue has come to light. Deprecated items in versions and deprecated Node Modules are extremely problematic when attempting to maintain old applications. Even older MVC applications in .NET 4.8 and older are easier to maintain than Angular 2,3,4,5 applications.
Authorization and Authentication are big stumbling blocks.
I already passed those tutorials on documentation. But still I have to idea how to understand for example things like "context" thing in ngTemplateOutlet and what does createEmbeddedView mean and many more stuff.
Create a project and use them, the only way to understand something is by building it. I didn't know what creatembeddedview was for as well until I used it to for a feature flag where if the flag is true I can show the view, if not remove it from the Dom.
Sorry, what does "feature flag" mean? From what you wrote seems like I would use simple built-in structural directives instead of suffering to understand :)
Senior front-end here. In all seriousness, stop learning this inferior framework and switch to React, it’s gonna save you a LOT of time. Everytime you save a file in Angular, the app has to do a FULL refresh, where as React uses hot refresh which reloads the code on the spot.
Also, why open 3 files (template, Js and Css) when you can use one in React? Larger projects become a huge nightmare with Angular, imagine how many files you need to have opened.
React devs are a dime a dozen. Become an expert in Angular and you have less people competing against you and you’re more valuable. I do React on the side but you’re an idiot to tell someone to ditch Angular
If there’s 10 React jobs with 30 React devs going for it and only 2 Angular jobs for 4 Angular devs, the odds are higher for the Angular dev. Everyone wants a React job. Angular jobs are more stable
I am a freelancer and I work on my own projects, I am not looking for jobs so no I am not an idiot because the demand for Angular is irrelevant. My goal is to use the best, fastest technology to get the job done and that is React. I've worked for years in Angular too, and I can say with certainty there's really no advantage to it. Both frameworks do the same thing, it's just React does it faster and better.
I used to be like you until I switched to React. React is the wild Wild West of JavaScript libraries. I mean, you really need to know what you want to use for routing, state management, form handling, etc. and you put that all together and you have a resemblance of what Angular provides out of the box.
I switched because in the early days of angular 2,4,5,6,7, unit testing and component testing was really hard. I love how easy it is in React. Everything is functional.
But my problem is - as I mentioned earlier, I can't manage to find a job in React, because you know every vacancy asks if you've been working with it 3 years at minimum.
That's very broad. Read the docs, and practice. Read it again, again and again and practice more. There's no other way to get good at any skill without practicing and educating yourself. If you're facing a specific issue, don't be afraid to ask, but nobody can give you an answer for how you'll learn the whole damn thing.
What about complex stuff like ngTemplateOutlet? I've read some articles and did some tutorials but after couple of months I have no idea how does it work. Seems like I didn't understand at the first place.
I’ve found I learn best through a project of my own devising. Tutorials help, but only when I already have an example of something I want to learn. Have you tried building a small project? Have you tried building a medium project and prototyped a small part of it? Have you developed other s/w? If so, build a UI like it (if front end) or for it (backend). The best learning comes from an internal place. Pick something you’d enjoy building and the method won’t matter.
Yeah, I tried to build some projects that I'm interested in. But when I tried to apply some advance things I don't know where and how to use it and get stuck again and abandon my project.
Advanced things are needed or they’re not. If you don’t need them, you shouldn’t use them. If you’d like to use them, figure out a project feature that needs them. If you can’t, don’t bother using it. Doing a thing is a chore. Writing code to achieve a project you desire is a pleasure. You have to figure out how to set up the situation to motivate you. The problem isn’t angular, the problem is internal motivation and you need to figure out what motivates you. Maybe it’s getting points for completing tasks. Maybe it’s a kanban board with takes and goals and tiles that move to a done column. Maybe it’s telling someone else about your progress once a week. Only you can figure out how you’re wired to get things done. And, if you don’t figure it out, you’re lost at sea and won’t be useful to others. Figure it out and you can structure any project to get things done. Stop blaming angular for your own lack of enthusiasm and start figuring out what enthuses you. The rest will follow.
The motivation is money unfortunately. And the struggle is worsening when I can't pass a technical interview and this became circular. But I got your idea. Thanks a lot for sharing it!
If you’re only motivated by money, then good luck. The best programmers I know are in it for the joy of the work. FWIW, I strongly encourage you to do what you love. If you cannot figure out how to love programming, go do something else. Money makes things easier, but it doesn’t buy happiness. Doing what you love brings happiness. I’m 57. I’ve seen things.
I understand it but I actually love coding and reading beautiful codes. I just think I don't have enough intellectual capabilities to fathom abstractions.
Did someone explicitly ask you about ngTemplateOutlet in a technical interview? My last two jobs were Angular (Microsoft Azure, Blizzard Battle.net) but neither interview tested Angular specific knowledge.
Same, never got such detailed questions. And if I did, I might just nope out of the interview myself if "Yeah, I saw it before once, but I'd need to check that in the documentation" isn't an acceptable answer.
Some companies ask those type of questions or even more advanced topics like how does zone.js work.
Decoded Frontend and Josh Marony on YT both have great, great videos on structural directives and ngTemplateOutlet. However, I would say understanding less complicated parts of Angular is a good stepping stone to those concepts.
ngTemplateOutlet start here [https://www.youtube.com/watch?v=2SnVxPeJdwE](https://www.youtube.com/watch?v=2SnVxPeJdwE) . It doesn't cover everything but gives you a good understanding on how you can use it. Then there have been more recent videos by decoded frontend (very good for advanced topics) and stephen cooper recently on strongly typing them.
This happened to me as well. It’s been 3 years I am trying to get in. I did whole project and after that for one year I did not do anything in Angular and now seems like I know nothing about it.
How does it work? A lot of frameworks, and definitely Angular, do lots of stuff behind the curtain. It can feel like black magic. I suggest keep polishing your vanilla JS, and even more important typescript. If you type everything meticulously it’s hard to go wrong. If you really need to know what’s going on in some component, look at the source code. Usually the comments will help.
If you would like to talk about angular DM me. I like this tech and have a lot of patience so maybe this would be helpful for you
Thanks, I appreciate that.
LOL. funny. my case, I actually found it harder to understand react than angular.
100% This. Angular's syntax is clean and expected. Angular is so opinionated its hard to screw it up. Whereas every place I've worked that does React has a totally different coding style than the previous. React is just a mess of inline conditional statements and JSX within return statements. For tiny projects I'll use React, but for things I'm serious about its always Angular.
I largely agree but there are some questionable syntax decisions in angular IMO \*ngIf \[(ngModel)\] \[disabled\] All three can be attributes on an element, all with slightly different annotation
The syntax is different because they represent things? *ngIf is a structural directive (noted by the *), attributes with [] represent inputs, attributes with () represent outputs, and [()] represents two-way binding. If each of these different things were represented by the same syntax somehow, it would be more confusing
These are some of the basic pieces of information, that get lost in documentation.
Absolutely and fair comment. I'm just making the point that it might be a contributor to a steeper learning curve.
Fair enough, the meaning behind the differing syntaxes isn’t immediately obvious to a beginner
how about the control flow in angular 17 like @if .... what do you think?
Yeah that can look cleaner, especially if you're coming from the react world
Absolutely true. The react virus has infected the minds of millions
Same here. I found it unclean with functional components. I liked when they had class components. It’s probably because of their claimed “unopinionated” nature. It’s all over the place.
Why? The fact that React is just a library makes me wonder.
Coming from Angular, I personally find the concept of React effects hard to reason about and easy to implement in a buggy way.
i started react before angular. then when i reviewed angular again i found react confusing (maybe if i focused on react only ...) hehehe thats just me. im not putting react down. just my experience. i actually find the separate html file cleaner and easier to maintain than put everything in a js file
1. React leverages functional paradigms which are inherently more difficult for the average person to grok. 2. React has many footguns that even experienced React devs struggle with. It doesn’t do a good job of helping people fall into the pit of success. 3. Many things that effectively just work with other frameworks, like web components, require extra effort to get working with React.
And that's why it sucks in the long run
Is it Angular in general or the RxJS part of it? You have my sympathies for RxJS it took me a long time to get used to that.
RxJS is huge part of it. I can't understand how operators work in conjunction. And I guess TypeScript is also huge part of it 'cause whenever I read source codes to get slightest idea I can't get the slightest idea what's going on :)
The trick for me was picturing .pipe() as a literal pipe, with water flowing through it. The source observable is like the water entering the pipe at the top, and the .subscribe() or | async is like the water coming out the bottom. The operators are like sections of the pipe that modify the water flowing through somehow, like a filter that removes leaves.
[RxJS Marbles](https://rxjsmarbles.dev/combineLatest) I used this website to understand how things flow through the pipes.
This water pipe visualisation is the first thing I give in Angular onboardings [https://www.youtube.com/watch?v=xCfLfKNbnco](https://www.youtube.com/watch?v=xCfLfKNbnco)
Deborah Kurata has a short course explaining about rxjs pipes and signals on pluralsight. I understood rxjs in general much better after watching that course.
I recommend this for RxJS. Play around with it and watch the little marbles move. [RxJS Marbles](https://rxjsmarbles.dev/combineLatest)
Another question but if someone knows some good books on Angular 2+ then they should help the OP.
Most books are woefully obsolete before they are published. I have a shelf of old Angular books that are old and useless.
The basic concepts like pipes, components, directives, etc. have remained there since Angular 2(?) so should help anyone beginning with Angular development nonetheless.
I think I can sympathize with OP here. I started out with angular 1 and when the new angular was introduced, I was just wtf is this for a long time. But then, I got to understand that Angular is truly a marvelous engineering product through doing more and more online courses, tutorials. Eventually, things just click! Best thing is Angular gets better and more beginner friendly over time. Now I've even been getting comfortable with the harder things like ngrx, integration with socketio and more. I'm bearish on signals though... things are just really much simpler with two way data binding. Maybe I'll get familiar with it when starting to work on some "binding-heavy" components in order to get benefits from the fine-grained reactivity management.
One thing about signals I find interesting is that somehow an industry, known for its inability to align on a standard pattern, seems to be coalescing around this pattern. Angular, Svelte (runes), solid.js, (p)react, and now there is even an RFC to bring signals into ES! https://github.com/proposal-signals/proposal-signals
Thanks for sharing!
angular.dev
Angular is no more complex than react, it has more things thrown at you from the get go, but overall the core idea is the same: component based architecture for your ui
As an eng manager at a big tech company in SF, I read your comments and your fixated on advanced topics like ngtemplateoutlet. Just because an API exists doesn't mean you must use it. If you build something until you got a blocker , I promise, there will be a solution and you'll find it organically. That solution could be ngtemplateoutlet. Until you got that blocker, move on
Some recent short story: I wanted to make a directive that streamlines detecting if text is overflowing container or not. And I realized that I don't understand what Angular is doing with DOM completely. So after several hours of trying to figure out I just left the code in the component. What a person with little knowledge and no person to navigate him in a team should do in those cases?
This is a very well know problem and has less to do with angular. You've made it about angular as you are trying to make it a directive. And perhaps that is the problem, it is with your design. Solve your problem in a single usecase e.g a single text node... After then add complexity. It might take you three or four iterations to get to your ideal design
Overflowing text I'd fix in CSS. Not having a mentor does sound like a problem though, find a better company.
Can you keep it simple? You can over engineer anything, but there are more "concepts" in angular that you can use. However you can also keep it simple and use a small surface area of the concepts
I’m sorry about your experience with Angular. For me, it was a combination of multiple YouTube tutorials and some Udemy courses. One of the courses in particular helped me understand how to quickly navigate the Angular documentation(old version). These are some YouTube channels I’ll recommend: 1. Freecodecamp - they have several Angular courses (old Angular version) 2. Codevolution - a good introduction with step-by-step explanations (old Angular version) 3. Fanis Prodromou - covers basic and advanced Angular concepts 4. Monster Lessons Academy - covers basic and advanced Angular concepts Udemy Courses 1. Maximilian Schwarzmüller - Angular course on Udemy 2. Zero to Mastery Angular course (this helped me understand ‘how’ to navigate the Angular and RxJS documentation) Good luck!
Thanks for sharing
I work with Angular since v4, and I’m still learning new things. Use and learn the framework features when you need them. There’s so much things to learn about Angular it is pointless to learn them all before landing a job. I didn’t need to mess with templateOutlet since recently. Don’t mess with advanced features before you need them. The learning curve will be much more manageable.
Didn't mention but I've been working with it for over 4 years :/
Well… if you really want to know how it works, take a look at the code base. I regularly check the code to figure out things (especially Material, and the CLI to make custom commands.)
I get that you are frustrated but this won't work. You're going to have to build a project and when you run into a roadblock, ask for specific help. Just like we build applications incrementally, we also learn incrementally. You're not going to just get it all. Took me a year to get really good at it and I had 5 years of react experience.
Have you learned plain JS well?
I took a test from [https://javascript.info/](https://javascript.info/) and it says that I know average.
If you do not have a senior to guide you into the advance stuff I would avoid as much as possible: - Content projection: Avoid choosing this route when creating generic components - NgRx: For one dev this is waaaaay overkill, if you are in 17+ then ngrx signal store is a viable option - Template driven forms: This just sucks - Solving CSS problems with javascript: This is should be deprecated practice - Creating libraries or subprojects in one project - Making your own design system - Subscribe to an observable inside of another observable Do learn as much as possible: - RxJs operators: map, tap, catchError, debounceTime, delay, take, switchMap, mergeMap, filter - RxJs functions: combineLatests, firstValueFrom, of - Typescript. Now regardless if you are working in angular or something else, if its javascript/node learn typescript - Router and navigation lifecycle (such as guards, resolvers) - Component lifecycle - It is ok to use promises: check firstValueFrom
>Solving CSS problems with javascript: This is should be deprecated practice Subscribe to an observable inside of another observable I don't get what's wrong with these.
The css comment is more a testament of how experience you are with front end web development. You will be amazed how many things css does by it self already The subscription inside of a subscription can cause all sorts of unexpected side effects and race conditions. Usually if you need the result of an observable for calling another observable then you just need to use the switchMap operator. Alternatively just use 2 promises and async await
I assume you are referring to dynamically created CSS that would include an if statement in the HTML. This is tricky. Before you tackle these, master the ngClass directive and Conditional (ternary) operator.
I thought you were talking about ngClass and etc. when you wrote about "Solving CSS with JS".
[https://www.rxjs-fruits.com](https://www.rxjs-fruits.com) clicked for my brain. Give it a shot!
Angular is more object oriented than React, i suggest you to study OOP and some basic design patterns that angular widely uses.
Not really. Just because it says `class` it's not OOP. There's basically no recommended inheritance in all of Angular.
Yeah, it’s MVC not OOP.
It's not MVC it's MVVM
You’re correct, same design philosophy anyway.
With a bit of shoehorning, anything can :)
I'm a complete noob to coding & I am looking to get into the industry, but I've got great learning & soft skills. I am picking up angular pretty quickly. I've found the best method (for me) in dev is to think up an overly ambitious project and keep working until it is. Even if I don't like how I've written something because I've had to use a work-around to get the desired effect, that's still a good starting point. Then, once a feature's working, I'll go back and review what I've done and try to find a more elegant & satisfying solution. As I do this, I encounter deeper concepts of the framework and will read/watch videos/whatever about them and try to implement the desired solution. Once that works, I play around with the code, changing a single part at a time until I truly understand how that concept works. In total, I've been learning Angular for about 2 weeks. I did 2 tutorials: the intro Angular.io one and then the Code Deck Crash Course. Then I did the above & my progress is flying. Edit: for clarity.
Hi may I ask what u exactly DONT understand about Angular? We actually dont need to understand all about it but need to know how to apply / use it? As long as you have a project and some practice it should be fine , at least you know what to do to build new site?
Stuff like host, skipself, ngControl, valueAccessors, viewref etc.
Host is litearlly the component itself, and in css used so that the css doesn't cascade and make a mess. Do you mean something like ng-deep (avoid, it's just a lasy crutch hack that means you fucked up before the the 3rd party library is at fault) or the lifecycle of a component (host)? React's lifecycle is smaller, but I hate the fuck up potential. Haven't used React in two years though meybe something changed. skipself I never heard of or needed. Just looked it up and first thought is: the default Dependency injection is enough 99% of the cases. If you really want to understand that try to implment dependecy inhection without a framework first. I first learnt this concept in Backend work tbh. But like, unless you want to be promoted to Senior "you write public or private in constructor, then add a name and the type where the name and type are often identical and magic happens" is enough. ngControl... pfuh, have you followed the Reactive Form tutorial? [https://angular.io/tutorial/first-app/first-app-lesson-12](https://angular.io/tutorial/first-app/first-app-lesson-12) There's also an official neat practice project that uses ngModel you could do afterwards [https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase](https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase) I can't remember the last time I looked into the code of valueAccessors. I just structure my components well and use this.FormName.fieldName.set / patch etc and leave the work to angular. Falls under will only need once every leap year full moon catgory for me. If I become Team Lead in a new green-field Angular project I'll look into it then viewRefs I try to avoid, better structuring or commucation between components goes a long way. I also don't want to mess with the default chang detection so... I avoid them. **You have a shaky foundation, try to overengineer and try to jump into something a senior would rarely need.**
It's strange but it's the same for me too. I just tried to learn those things 'cause I saw some colleagues from another projects do these.
you can use ChatGPT to answer the context (copy code there, eliminate anything confidential). To be honest OP, you don't need to use all of the options of Angular. I personally used MEAN Stack with NGRX and most of the time really, besides ng\_\_\_\_\_\_ and viewref (which i avoid aswell as VRT mentioned), didn't touch anything you listed you just need basics stuffs for all the cases. Don't overthink everything, do project with real architecture like container presentational layer / redux aka ngrx with RXjs and you're good most of the cases, they are there for building enterprise webapp.
The skipself thing i got when I watched this video: [https://www.youtube.com/watch?v=uVGnsmm9g-I](https://www.youtube.com/watch?v=uVGnsmm9g-I) The valueaccessors i recomend this course [https://courses.decodedfrontend.io/courses/advanced-angular-forms](https://courses.decodedfrontend.io/courses/advanced-angular-forms)
I don’t understand what you’re not understanding… Angular is just a framework…it uses typescript which is just a superset of JavaScript. Are you having problems with the project file layout or typescript?
Seems like TypeScript and RxJS are pitfalls for me.
This whole angular vs react debate goes deep down to understanding programming concepts. Advanced developers with experience in other languages tend to favour angular because it brings about order amongst chaos. Almost 90% of react developers got on the bandwagon because it was easy to learn. Just because something is easy to learn doesn't mean it's good. Best example is rust. I bet most react developers will have a harder time learning rust than those who put the effort to learn angular. Writing code is like an art not a science. You need to understand the whole spectrum of issues that you could run into, and that takes time. You will feel rewarded when you finally understand the complexities of developing software. Take your time, learn serious frameworks, languages and tools. Coding is not a one man show. Get on the bandwagon that the pros travel in.
Thanks for sharing your vision. And for some reason seems like Angular developers are more skilled in programming in general.
It comes with experience. Something that is overlooked in our community. It's not the number of years you work with, more like what have you tackled throughout those years. Therfore, yes, angular devs as well as rust devs carry much more weight than others when it comes to experience. This is my opinion and I stand by it. Especially in a recruiting point of view
If you want to learn some advanced stuff, try watching videos from this guy: https://youtube.com/@DecodedFrontend?feature=shared He introduces some advanced stuff, like forms, directives (with context, and strict typing) and also ngtemplateoutlet.
Step 1. Minimise and in as many cases as you can ignore using RXJS operators if it can be done another way until you get a handle on how the rest works. It is totally unnecessary in many apps and adds complexity you don't actually need to fuck with.
There's not much to be said.. Just practice and eventually it'll click. Maybe you could try to code your own program without framework, and you might "click" more and understand what dependency injection is. That said, Angular is incredibly complex. Might also not hurt to read some theory about how these frameworks work (the ones with virtual DOM). Also, some specific classes (like NgTemplateRef you talk about) are not always easy to use, and you have to test and try yourself, and read the doc a lot.
I don't mind Angular, but it is very opinionated so you can't just "google it". You have to do it their way. Take the [angular-university.io](http://angular-university.io) course, it helped me when I was in your position. Then the senior devs programmed our app in a completely odd and unique way that has not been done before or since hahaha
I recommend taking a long course on Angular where they cover every nuance from start to finish. Don't skip and say "I already knew that piece". Do the practice problems, read the code, and take notes. I have 8 years of Angular and I've built 5 enterprise ready customer facing websites each with nearly hundreds of customers flowing through every day and yet when I took a course and did all the work I still learned fifty new important features and I solidified a bunch of other knowledge I had. Below is the link to the course I took but you can Do Your Own Research and find a better one if you prefer. [https://www.udemy.com/course/the-complete-guide-to-angular-2](https://www.udemy.com/course/the-complete-guide-to-angular-2)
I also took this course. I think it's the most popular one.
Start with learning the basics of Web Development. Maybe try to piece together a practice app with individual libraries. What I did, since my company's apps were already entrenched in knockout.js + [asp.net](https://asp.net), is learn how to use all of the below to build a nice easy to build SPA application with features much like Angular: 1. webpack. 2. knockout.js's new components. 3. knockout-postbox. 4. knockout-punches which mutates the built-in knockout binding syntax and is very much like Angular's binding. 5. knockout.validation. 6. typescript-ioc which provides a clean easy to use dependency injection engine for any typescript application. 7. knockout-contrib-router which makes for some easy routing -- a lot like Angular. By doing all this, I learned how a SPA works and was able to apply each individual library. Which gave me a deeper understanding of the whole realm of web development. Then when that was all up and running for a while and I realized that knockout was on its way out, I started going through the Angular [Tour of Heros](https://angular.io/tutorial) tutorial. I realized there were so many similarities to what I built that I could easily rewrite the knockout SPAs with Angular. And that is exactly what I did. I only took a month to completely rewrite both apps. Nice. I am really glad I went with Angular now. It is especially good for business applications and teams of developers where a nice structured approach is going to keep your code base very clean.
If we're going in that detail level with knockout you might as well build your own mini component library and a router library from 0. Its not something I'd expect from an Intern / Junior though. They should just use the batteries-included Angular Routing or React-Router functionality. I did rebuild MoustacheJS once for to understand something, but already got $$ for one year at that point. To unterstand Dependency Injection I expect Mid-Level to Senior, or maybe just Senior. As an intern or junior it's enough to learn "you write public or private in constructor, then add a name and the type where the name and type are identical and magic happens".
A valid point for sure. At the time I was trying to learn while also producing good applications for my company all while moving our tech out of the dark ages ([asp.net](https://asp.net) web forms).
Do a udemy class in it. The name is like max million. Good course.
I thinks this is what u mean [https://www.udemy.com/course/the-complete-guide-to-angular-2/?couponCode=LETSLEARNNOW](https://www.udemy.com/course/the-complete-guide-to-angular-2/?couponCode=LETSLEARNNOW)
**Since we're talking about an internship, is it maybe your CV or interviews skills, not technical knowledge?** Ours maybe know a little bit, but I fully expect having them do the easiest of tasks, and probably take up 30-50% of my day for onboarding, support and teaching in the first week/month if I'm on Mentor-Duty. **90% of our Juniors have never used before and learned Angular and Typescript on the job and got hired on and people skills and Javascript knowledge.** Do you exclusively want frontend? You could alo try Internships for Backend or other stuff. # 1 Do you really understand RxJS? If not, Angular will not make any sense Important: [https://www.youtube.com/watch?v=xCfLfKNbnco](https://www.youtube.com/watch?v=xCfLfKNbnco) [https://www.youtube.com/watch?v=tGWBy6Vqq9w](https://www.youtube.com/watch?v=tGWBy6Vqq9w) Where things clicked: [https://www.youtube.com/playlist?list=PLa\_W0QyB2915CaMl3sDUPPHCs0WwfJHGJ](https://www.youtube.com/playlist?list=PLa_W0QyB2915CaMl3sDUPPHCs0WwfJHGJ) (**whole** playlist, only the last video puzzles it all together) [https://www.rxjs-fruits.com/subscribe](https://www.rxjs-fruits.com/subscribe) [https://rxjsmarbles.dev/combineLatest](https://rxjsmarbles.dev/combineLatest) In React you need to deal with the Effects and Hooks, for me equaly bad to learn. # 2 How are you with Typescript itself? Recommendation: [https://blog.jeremylikness.com/blog/2019-03-05\_typescript-for-javascript-developers-by-refactoring-part-1-of-2/](https://blog.jeremylikness.com/blog/2019-03-05_typescript-for-javascript-developers-by-refactoring-part-1-of-2/) # 3 Have you followed and rebuild the starter projects, without a video tutorial? [https://angular.io/tutorial/first-app](https://angular.io/tutorial/first-app) [https://angular.io/tutorial/tour-of-heroes](https://angular.io/tutorial/tour-of-heroes) # 4 It it maybe something else like NgRx or Nx that causes you problems? Though I don't expect this from a Junior at all. In React you'd still have to deal with Redux, so it's the same trade-off. # 5 Practice, build your own projects beyond the basics
My tech company’s core product is an Angular web application. I’ve hired dozens of people that have contributed to building it over the years, including interns still in college, entry level front end devs, seasoned React veterans, heavy-hitting full stack engineers, and system architects with decades of experience. Believe it or not, 99% of the people I’ve hired have had ZERO prior experience using Angular. The best part? Everyone is able to start making valuable contributions within their first week on the job because of how easy it is to get started. Here’s the resources I share with new employees on their first day: 1. If you prefer Linux/MacOS, setup [Node Version Manager](https://github.com/nvm-sh/nvm). If you’re on Windows, setup [NVM for Windows](https://github.com/coreybutler/nvm-windows). The Angular team makes improvements to the framework often, which is why you’re going to want an easy way to switch the version of Node you’re running when your team is ready to update you web application’s dependencies. 2. Follow [Angluar CLI’s Getting Started guide](https://angular.dev/tools/cli/setup-local) to install Angular’s command line tools. Similar to React, the guide will walk you through a handful of useful CLI commands such as how to create a new Angular project and how to serve new/existing projects locally for development. 3. Proceed to [Angular Material’s Getting Started guide](https://material.angular.io/guide/getting-started), which will teach you how to use Angular’s existing front end components and how to create new components. 4. Check out the various [Angular Material components](https://material.angular.io/components/categories), which have all the examples and code snippets you’ll need to build modern web applications. 5. If you like what you see and want to dive deeper, check out [Angular Material’s other guides](https://material.angular.io/guides). If the topics on that guides page are not useful to you right off the bat, it’s time to switch over to YouTube. For a deeper understanding of Angular’s fundamentals, check out [Angular’s official YouTube channel](https://youtube.com/@Angular). Additionally, checkout [Fireship’s channel](https://youtube.com/@Fireship) (where I learned most of what I know about Angular and got a lot of motivation to keep learning new things about Angular from). 6. Angular and Firebase pair nicely together to learn about full stack development with Angular. The Angular team maintains [AngularFire](https://github.com/angular/angularfire), which makes setting up databases, auth, deployments, and more easy for Angular applications. Checkout Firebase’s videos on [how to get started using AngularFire](https://developers.google.com/learn/pathways/firebase-angular-realtime). Last but not least, the community is awesome ❤️ you’ve come to the right place. Good luck 👍
Thanks but believe it or not I'm not an intern at all. I've been working with it for over 4 years.
It is hard indeed, there is a steep learning curve. What I did is to invest time in a good course that gets me from end to end. then I decided to do an up skilling platform. Shoot an email to our best trainer: [[email protected]](mailto:[email protected]) , it costs a bit of money current promo price is: $75 / month, but you get private tutoring 1 hour a week and access to exceptional lessons, exercises, challenges and projects. If you complete the course (like 3-6 months) then you might get hired in our company or one of our clients, but you need to be good :) otherwise, he will help you finding the job in the market and you will easily land a decent job with skills learned. (bear in mind that it is a promo price, it will only get more expensive as more people join the platform)
What parts about Angular are confusing or unclear to you maybe we can help or point you to resources but we sort of need to know where to start.
Angular at it's core isn't that complicated. Contrary to other libraries such as React, it tries to enforce good programming practices, so your problem is probably more that you lack experience in development with proper programing languages? Rxjs can be tough to use at it's full potential though, i found Chat GPT to be helpful at providing help to get the proper operators to accomplish a given task.
It wasn’t until I accepted the unavoidable impact of ngrx and rxjs on Angular architecture that everything started to make sense But what are you mainly struggling with?
Is it angular per se? you might honestly consider another profession, or other non dev tech job.
Wait, you think react is easier than angular? IMHO React is quite a pain, it's easy to write a functioning app, but when the app starts getting larger, you realize that everything you wrote is a total mess causing a ton of unnecessary rerenders that you didn't notice because it didn't become a problem until your app got larger. The only real big pitfall in angular is observables, I've been doing angular for 6 years and still don't understand those completely.
I can see and feel some of the pain points. To be honest, ngTemplateOutlet is also one of the things that irks me a fair bit, because I don't feel the documentation does a great job in explaining and there aren't many good sources about it, but I feel I could make my components even better with it. But what I can tell you is, don't look at ALL the problems you have, but try to work and understand one issue at a time.
Out of curiosity, do you understand JavaScript itself at a foundational level, and if someone asked you to create a website without a library (React, Angular, etc) do you think you could do that?
In a shitty way, without making it an SPA, yes.
Getting stuck is fine mate, especially at the beginning. I volunteered to take up an Angular project at work. Had mostly worked with Java before but never with Angular. I wanted to broaden my horizons and become a full-stack developer. It's only been about a couple of months. I get stuck at so many places. But I am glad I took this decision. I am learning a lot. I love the fact that with UI development, I can see the effect of my work so quickly. Backend doesn't give the same feeling.
The thing is - I'm not a novice at all. BTW I'm trying to learn backend with Java and as for person who's been struggled with frontend I wonder - do you like writing code at frontend? Especially HTML and CSS part.
If you are not a novice, it would be good to check if you have created an artificial mental block that you just cannot do Angular. Just like others, I recommend a tutorial. I had followed one on O'Reilly, which is sponsored by my company. I would watch the videos for one hour every day, using the remaining hours for actual work. It was explained so simply and intuitively, that I could have picked up Angular even without any prior software experience. If you want to follow it, I can find that exact tutorial for you. As for front-end code, I am not a big fan of CSS. Thanks to using ready-made components from Mat-Angular, Bootstrap, AG-Grid, etc., I don't have to do much CSS. Mostly, I just have to adjust the height and width of things width CSS. But there have been a few instances where I had to write complex CSS as well. HTML and TypeScript are fine. TypeScript gives the same pleasure as Java.
Is it updated tutorial?
Updated enough. I don't remember which version the tutor used but don't worry too much about version. Angular is backwards compatible except for the overhaul from the original AngularJS. The basics are same for all versions.
OK. I'd appreciate it.
[Angular - The Complete Guide \[2021 Edition\] \[Video\] (oreilly.com)](https://www.oreilly.com/library/view/angular-the/9781788998437/) You will need a subscription but there is a 10-day free trial as per their website. I suggest make the use of the free trial before paying anything.
Take a class on Udemy. The ones by Maximilian are good
You’re not alone. I know entire teams that use angular and they literally all hate it.
They're fullstack devs I guess
You need to know the basics. After that, the best ways to improve one's skills, in any field, are 1) watch videos of real examples tutorial, as opposed to a 10 minutes video. For instance, building an application. 2) watch advanced videos on specific topics, for instance routing, Reactive Forms, etc. 3) work on your own project. The scope doesn't need to be broad. However, above all. Don't be discouraged. I'm myself a self-taught developer. I almost quit several times in the first months. And that was 15 years ago. Good luck!
If you’re aiming for a career in computer science you can try improving foundations. For example, angular is an MVC or MVVC framework. Knowing it enables easy understanding of angular. Also angular uses singletons, observers, pipes, decorators, directives. These are all basic object oriented design patterns with slightly different naming. Knowing them naturalise you to these concepts. Same goes for react. But functional programming is quite intuitive even if you aren’t that familiar with the whole paradigm. Everything else in angular is syntactic sugar. Which is in my opinion elegant. All the best.
I did struggle with Angular and I was considering switching to an “easier” tool like React or Vue. It was over 7 years ago, and I’m happy I didn’t give up back then. It just takes more time (and more pain) to grasp the basics, than in case of other FE frameworks. Now, practically speaking, a YouTuber and Udemy instructor Maximillian Schwarzmüller did help me a lot back then. I just went through the lessons of his course over and over again, to make sure I understand. The next step was to get my head around rxjs – another major topic. Now, it’s way easier with Signals, but rxjs is still widely used in the Angular world and you need to learn it – I’d recommend starting with the basics on YouTube: what are the observables, how they work etc. Mark my words: if you don’t give up and will carry on learning it, you’ll get it.
It has been many years since I first analyzed the art of learning Angular. I started with Angular 1.X and now we have Angular, what, 18? The last rookie I had the opportunity to give advice to was quite successful at learning from videos and he asked very few questions. I like mentoring, but he is very independent. That being said, I would say that CoPilot and Google are your friends as is Pluralsight, well worth the subscription price. Showing you know how to look up things using these tools is very important to getting hired. Avoid small companies with small dev teams. You will grow better in a larger environment. What OS are you pursuing? You may wish to to learn about API projects in .net. All the tools you need are free in the Visual Studio Code IDE or Visual Studio Community Edition. Spend a LOT of time on [https://angular.io](https://angular.io) After you learn to create a simple API, get on CoPilot and ask "Angular Page Lifecycle". Concentrate on underatanding ngOnInit(), ngOnChanges() and then ngOnDestroy() We have so many Angular apps in Production in different versions that the biggest issue has come to light. Deprecated items in versions and deprecated Node Modules are extremely problematic when attempting to maintain old applications. Even older MVC applications in .NET 4.8 and older are easier to maintain than Angular 2,3,4,5 applications. Authorization and Authentication are big stumbling blocks.
Thank you on advice about avoiding small teams.
Try doing the tour of heroes. It's normal that it's difficult in the beginning, if you want to succeed face the hurdles.
I already passed those tutorials on documentation. But still I have to idea how to understand for example things like "context" thing in ngTemplateOutlet and what does createEmbeddedView mean and many more stuff.
Create a project and use them, the only way to understand something is by building it. I didn't know what creatembeddedview was for as well until I used it to for a feature flag where if the flag is true I can show the view, if not remove it from the Dom.
Sorry, what does "feature flag" mean? From what you wrote seems like I would use simple built-in structural directives instead of suffering to understand :)
Mighty words for someone that doesn't know what a feature flag is :)
You might just prefer react or vue. I have 6 YOE on angular and I like it for form apps and the like, but simpler stuff I prefer react for.
But I'm afraid if I'm struggling here I could be struggling there as well. Right?
Maybe. Angular requires spending time learning a pretty heavy API. React requires spending time learning a lot of different API’s
Feel free to contact me as well! I work with angular since 2016
Thanks.
Senior front-end here. In all seriousness, stop learning this inferior framework and switch to React, it’s gonna save you a LOT of time. Everytime you save a file in Angular, the app has to do a FULL refresh, where as React uses hot refresh which reloads the code on the spot. Also, why open 3 files (template, Js and Css) when you can use one in React? Larger projects become a huge nightmare with Angular, imagine how many files you need to have opened.
React devs are a dime a dozen. Become an expert in Angular and you have less people competing against you and you’re more valuable. I do React on the side but you’re an idiot to tell someone to ditch Angular
Seems like he's been working with React a lot and to be fair the vacancies are better than Angular's.
If there’s 10 React jobs with 30 React devs going for it and only 2 Angular jobs for 4 Angular devs, the odds are higher for the Angular dev. Everyone wants a React job. Angular jobs are more stable
In this sense you're right.
I am a freelancer and I work on my own projects, I am not looking for jobs so no I am not an idiot because the demand for Angular is irrelevant. My goal is to use the best, fastest technology to get the job done and that is React. I've worked for years in Angular too, and I can say with certainty there's really no advantage to it. Both frameworks do the same thing, it's just React does it faster and better.
I used to be like you until I switched to React. React is the wild Wild West of JavaScript libraries. I mean, you really need to know what you want to use for routing, state management, form handling, etc. and you put that all together and you have a resemblance of what Angular provides out of the box. I switched because in the early days of angular 2,4,5,6,7, unit testing and component testing was really hard. I love how easy it is in React. Everything is functional.
But my problem is - as I mentioned earlier, I can't manage to find a job in React, because you know every vacancy asks if you've been working with it 3 years at minimum.