In this article, I will walk you through the process of triggering events when writing unit tests for Angular components. We use the query() method to obtain a reference to the element and triggers the click event handler using the triggerEventHandler() method. Three important facts about the triggerEventHandler() method:It will invoke the event handler only if it was declared on the native element by using Angular event bindings, the @HostListener() or @Output decorators (and the less used Renderer.listen()). For example, let’s use the RxJS fromEvent observable:Now, as we mentioned before, if we use Angular’s triggerEventHandler() method, this will not work because Angular doesn’t know about this event. For example:We can see again that I’m not using fakeAsync, and this is due to MDN:Unlike “native” events, which are fired by the DOM and invoke event handlers asynchronously via the event loop, dispatchEvent invokes event handlers synchronously. Continue reading

But what if you want to have a mock version of a service completely in Angular? When building a complex frontend it is nice to first build it against mock data, then build the real backend piece later. To save some time, we could begin by building our service against mock data and then rewrite it later to call the real server. But an even better approach would be to keep the mock version of the service around if we ever need to run against it sometime down the road. Continue reading

As you might have guessed, the second file is the production file while the first one is the dev or default environment. To access the variables, import the environment constant, and then use it as follows:

After that, every time you build your application without the –prod flag, then it will use the dev(default) API endpoint while when you use the –prod flag, it will use the production API Endpoint. This will enable Angular CLI to recognize our two new environments and use the new environment files we created in the previous step. By default, there will be only one key – production, with the following setting:

Duplicate the production key and its content, rename the key from production to staging, then on the fileReplacements key of the staging configuration key, replace:

Your new configuration for staging environment should look like this:

Repeat the above steps for beta and any extra environments you wish to add. Finally, to build your application with the new custom environment, use the flag, as show below:

And for the Angular default environment, there isn’t any changes at all to their build commands. Continue reading

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

Part 1: Building a Progressive Web Application (PWA) with Angular Material and AWS Amplify. Part 1 (your are here): Bootstrap an application with Angular/Material, a web application manifest, service worker, icons and add to home screen functionality for iOS (Safari), Android (Chrome), and desktop deployed to the AWS Cloud using the AWS Amplify CLI. — WikipediaA Progressive Web Application or PWA is a web application that is install-able on a (supported) mobile device via it’s web browser (Chrome or Safari). The short form wraps the element where it is applied in a template[prop]=”value” is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element). component';const routes: Routes = [ { path: '', component: HomeComponent }];@NgModule({ imports: exports: [RouterModule]});export class AppRoutingModule { }There are material theme styles available in this gist you can add/customize in your styles.scss file as well.Now fire up your PWA by running ng serve in your terminal. Continue reading

Why Material Alone Won’t WorkEver since Angular Material was released, developers have been flocking to this library to utilize their reusable components (not to mention built-in accessibility)Material comes with built-in theming, but this may not work for two reasons:By default, Material comes with it’s own color palette that is optimized for accessibility. With this combination, you can use a form to pass CSS variables to a Sass map, which can be used throughout the app. This implementation:Does not use any external librariesAllows multiple components to dynamically change styles through a formSaves the form as an object that can be saved in a database or local storeHas the capability to load an external object as a preloaded or preset style

Today, we are going to learn the most popular Single Page Application creation framework, called AngularJS, using Angular CLI (Command Line Interface). Previously, we learned about another famous single page application builder called Aurelia

We can install Angular Command Line Interface after the installation of "node.js" in our environment. We can install the Angular CLI globally by using the following command in our application. The best practice of Angular CLI or any other application is by configuring a version control in our VS Code otherwise we blindly create and check-in the code in the project repository. If you are using Angular CLI, it will auto-generate all the files that are relevant to your basic application. Continue reading

As an example, we have here an Angular AppComponent template that mixes both HTML and custom components in its template:

As we can see, this template includes several different elements types, such as:

plain HTML elements like h2 and

custom application components like the color-sample component

third-party components (like a color picker)

as well as multiple Angular Material components

And this is what the AppComponent looks like on screen:

We are going to base all our examples in this initial template. Using @ViewChild to inject a reference to a DOM element

Instead of injecting a direct child component, we might want to interact directly with a plain HTML element of the template, such as for example the h2 title tag inside AppComponent. We can now have the h2 element injected directly into our component class in the following way:

As we can see, we are passing the string 'title' to the @ViewChild decorator, which corresponds to the name of the template reference applied to the h2 tag. Let's see what happens if we now try to use this template reference to inject the color-sample DOM element like we did with the h2 tag:

If we run this program, we might be surprised to find out that this time we are not getting back the native DOM element:

Default behaviour of @ViewChild injection by template reference

Instead, we are getting back again the ColorSampleComponent instance! And this is indeed the default behavior of @ViewChild when using injection by template reference name:

when injecting a reference applied to a component, we get back the component instance

when injecting a reference to a plain HTML element, we get back the corresponding wrapped DOM element

The @ViewChild options argument

But in the case of our color-sample component, we would like to get the DOM element that is linked to the component! Continue reading

Arrow functionsArrow functions are a cool way to shorten your code — they’re quite not the same as traditional functions. note: ** is the exponentiation operator and is the equivalent of Math.powThe multiplyAndAdd function explained:multiplyAndAddtakes a number, returns the base to the exponent power (multiplication)Adds a number to the exponent

multiplyAndAdd(2)(4) is the same as 2×2 + 4Let’s write the same functionality using arrow functions. If we use arrow functions with braces, we have to call the return explicitly. Take this example; we have a person object — inside the object we have two properties, the name of the person and a function which returns the name of the personIf we call the sayName method, the first this points to the person object but the second this is undefined? Continue reading

For the full list of configuration options, refer to the and . You can configure the Day and Week views to display events that are grouped by a resource. For an example on how to change the locale, refer to the article about globalization. Continue reading

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