Angular Jobs

Today in Top Angular News – Wednesday, November 28

Today in Top Angular News – Wednesday, November 28

Today’s topics include Angular, AngularJS, AutoTweet, TFS, NodeJS, JavaScript, and NpmScripts. Special thanks to contributors 726514847387360, Vamsi Vempati, @tomsu, Tomek Sułkowski, The serverless webpack authors, @NetanelBasal, Netanel Basal, Sam Julien, @michael.karen, Michael Karén, chidumennamdi, hasdid, +Juri Strumpflohner, Juri Strumpflohner, webcodegeeks, anilsingh581, NetanelBasal, and NG_Tutorial.


Best practices for a clean and performant Angular application

pipe(
map(value = value.item),
take(1)
);4) Isolate API hacks
Not all APIs are bullet proof — sometimes we need to add some logic in the code to make up for bugs in the APIs. pipe(
map(value = value.item)
);6) Clean up subscriptions
When subscribing to observables, always make sure you unsubscribe from them appropriately by using operators like take, takeUntil, etc. subscribe(item = this.textToDisplay = item);After
Using takeUntil when you want to listen to the changes until another observable emits a value:
private destroyed$ = new Subject();public ngOnInit (): void {
iAmAnObservable
. pipe(
map(value = value.item)
// We want to listen to iAmAnObservable until the component is destroyed,
takeUntil(this. subscribe(item = this.textToDisplay = item);
}public ngOnDestroy (): void {
a private subject like this is a pattern to manage unsubscribing many observables in the component. Continue reading


Theming Angular – The Startup – Medium

With `ViewEncapsulation.Emulated`, global styles also don’t impact a descendant component.The solution
To deal with this, we are going to use CSS Custom Properties, a.k.a. CSS variables. Property names that are prefixed with –, like –example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.What it means is that you define a custom property the same way as you would a normal css property, e.g. "font-size: 16px" and it’s available to be referenced everywhere within the cascade (in the whole subtree of element that matched the selector you’ve used when defining the property.) Now, if you haven’t work with css custom properties before it takes a while to sink in (speaking from experience…), but it’s an extremely powerful tool.The important thing is not to think of them as an alternative to SASS, or Less variables — these are only calculated during compilation, so they’re static. You don’t actually have to put the custom properties [dtTheme] directly on a component, it can be applied on any HTML element in your app. The theme will be applied to everything inside:

[dtTheme]="getCustomTheme()"
dt-ptero/dt-ptero
dt-trex/dt-trex
/I’m using both custom CSS properties and SASS variables there. Continue reading


Creating Angular Desktop Apps with Electron

In this tutorial, we are going to take a look at how to turn any angular application into a native desktop app using electron. Also, you will discover how to use native APIs like the file system from your angular application using electrons IPC methods. This function will create a new electron window to host our angular application. You can also start the application in fullscreen-mode like this:

Next, we need to fill our new browser window with content: Our angular app. This main process is then spawning the second one by opening the browser window, which is the second part of the app and runs our angular application. Continue reading


Things Worth Knowing About Dynamic Components in Angular

  • Were running detectChanges() explicitly so it should work, right?

Let’s change the HelloComponent and set its change detection to onPush :
Now, let’s try to change the name input and call detectChanges() :
Nothing is happening. The reason is that we’re running detectChanges() on the host view, not on the component itself and because we’re in onPush and setting the input programmatically from Angular perspective nothing has changed. We can inject the CDRef in our component and call it in the setter:
Or we can get a reference to the component injector:
The above point also happens with non-dynamic components, but the essential point to take from here is that when we call or ref.hostView.detectChanges() we are invoking the CDR of the host view. Continue reading


NgRx Authentication Tutorial

Here are some pro tips on actions from Mike Ryan’s ng-conf talk Good Action Hygiene:

Once the store receives an action to change the state, pure functions called reducers use those actions along with the previous state to compute the new state. For example, to get your current user, you’d set up a selector by first exporting this function:

You typically put these pure functions in the same file as your feature’s reducer functions and then register both the feature selectors and inidual state piece selectors in the file where you register your reducers with NgRx. One of the most common complaints about NgRx is the amount of repetitive code that it takes to set up an application and add new features (never say "boilerplate" around NgRx Core Team member Brandon Roberts!) My goal in this article is to focus only on teaching the core concepts of NgRx authentication so that you can apply them to your own larger application. The first step to adding authentication to an NgRx app is to define the piece of your state related to authentication. Continue reading


Dynamic Import of Locales in Angular – Angular In Depth

Instead let’s use the characters before the hyphen from our culture string to get our ‘localeId’. const localeId = culture.substring(0, culture.indexOf('-'));And then let’s refactor localeInitializer()so we can pass it that id. Now we get a ton of these warnings:
We are trying to import too many files, some of which break the build. If we look in the folder we see that every language has one JavaScript file and one TypeScript definition file. It is actually bundling all the language files in the locale folder to inidual chunks. Continue reading


Understanding Change Detection Strategies in Angular

InternalViewRef is a subclass of ViewRef:

The ViewRef class embodies a component view in Angular. A Component declared in Angular is represented by a ViewRef class, manipulations in the Component's view is done through its ViewRef class instance. This is what is set to tell Angular that our view has either OnPush or Default CD strategy. We will look at the cases below:

DOM Events cause CD to run on a view with OnPush Strategy. enables the ChecksEnabled flag on components with OnPush CD Strategy an iterates upwards to its parent views enabling any Continue reading


Authentication in Angular – Gábor Soós – Medium

We will build a service that handles HTTP calls and stores JWT authentication tokens on the client to restrict access to pages and attach the token to authenticated HTTP calls. We will use it in the login component and based on it’s result redirect to the home page and store the received token from the server. And with this step we secured every non public page in the application, no need to manually add it to every restricted component. Restricting again
Angular gives us another way of restricting access to page components and it can be accomplished with the @CanActivate router lifecycle decorator. Either way we go for restricting access to pages, both works, but till dependency injection is solved for the @CanActivate decorator I would go with extending the RouterOutlet. Continue reading


You can use the tf.exe tool to run version control commands from a command prompt or within a script.If we can call tf from the npm scripts we might be able to solve our problem. "config": {
"tf": "\"C:\\Program Files (x86)\\Microsoft Visual Explorer\\tf\""
}Now we can call tf.exe in our scripts with $npm_package_config_tf and the command we need like checkout or add. json before every install so that I don’t run into: npm WARN saveError EPERM: operation not permitted
"preinstall": "$npm_package_config_tf vc checkout package-lock. Using the double pipes we can change our script to:
"preinstall": "$npm_package_config_tf vc checkout package-lock. I have not been able to get VS Code and my source control to work in tandem so I have resigned and am working in Visual Studio. Continue reading


Learning Angular: What is the scope of your directive?

  • Learning Angular: What is the scope of your directive?

So the issue is quite clear, the directives don’t create a separate, isolated scope and thus, the variable of the directive controller on overwrites the variable of the directive controller on . Interestingly, while a normal controller creates a scope, the directive controller doesn’t do so. with your directive configuration object being defined for instance like this:

You can also have different names for the scope properties that are used internally or passed externally:

You would use in your directive template, while the user of your directive would use on the HTML. Only after I realized that the it’s directive scope contained the data of the directive’s scope I started to get suspicious. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.