Your Choice JavaScript News

Angular News Friday, November 24

Angular News Preview / TLDR

  • For this purpose we need to take a look at the interface: – – Here’s the interface of the function: – – By default, Angular is going to track the values by their identity with the following track-by function: – – The differ will use the result from the track-by…
  • It is a concrete implementation of the interface which Angular uses by default for comparing iterable collections: – – That’s pretty much enough in order to find out potential ways to improve the differ.
  • I got inspired by this concept in order to develop a collection optimized for the Angular’s change detection mechanism which I called .
  • The iterator itself is quite simple: – – We keep track of the index we’re currently in and return objects containing the values: – – Notice how for the purpose we use only the public interface of the collection so we don’t have leak of any implementation details.
  • Here are the basics of the implementation of the : – – Notice how in we just get the current collection, access its property and based on its size we either preserve its value, set it to an empty list and return the current instance, or return .

Tags: export class, changes, custom data structure, item, collection

  • Unfortunately, Angular is still relatively young, and we cannot find an Angular component for everything we need.The purpose of this article is to demonstrate use cases in which Angular components can be connected with vanilla JS libraries.
  • #Example OneFor this example, we will use a 🆒 library called Sweet Alert.SweetAlert makes popup messages easy and prettyOne of the useful options that we can pass to the library is the content option, which is a DOM element that will be rendered inside the modal, for example:Sweet Alert ExampleWe can now…
  • We create a simple component that can be passed to Sweet Alert.The next thing we need to do is to create the component.After we have created the component, we obtain a reference to the native DOM element, which is passed to the Sweet Alert content option.In addition, of course, we…
  • Various libraries like highcharts give us the option to pass an HTML string that will be rendered inside the tooltip.Let’s create an Angular component and pass it to the library.We created a simple component that gets the data as Input() and displays it in a list.
  • Inside the formatter callback, we have access to the chart points which pass to our component as Input().

Tags: Angular component, Sweet Alert, vanilla JS libraries, Angular components, tooltip element

  • @angular/service-worker is a new core package available for Angular that gives us an abstraction layer for configuring and adding a service worker to your apps and achieve offline capabilities.
  • First, you’ll want to add the @angular/service-worker package to your project: – – Then, since the Angular CLI < 1.6 doesn’t have support for the service worker package, things get a little more tricky and we need to manually perform a few operations upon building the app to properly setup...
  • If your existing app is using Angular CLI v1.6+, you can add service worker capabilities by installing @angular/service-worker… – – And then enabling a configuration using the CLI: – – This configuration command adds the following to the CLI configuration file: – – If you’re using the Angular CLI v1.6+…
  • Here’s the default content of that file when created using the Angular CLI 1.6+: – – In this default configuration the following top level configurations are in place: – – This basic configuration will work for a barebones Angular app, but as we start building our app we’ll make use…
  • An easy way to run a static local server is with running http-server through npx: – – You can inspect the app’s Service Worker in your browser’s developer tools and you’ll also see the cached assets in the Cache storage: – – Now if you turn off your wifi connection,…

Tags: service worker, Angular CLI, Angular CLI v1.6+, app, service worker capabilities

  • Sharing a single WiFi access point with dozens of lovely hostel guests also doesn’t make the situation any better.If we realize that in many places slow and unreliable internet is an inescapable fact of life we can start thinking about how we can enhance our apps to provide best user…
  • This will increase probability that user will wait and use our app instead of leaving and searching for some alternatives.In the following example animation loading takes only around 1.5 seconds but remember that in practice it could easily be more than 10 seconds on slow networks…Loading animation is much better…
  • However this is not the form in which our app is consumed by the browser.Building our app means that Angular CLI uses Webpack and a multitude of loaders to transpile and process all source files and assets to provide us with bundles which we then deploy to a server.
  • Our app becomes available and can be requested by any user possessing correct URL.What happens when user navigates browser to our app?One picture is worth thousands of words so lets get right to it…Anatomy of startup of Angular Ngrx Material Starter app, from retrieving index.html through requesting all referenced styles and…
  • It’s implemented using inline style tag in thehead and loading layout inside of the app-root component.Angular removes content inside of app-root/app-root after successful Angular bootstrap so we don’t have to take care of hiding of the loading layout manuallyCool, we have a spinner but logo is still just a class…

Tags: app, Angular app bootstrap, Angular CLI, app loading style, interesting Angular posts…

  • Let’s add a progress bar to Angular 4 apps using ngx-progressbarToday we’re going to add a progress bar to our Angular 4 app using the great ngx-progressbar package from @MurhafSousli, and straight up: kudos to him for his work !
  • Sponsored by letsboot.comWhat we’ll do:generate a simple Angular 4 appinstall the ngx-progressbar package in our appimport the NgProgressModule to our appadd our custom tag to the app templatesimulate a slow http and get some sample json dataexplore the service options that ngx-progressbar providesexplore the template options that ngx-progressbar providesuse the…
  • Here we only show a few options for illustration purposes while we keep the default for the others:Simulate a slow http and get some sample json dataIn order to fake a slow connection and a get request to a json server, we create a const variable in the ngOnInit() that accesses;slowwly.robertomurray…
  • start()to display the progress bar.set(n)to set a percentage completion as a fraction.inc(n)to increment the progress by a fraction.done()to complete the progressHere we simply use some setTimeout() functions to illustrate the versatility of this package (this setTimeout() would of course never be used in production):Explore the template options that ngx-progressbar providesThe…
  • Happy coding and follow me on twitter, medium, and LinkedIn for more, also check out letsboot.com for more great content!I also want to say that I hope this article brings more visibility to the @MurhafSousli for his awesome ngx-progressbar work.

Tags: progress bar, great ngx-progressbar package, progressbar-app —-prefix pba, slow connection, Visual Studio Code

  • Angular, the Google’s popular javascript framework used by a lot of developers world wide for building web, desktop and mobile applications finally released a new version, Angular 5.0.0 on the first day of November, 2017.
  • Basically, the build optimizer removes Angular decorators from your app’s runtime codes thereby reducing the size of your bundle and increasing the boot speed of your application.
  • this has values like and Things like this become possible: – – We can define this option on the FormGroup level,so that all the fields of the group behave alike: – – Template-driven forms are not left out of the party: – – Angular 5 shipped with support for expression…
  • Angular previous versions area bit slow, the reason for this slowness was that every template change was triggering a full compilation of the application.
  • The corresponding events are and or and – – For instance, the implementation of a spinner could look like this: – – Angular Universal State Transfer API and DOM support, for sharing code between server- and client-side versions of an application.

Tags: Angular, Angular team, Angular previous versions, Angular decorators, Angular Universal

  • Presentation about changes in Angular major release 5.
  • Describes the most important features introduced and changes both in Angular and Angular CLI.

Tags: Bartłomiej Narożnik, Angular team, Angular Universal, Angular applications, Intl API

  • Querying For The Closest Parent Element in AngularImagine that you have a component with a nested structure.
  • You’ve found a case where one of the children needs to run some functionality on one of its closest parents.To demonstrate this, let’s assume we have the following structure:Let’s say the widget-item element needs to add a specific class to the closest parent, which matches the widget-content class selector when…
  • Let’s see how we can do this.First, we need to create a directive whose selector will match the required parent element.
  • The next thing we need to do is to expose an API to add our custom class to the element.Here, we are using the HostBinding decorator to add the overflow class to our host component.Now, we can obtain a reference to our directive inside the widgetItem component, using the Host…
  • Try editing the code yourself.Follow me on Medium or Twitter to read more about Angular, Vue and JS!

Tags: professional Angular developers, required parent element, tools Angular, directive whose selector, nested structure

  • Here are a few things that can cause JavaScript performance to falter: – – Every interaction with the host object, or the user’s browser, increases unpredictability and contributes to performance lag.
  • If you need a little extra support, there are several code compression tools designed to help developers optimize their applications’ JavaScript performance.
  • Code compression, or code minification, removes unnecessary characters from source code, which results in smaller file sizes and faster load times.
  • Here is a sampling of the the top tools for tuning JavaScript code: – – On top of analyzing, parsing and rewriting your code for optimal performance, Google Closure Compiler also double checks your syntax and variable references.
  • Many of the individual tips above give your JavaScript a very small performance boost; however, if implemented together, you and your users should notice a significant improvement in how fast your websites and applications run.

Tags: javascript performance, code, Improving JavaScript Performance, best practices, JavaScript code

  • However, form validation often frustrated many Internet users in the past as any wrong or incomplete information resulted in the page reload, forcing them to enter the whole correct information again.
  • That said, I am unveiling 10 useful JavaScript form validation libraries that show instant alert whenever an Internet user enters any wrong information, thereby saving the time of entering the whole information again.
  • These JavaScript form validation libraries check the veracity of the information entered before sending it to the server.
  • GValidator is LGPL licensed and is one of the most lightweight javascript form validation libraries.
  • It exposes a single method, value() and leaves you to decide when a value is validated and – – These JavaScript form validation libraries saves your site users from entering their information again in the event of accidental closure of their computer tab.

Tags: javascript form validation, jquery validation plugin, form validation libraries, form validation library, form validation tool

Comments are closed, but trackbacks and pingbacks are open.