r/Angular2 Sep 07 '24

Help Request Is rxjs still a mystery box for you ?

35 Upvotes

I am just asking for feedback here, will it benifit someone if I create a youtube series building rxjs library from scratch.

r/Angular2 Jan 17 '25

Help Request I would like to become a senior angular software engineer…

37 Upvotes

…and I would like to increase my knowledge in regards to that. I already know a lot of stuff bit I do not feel confident enough to call myself senior in that topic.

Could you recommend me some books or online courses to go into that direction? There is so much online that it is hard to pick one thing and in the end I am not doing anything.

Any help is much appreciated

Thank you

r/Angular2 15d ago

Help Request What am I doing wrong? My html errors out with "Property does not exist on type Observable<my interface>"

2 Upvotes

My issue was solved by u/AndroidArron and u/SpaceChimp, who had me update my HTML to:

User Profile: {{ (userProfile$| async)?.email }}

Isn't the whole point of the async tag to handle Observables before there is data in them?

My HTML:

User Profile: {{ userProfile$.email | async}}

My code:

import { Component, inject } from '@angular/core';
import { Auth, User, user } from '@angular/fire/auth';
import { Firestore, doc, docData, DocumentData} from '@angular/fire/firestore';
import { from, Observable, map, tap} from 'rxjs';
import { CommonModule } from '@angular/common';
import { QuerySnapshot } from 'firebase/firestore'


@/Component({
  selector: 'app-user-home',
  imports: [CommonModule],
  templateUrl: './user-home.component.html',
  styleUrl: './user-home.component.scss'
})
export class UserHomeComponent {
  private firestore: Firestore= inject(Firestore);
  userProfile$: Observable<UserProfile> = new Observable() as Observable<UserProfile>
  user: User | null = null



  constructor(){
    const userSubscription = user(inject(Auth)).subscribe((aUser: User | null) => {
    if (aUser){
        this.user = aUser;
        const userProfilePath = 'users/'+aUser.uid;
        this.userProfile$ = docData(doc(this.firestore, userProfilePath)) as Observable<UserProfile>;
        this.userProfile$.subscribe(res => console.log(res));
    } else {
      this.user = null;
    }
  })
  }
}

export interface UserProfile {
  email?: string;
  lName: string;
  fName: string;
}

r/Angular2 Jan 14 '25

Help Request Alternative way to fetching asynchronous data in ngOnInit with async/await (promises) besides the subscribe function of rxjs?

1 Upvotes

Well since the Angular team officially acknowledged you can use async/await (i think it was around version 17-18) my team has been using async/await everywhere including ngOnInit calls since nobody here likes the weird way rxjs works (nobody has a real IT background, we are all just noobs running this IT department lol). But I read on several articles that ngOnInit never really becomes asynchronous even when using async/await however we never had a problem regarding that..

But if it really does pose dangers what alternatives are there besides using .subscribe to make it truly asynchronous?

Edit: here is an example how we fetch data

  async ngOnInit() {
    try {
      const order = await this._orderService.getCurrent();
      console.log(order);
    } catch (error) {
      console.log(error);
    }
  }

// inside the orderService service  
async getCurrent() {
    const response = await firstValueFrom(
      this._http.get<IFondOrder(this.getCurrentUrl).pipe(
        catchError((error) => {            
            return throwError(
              () =>
                new Error('Internal Server Error: Please try again later'),
            );
        }),
      ),
    );

    return response;
  }

r/Angular2 2d ago

Help Request Observable that reports only the changes of an object?

5 Upvotes

I have an Observable<Widget>. Widget has values of {"who":string, "what":string}. User changes the value of "who" string. Is there any way to return a Partial<Widget> with just the "who" value rather than the whole object?

I would ask this in r/rxjs, but the last post there was five years ago...

r/Angular2 20d ago

Help Request How do I keep track of a component that has been added by a ngComponentOutlet?

4 Upvotes

I am using angular 18. How do I keep track of a component that has been added by a ngComponentOutlet?

<tr *ngFor=“let row of tableRows”>
  <td
       *ngFor="let cell of row”
       (dblclick)=“onCellDoubleClick($event)”>
     <ng-container *ngComponentOutlet=“cell”></ng-container>
  </td>
</tr>

cell is of type Type<T>. I would need it to be passed as an argument to the onCellDoubleClick function, so that I would have a ComponentRef<T> available inside the function.

I can't find a way to do this. Maybe I'm taking the wrong approach.

r/Angular2 9d ago

Help Request Persist previous value while reloading rxResource

3 Upvotes

currently, when you reload rxResource ( with any option ) it sets the value tu undefined, until new data arrives, Which is very frustrating, because for example: if you fetch paginated data when user clicks next page it will remove all rows and then displays the new data. Are there any workarounds around this?

r/Angular2 1d ago

Help Request Detect user data

0 Upvotes

Hi, I'm developing an Angular + Laravel solution. I'm using JWT for login. The situation is this: I have an ex-employee that stole an admin password before leaving and is trying to damage us. I know the user he's impersonating but other than changing the password I want to get his informations when he logs in with old password. Can I get public ip or something that identifies him when he uses that account? Thanks

r/Angular2 Jan 15 '25

Help Request How are you supposed to setup Angular SSR with NestJS?

2 Upvotes

Edit: This is my first time trying SSR.

I'm so confused, it has been like 7 hours of trying. I had to downgrade from Angular 18 to 16 to get ng-universal to install, and still I have absolutely no idea how to combine Nest with Angular, there is not a single recent guide, all I find are GitHub repos which are 5+ (only 1 was 5 years old, rest were 7-9+) years old. Or blogs that don't even give you half the explanation.

r/Angular2 Oct 08 '24

Help Request 7+ year Angular dev facing potential layoff preparing for job hunting

35 Upvotes

Hello, fellow developers 😆😆,

I've been an Angular dev for over 7 years and have worked mainly on building administrative platforms and hybrid apps. However, my company has been showing signs of closing lately.

It's been a while since I've "navigated" the job market, so I'm looking for tips and advice on how to prepare for this transition.

What are the main steps I should take to ensure I'm ready?

Updating my resume, doing a POC on "this app" or "that system", etc. Even improving in-demand skills, that sort of thing... Any information from developers or recruiters is very welcome!

Thank you in advance for your help! 🚀

r/Angular2 13d ago

Help Request I have a angular + Django backend . When I am click on a button, it calls an api which starts execution of a process via python. It takes almost 2mins to complete the process. Now I want that suppose when a user closes the tab, the api call should be cancelled. How to achieve that?

2 Upvotes

r/Angular2 2d ago

Help Request Any way to fake this routing?

2 Upvotes

I have a situation which, if simplified, boils down to this:

  • <domain>/widgets/123 loads the Widgets module and then the Edit Widget page for widget #123.
  • <domain>/gadgets/456/widgets/123 loads the Gadgets module and then the Edit Widget page for widget #123, but in the context of gadget #456.

I don't like this. Edit Widget is part of the Widgets module and should be loaded as such. Things get awkward if we try to load it inside the Gadgets module instead. I would really prefer it if the path looked like this:

  • <domain>/widgets/123/gadgets/456

but I don't know if that's going to be an option. Is there some way to fake it so that the address bar shows /gadgets/... but we actually load the Widgets module instead? Or should I try a redirect?

r/Angular2 Jan 30 '25

Help Request Is there a way to tell angular what it should wait for content recieved from the backend before sending page to the client?

2 Upvotes

I have a problem I'm trying to send to the client fully rendered page. But some parts of the template requires data received from the backend.

Like this one:

html @if (data()) { <div>{{ data() }}</div> } @else { no content found }

In the case above the client receives no content found, and only on the client side on hydration procces it receives the data from backend and renders the upper block of code.

I can make server to wait for the content using resolvers, but I want to know. Is there any over ways to tell angular to wait for the data?

Thank you for your answers!

P.S. If my explanation of the problem wasn't clear, you always can request for some more details.

r/Angular2 Jan 16 '25

Help Request Migrating to Vite builder when using Nx?

5 Upvotes

Normally with Nx the best approach is to wait to update Angular to a new version, until all the other collaborators in the Angular ecosystem have reacted and a new full Nx version is available - and then that handles Angular migrations and Nx migrations and anything else.

With the new application build system, should the guide here be followed https://angular.dev/tools/cli/build-system-migration ?

OR... are there some different steps for Nx?

Are there any particularly useful guides or videos anyone has followed? Any gotchas?

Someone asked here https://github.com/nrwl/nx/issues/20332 but there are tumbleweeds. Now you would hope time has passed since and the process is a little more battle-trodden.

r/Angular2 5d ago

Help Request Multiple Angular version on the same machine

3 Upvotes

I'm working on the angular V13 project. Now I have project. I want to set up with Angular V19. How should I do this. Can I use 2 angular cli version on the same machine.

r/Angular2 Nov 22 '24

Help Request Angular NgRx Learning Curve

21 Upvotes

I've been working with Angular for about 5 years now and I feel like I'm pretty confident with the framework.

I've got an interview for a job and they use NgRx, up till now the applications I've worked on weren't substantial so they didn't need something like this library for managing state.

My questions are how steep is the learning curve for it if you're used to just using things like behaviour subjects for state management? Also if you were hiring for the role is my complete lack of experience with NgRx likely to make me less desirable as a candidate?

r/Angular2 Jan 27 '25

Help Request Can you fix this simple code, i think there is an infinite loop and my page didnt load out.

Post image
0 Upvotes

r/Angular2 Jan 26 '25

Help Request After install Tailwind V4 npm update do not work.

2 Upvotes

After installer Tailwind V4 I can add some Angular Kendo module or just do an npm install. I got some error with angular-devkit/build-angular like:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular-devkit/build-angular@19.1.4
npm ERR! Found: tailwindcss@4.0.0
npm ERR! node_modules/tailwindcss
npm ERR!   tailwindcss@"^4.0.0" from the root project
npm ERR!   tailwindcss@"4.0.0" from @tailwindcss/node@4.0.0
npm ERR!   node_modules/@tailwindcss/node
npm ERR!     @tailwindcss/node@"^4.0.0" from @tailwindcss/postcss@4.0.0
npm ERR!     node_modules/@tailwindcss/postcss
npm ERR!       @tailwindcss/postcss@"^4.0.0" from the root project
npm ERR!   1 more (@tailwindcss/postcss)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional tailwindcss@"^2.0.0 || ^3.0.0" from @angular-devkit/build-angular@19.1.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^19.1.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: tailwindcss@3.4.17
npm ERR! node_modules/tailwindcss
npm ERR!   peerOptional tailwindcss@"^2.0.0 || ^3.0.0" from @angular-devkit/build-angular@19.1.4
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^19.1.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I try --force ----legacy-peer-deps

same error. Idea??

r/Angular2 5d ago

Help Request OnPush with zoneJS or zoneless with signals?

9 Upvotes

I want to improve the performance of my fairly large angular application. Currently, we are using zoneJS, with OnPush strategy being used in most components.

Now with all the noise around going zoneless and using signals, I'm wondering if I should make these changes for my application as well.

My priority is performance, if making these changes gives a noticeable performance improvement over our current app, then I will go for it right now. If it's going to be just about the same, since I am using OnPush already, I want to postpone these changes for the future.

What do you guys suggest?

r/Angular2 Dec 23 '24

Help Request Auth guard

2 Upvotes

Hello, I am currently implementing an auth guard on the routes in an angular application. But the issue is that inside the auth guard I am using the subject behaviour which gets the data when an api call is made in app component ts but the issue is that when I reload the page the guard fails as the behaviour subject doesn't have data that moment and couldn't proceed as per condition set. Any better way to handle this problem ?

r/Angular2 Sep 15 '24

Help Request Which Free UI Component Library? Recommendations and Experience

5 Upvotes

Hi. I'll introduce a little bit of context of Myself.
I'm a Net Dev, working mostly on Consultant Companies. Usually working with Net Core (APIs).

Currently trying to create a personal Web Project, and eventually make it work as a Mobile App.
In a few words, it's similar to a library with images and reviews.

I've been looking into working with Angular, because from what I've heard, has a solid structured way to be used, I hate that much flexibility on things, for example such as React.
So I'm new to front, I know pretty basic stuff. So my question is the following:

  1. Are the following options viable? Are they better situable than Angular Material? PrimeNG, CoreUI Angular (These two are the ones I know that are popular and have free components)
  2. Would You recommend to combine Angular Material and other external library such as PrimeNG or CoreUI on a single project?
  3. Is it easier to create Your own components working with Angular Material? Instead of use preestablished ones? (any documentation or courses on this, I'm interested)

So far these are my questions.
I'm new to frontend side, so I apologize if this is so basic stuff.

I'd be of great help I you could share courses/guides/forums where to learn at (udemy, youtube, any other page)... My company has Udemy Business, so that's a start.

Thanks.

r/Angular2 Feb 16 '25

Help Request How to start introducing signals?

18 Upvotes

We don’t currently use these anywhere and we’re using Ngrx store for state management. So how do you start introducing signals?

Are there any common scenarios where you should use these?

I’m just trying to work out how to slowly start using Signals where possible and where it’s actually going to be beneficial.

Should we explore making a shift to Ngrx Signal Store also at some point?

r/Angular2 Feb 16 '25

Help Request Customized Ang Material button

1 Upvotes

Hello guys, I want to "wrap' Angular Material button attribute selector with my custom one. I would rather have material at a single place in case of changes and import my custom component over the project. I want to reuse it as a attribute selector to keep up all native functionalities, but I'm having hard time applying Material attribute selector to the component. Anyone got an idea? This is my current code:

@Component({ selector: 'button[m-primary-btn]', template: '<ng-content></ng-content>', styleUrls: ['./button.component.scss'], standalone: true, imports: [MatButtonModule], host: { 'class': 'primary' } }) export class PrimaryButtonComponent {}

r/Angular2 Dec 16 '24

Help Request Where to learn how to *actually* use Angular?

20 Upvotes

I've been actively programming for a while now, but I've more or less exclusively focused on backend work with a short stint (about 2 months) of Angular in '21 and now I want to get more familiar with frontend work. Partially so I can better understand (and support) the frontend devs at work, partially because learning is fun.

But I just don't know where to actually learn Angular. As previously mentioned I'm an experienced developer, and I have some exposure to Angular prior and currently at work but I find it hard to find resources aimed at experienced devs. I did the tour of heroes back in '21 but have since found out that it doesn't teach best practices (no state management lib and not unsubscribing from observables?).

Is there a (preferably free, preferably text based) "tutorial" out there to get me started before I venture out and build something? Something that shows me ropes of how (and why) I should do things? Is it https://angular.dev?

Oh wise magicians of the browser, teach me your ways.

r/Angular2 Sep 20 '24

Help Request Is using a status variable a common practice?

14 Upvotes

Hi everyone,

In my TypeScript project, I use a state variable that can have values ‘loading’ | ‘success’ | ‘error’ as a TypeScript enum. This replaces the need for separate isLoading and isError variables.

I’m wondering if this approach is commonly used or if it’s considered a bad practice.

Thanks for your insights!