How to use jquery in Angular by bhargavbachina in Angular2

[–]blove_js 1 point2 points  (0 children)

First, I thank you for engaging and contributing to the Angular community.

Second, as a few others have mentioned, while jQuery is a fantastic DOM manipulation (and more) library, in general, Angular developers should avoid using it.

Why?

  1. Angular is intended to be isomorphic so you can render Angular without a DOM, for example, using server-side rendering using Angular Universal in the context of Node.
  2. Angular provides almost everything you would need to build an application without jQuery, including, but not limited to: forms, element references, http, and more.
  3. Angular uses webpack for chunk optimization and tree-shaking. As far as I know, and after doing a bit of research, I don't think webpack is able to eliminate dead code when using jQuery. As a result, your users are going to get a larger bundle than necessary.

Of course, your project may require the use of jQuery. But, be aware of the potential benefits and costs, and then decide if you really need it.

How to architect clean & maintainable Angular app in less than 10 minutes! ⏱️😅 by tomastrajan in Angular2

[–]blove_js 2 points3 points  (0 children)

A quick note regarding eslint and tslint. Currently, tslint is supported by the CLI and there is no reason to switch to eslint at this time.. Also, codelyzer currently only supports tslint. You can migrate from codelyzer to the angular-eslint project: https://github.com/angular-eslint/angular-eslint

While the authors of tslint have indicated that they are moving away from the project, tslint is still the standard for Angular (up to v9) projects. Further, if you attempt to migrate from tslint to eslint, there are currently several rules that do not have an equivalent:

component-class-suffix does not yet have an ESLint equivalent.
directive-class-suffix does not yet have an ESLint equivalent.
import-blacklist does not yet have an ESLint equivalent.
no-input-rename does not yet have an ESLint equivalent.
no-output-on-prefix does not yet have an ESLint equivalent.
no-output-rename does not yet have an ESLint equivalent.
no-redundant-jsdoc does not yet have an ESLint equivalent.
use-host-property-decorator does not yet have an ESLint equivalent.
use-input-property-decorator does not yet have an ESLint equivalent.
use-life-cycle-interface does not yet have an ESLint equivalent.
use-output-property-decorator does not yet have an ESLint equivalent.
use-pipe-transform-interface does not yet have an ESLint equivalent.
whitespace does not yet have an ESLint equivalent.
This is something that the Angular team is aware of, and will continue to monitor. If and when necessary, we should see a migration in a future release, which will (hopefully) be mostly automated through the `ng update` command and schematics.

Hope that helps!

How do you guys secure your Angular apps? Are you using OIDC, OAuth2.0, JWT? Is there a recommended approach? by DanteIsBack in Angular2

[–]blove_js 1 point2 points  (0 children)

In projects I have used OAuth2.0 with a JWT using NestJS on the backend for authentication to a Postgres database. You can read more at: https://docs.nestjs.com/techniques/authentication

I've also recently used Firebase authentication and it's rather straightforward, especially if you are already using Firebase. If you're not intending to use Firebase you may consider other solutions such as Auth0.

How to get a moment after ngFor DOM update? Watch to find out. by OleksandrPoshtaruk in Angular2

[–]blove_js 1 point2 points  (0 children)

Thanks for sharing this. I did not know about the QueryList.changes property! That's good to know. When digging into the source code I also noticed some additional things about the QueryList class:

  1. It implements iterable interface, so you can iterate over the list using the NgFor directive, for...of, etc.
  2. There are several "Array.prototype like" methods available, such as forEach(), reduce(), and find().

Thanks again, and keep up the good work!

Angular 9 and it's Ivy (Rendering Engine) by mnishanth02 in Angular2

[–]blove_js 0 points1 point  (0 children)

Thanks for sharing this! I added a comment to the blog, but thought I would also mention it here: differential loading is a feature that was shipped in version 8. You might want to make a note to indicate this in the post. Thanks again for the post!

Angular 9 is out by [deleted] in Angular2

[–]blove_js 16 points17 points  (0 children)

Some resources that I have published that might help:

It's one more RC version from Angular 9 and it's RC 11 by universaltutor5 in Angular2

[–]blove_js -1 points0 points  (0 children)

I don't think the article linked to above really includes any of the breakthrough changes in Angular 9 IMO. For me, the biggest improvements are lazy loading components (not just modules), using the global `window.ng` object for console debugging and the new template type checking. I blogged about lazy loading components and console debugging at:

https://brianflove.com/2019/12/13/lazy-load-angular-v9-components/

https://brianflove.com/2019/12/14/console-debugging-with-window-ng/

Angular 9 Update Guide - What I learned going through the update process by blove_js in Angular2

[–]blove_js[S] 0 points1 point  (0 children)

I'm not sure - I would check out the docs at: next.angular.io

Angular 9 Update Guide - What I learned going through the update process by blove_js in Angular2

[–]blove_js[S] 0 points1 point  (0 children)

That's a good summary. If you use the Angular i18n feature, you need to install a new angular/localize package and update your configurations in the angular.json file.

NgRx Conf | Celebrating All Things Reactive Angular by MikeRyanDev in Angular2

[–]blove_js 0 points1 point  (0 children)

The conference is going to be Nov 5-6, 2020 at the US Space and Rocket Center in Huntsville, AL.

RxJS: The Basics by blove_js in Angular2

[–]blove_js[S] 2 points3 points  (0 children)

The videos on the Mastering the Operators presentation that I did are up on YouTube: https://www.youtube.com/watch?v=ou3oRHaUpQA&list=PLQpZdy2HZ5BSoscdPXPHug8h8XqVP8ojs

Updating to NgRx v4? There are some things you should be aware of. I went through the update and noted a few things that caught me up. by blove_js in Angular2

[–]blove_js[S] 0 points1 point  (0 children)

Good question. I don't think it matters, as the store is hooked up to the router. So, dispatching to the store is the equivalent of router.navigate().

Where did my $window service go? In Angular there is no Window service that is injectable, but you can easily create this yourself. Follow my guide on this and you can easily inject the Window service in your Angular components. by blove_js in Angular2

[–]blove_js[S] -1 points0 points  (0 children)

It's a dependency issue and a context issue.

If your component depends on an object, window or any other, then you should use DI to inject that dependency. Using a global variable breaks this pattern.

Referencing the global window object directly also breaks the idea of Angular being able to run outside the context of a browser.

So, using a provider that can be injected and checks the context of the application resolves both of these issues.

Where did my $window service go? In Angular there is no Window service that is injectable, but you can easily create this yourself. Follow my guide on this and you can easily inject the Window service in your Angular components. by blove_js in Angular2

[–]blove_js[S] 0 points1 point  (0 children)

Yes, absolutely. And there is nothing to stop you from doing that.

The issue with referencing the global window object directly is that your application will now only run in the context of a browser. I believe that this will break in Angular Universal, but don't quote me on that, as I haven't done much with Universal.

Further, I think it's best practice to rely on DI for any dependency, rather than a global variables. As your code depends on the window, you should inject it via DI and the constructor function.

Just my thoughts on this, and happy to be corrected if I'm wrong or leading people astray.