Check out our Angular Book Series.

Can I create a Provider in Angular without listing it in the provider array?

This was something new I just discovered. You can create an Angular provider, as a singleton and do not have to list it in the provider array. This post will show you how.

The setup

To set up this project, I used the Angular CLI to create a new project. Then I created two services: ServiceOneService and ServiceTwoService. I also created two views: view1 and views2. You can find the code behind this project in this blog's GitHub repo.

Modify the main app.component.html template to include the two views:


<app-view1></app-view1>
<br/>
<app-view1></app-view1>

Create the services

Service1 should look something like this:


import { Injectable } from '@angular/core';
@Injectable()
export class ServiceOneService {
text = `from service one`;
constructor() { }
}

It is created as injectable, and has a single property. Open the app.module add this as a provider:


providers: [
ServiceOneService
],

Service2 should look something like this:


import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ServiceTwoService {
text = `from service two`;
constructor() { }
}

The service looks almost identical, even having the same text property on it. The big difference is in the injectable metadata, we added a providedIn: 'root'. This is the trick to creating a provider without defining it as a provider. means that the first time the service is injected, Angular will create the Singleton just as if it were set up as an explicit provider.

The Views

Open up the TypeScript file for view1 and view2 and load the services:


constructor(public service1: ServiceOneService, public service2: ServiceTwoService) { }

Open up the HTML component for each view and paste this in there:


From Service 1, set up as traditional provider:
<input type="text" [(ngModel)]="service1.text" >
<Br/><Br/>
From Service 2, using providedIn = root:
<input type="text" [(ngModel)]="service2.text">

This just puts an input on the screen, one binding to the service1.text, and the other binding to service2.text.

Since we're using ngModel don't forget to load the import the FormsModule into the appModule:


imports: [
BrowserModule,
FormsModule
],

Run the Code

Now run the code and load it in a browser. When you type in the service 1 input in one component, the input in the other component should also change:

This is what is normal and we're used to because we set up Service1 as a provider and the single instance should be shared between the two components.

Now try to type in the service 2 input. The values also change:

This surprised me, since Service2 is not set up as a provider. However, the `providedIn` metadata tells Angular to create Service2 as a service. It works like magic.

Get The Full Source for this Sample.

Happy New Year

The new year is often a time to reflect back and look forward. This post is just that.

The Work

I don't usually talk about client specifics, but one project has given me more of a public profile than I'm used to. in 2018 I started working with Disney Streaming Services, and I have started contributing posts to the Disney Streaming Blog. The first post is already up, and I talk about using the Angular CLI to create and combine multiple applications.

The editing process for this blog is a lot tougher than the editing process for my own blog or this newsletter and I feel like some of my voice was stripped out. I'm doing my best to make sure that does not happen with the second post, which is starting the edit phase.

The Learn With Book Series

I had two updates to the Learn With Angular books in 2018, one for Angular 6 and one for Angular 7. The Angular 7 updated represented a major re-write, because I updated the text to use the Angular CLI instead of my home-grown tools. When I started the series, the Angular CLI wasn't a thing, but today it is the best way to write an Angular application.

The bulk of the new content is in the bonus book. I added a chapter on using Redux with Angular, and covered Augury. This year my hope is to expand the series to include a version that uses the material library instead of bootstrap. I'd also love to create a React version of the books. I also want to dig deeper into the rxjs library which underpins both Angular and React. We'll see what time allows.

The Blog

My goal is to write at least one new blog post a week, and I've been at it since October 2015. I had a short reprieve last summer for personal reasons--see below--but still managed to write 53 posts in 2018. I expect to continue writing throughout 2019.

A lot of the stuff I write is down in the nitty gritty of writing code, but I have some plans to write some more philosophical thoughts on the development process. First up is a post about naming conventions all throughout the stack. I hope to have that ready for the next newsletter but have a few other writing commitments in front of it.

Every year I tell myself my blog needs a serious redesign and update. I finally started work on it. My first step was to upgrade to the latest version of BlogCFC, which I have working locally. I created my own branch of the BlogCFC code base and merged in a lot of the custom changes I have made throughout the years. I expect this to be an ongoing process throughout the first quarter of this year.

Personal Stuff

On a sad note, I buried my father last summer. I'm fine about 90% of the time, but some days it hits me harder than others. My dad lived a good life, and is sorely missed by myself, my mother, and my 3 siblings. I miss him.

On a lighter note, in 2019 I'll be celebrating my 10th wedding anniversary. We're planning a big party--just like a wedding except this time we can invite the people we want to invite instead of the people we have to invite. It should be fun.

How was your 2018 and what do you plan to do for 2019?

How do I set up a Proxy Server with Angular?

This is an excerpt from my Learn With series on Angular 7, which came out about a month ago. I wrote this up for the DotComIt newsletter, and thought I'd share it here too.

This post details how to use Angular's server side proxy to connect the Angular CLI dev server to access the NodeJS application server without having to worry about cross domain issues. The Angular CLI dev server is not set up to run normal server-side code, like custom NodeJS, ColdFusion, PHP, or Java. Instead the preferred approach is to set up a server-side proxy to redirect your Angular calls to your other remote servers.

The first step is to create a proxy config file. Name the file proxy.conf.js and put it in the root directory of the project, where the angular.json file is located. It should start as an empty file, but let's create a constant:


const PROXY_CONFIG = [{ }]
module.exports = PROXY_CONFIG;

The code also exports the configuration. The PROXY_CONFIG is an array of objects, although for our case we'll just have a single object. First, add a context:


context: [ "/nodejs" ],

The context value says "Whenever a URL comes in that contains `/nodejs`, we'll redirect it elsewhere. Exactly where you want to redirect it depends on your local configuration. Add a target property:


target: "http://127.0.0.1:8080/",

In the case of NodeJS, we're redirecting the request to a different port on localhost.

Set the secure to false:


secure: false,

In local dev environments I never set up HTTPS or use secure URLs like I would in a production environment. There are a few other values that may be needed or not depending on your local setup. I'll go over them here for completeness.

First, you can have the proxy to rewrite the path:


pathRewrite: { "^/nodejs": "" },

You'll only need a path rewrite if you need to modify the URL. For example, if your API will call '/nodejs/authenticate', but your actual service is set to '/authenticate', then this will allow you to direct your service call to the proper code.

Another value to be aware of is changeOrigin:


changeOrigin: true

You'll only need to use the changeOrigin value if you are setting up a local alias for your NodeJS sample. For example, if your NodeJS server is set to listen to requests on 'local.nodejs.learn-with.com' then this will tell the proxy it is okay to rewrite domain from localhost to 'local.nodejs.learn-with.com'.

The last value I want you to be aware of is the debug:


logLevel: "debug",

When you set this property, the console will give you a lot of details of how the proxy is working and rewriting URLs. It can be handy when you need to debug things.

Final Thoughts

I hope you're doing well in this holiday season.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

How do I prevent a Browser from opening up when I run Angular unit tests?

When you run unit tests using the Angular CLI's ng test command you'll often see a browser open up. Sometimes this is useful if you want to debug the unit tests in the browser, however since I have moved the bulk of my unit test debugging to IntelliJ, this is just a minor annoyance.

You can shut it off. Open up the Karma.conf.js file in the src folder of your Angular CLI project. Find this line:


browsers: ['Chrome'],

This tells Karma to open Chrome to run the tests. But, there is another option:


browsers: ['ChromeHeadless'],

Rerun your tests and you'll find that no browser opens up.

I love it when things are easy.

Use CSS To truncate a string with an ellipsis

My expertise in UI programming is creating reusable components, but less so on the design side of things. Every once in while I discover something interesting about CSS that I feel is worth sharing. Today I'll show you how to truncate a string with an ellipsis, magically.

First, let's create a few H1:


<h1>First Item</h1>
<h1>Second Item</h1>

The truncating will work on any HTML element, I just chose H1 for easy code. How add some CSS:


h1 {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

First add a specific width. Then hide the overflow with overflow and prevent word wraps with white-space. Finally, specify the text-overflow to value ellipsis. This will force the text to truncate if it gets too long:

Play with the code over here.

How do you access the index of an *ngFor look in Angular?

Sometimes in Angular I have to loop over something in an HTML template. *ngFor is the best way to do that. Something like this:


<div *ngFor="let myValue of myArray">
{{ myValue.property }}
</div>

This is pretty common. I've used it to create a list of items that do not warrant a data grid type structure. I've used it to populate drop downs or to display arrays of images. There are lots of uses for this.

Sometimes, I need to access the index of the array inside the loop. I was using this because I wanted to show which item was selected, and was switching some CSS based on the selected item. How do you access the index of the array inside the loop?

Like this:


<div *ngFor="let myValue of myArray; let i=index">
{{ myValue.property }}; {{index}}
</div>

It is really simple to do, but just does not come up all that often as this is the less common case.

You can even access a bunch more values inside the loop including determing whether the item is the first first and last item, or if it is is an even or odd element. All these allow you to easily make tweaks to the display.

How do you deep copy an array with JavaScript?

The Problem

I was working on an Angular component that accepted an array input and created a drop down from it. As part of our internal architecture the component would add a disabled property to certain items on the input. This would permanently modify the input array, which was cached by the app and used elsewhere. We couldn't have that. We decided to make an internal copy of the array so that our local component changes would not affect the global data store. How do we do that?

Normally when I want to create a deep copy of an object, I turn to Try it here


const object1 = [
{value: 1},
{value: 2},
{value: 3}
];

const object2 = Object.assign({}, object1);

console.log(object1);

console.log(object2);

Take a look at the output:

If you look closely at the output between object 1 and object 2, you'll discover that object2 is no longer an array, it is an object. That was the wrong syntax and not what we intended.

Object.Assign() with an Array

We could use Object.assign() with an array instead of an object, like this:


const object3 = Object.assign([], object1);

That will give us an array. Make sure that they are separate objects:


object1.push({value:4})
console.log(object1);
console.log(object3);

That does solve the issue and we have an array:

It isn't the only way to solve the issue, though.

Use a spread operator

The spread operator will do the same thing.


const object4 = [...object1];
object1.push({value:4})
console.log(object1);
console.log(object4);

I always forget about the spread operator, but it works well. Depending where you look, there are concerns about it's performance over other options. I'm reusing the same screenshot because there is no change:

Use Slice

You can also create a deep copy of an array using array.slice():


const object5 = object1.slice();

object1.push({value:4})

console.log(object1);
console.log(object5);

Repeated screenshot because nothing changed:

This is the way I went with, for no other reason than it was used elsewhere in the code base and it pays to be consistent.

Hopefully you learned something. ;)

I got (mis)quoted in an article about Pokemon Go

I got mis-quoted in an article about Pokemon Go.

A friend of mine forwarded me the request from a site named Help a Reporter Out. I answered a bunch of questions about my experiences playing Pokemon Go. For posterity, I thought I'd share the full response I sent to Emily, the author.

1) Do you feel safe playing Pokemon Go? Why or why not?

I feel as safe as I would if I wasn't playing Pokemon Go. I've walked all over Connecticut playing the game. I've been on local parks and trails, from Old Sturbridge Village in Massachusetts to Disney World in Florida, all over New York City and up to the top of the Space Needle in Seattle. If I am in a place that is well lit with lots of people there is no worry of not being safe.

You do have to be aware so you don't bump into others. A few times I've stayed out on hiking trails way past dark. I wouldn't recommend that without proper equipment, regardless of whether you're playing Pokemon Go or not.

2) What is the strangest experience you've had playing Pokemon Go?

Last year, I discovered a fox den right off a local trail in CT. I just turned and looked at the right time and there were 3-5 baby red foxes jumping around and playing. I came back to visit at a safe distance many times until the snow came.

Another time I was almost run over by some guy driving a golf cart on a local trail. I had to act quick to not get run over. I reported him to the local park service since the trails are supposed to be vehicle free.

Other players, often strangers, are willing to walk up to you to ask questions or give advice such as "There is a `Houndoom` spawning over by the bridge on the other side of the park." Pokemon Go has taken away the embarrassment of approaching strangers by providing common ground to start a conversation. It is brilliant to see.

3) Has anyone ever found your location through the app?

Nope!

4) What is your favorite part about playing the game?

It is a reason to get up and exercise. I run a business out of my home, so it is really tough for me to get my "10,000 steps" without forced exercise time. This gamifies it a bit and gives me incentive to get up and go.


My impression of the article is that it has a negative connotation, trying to highlight how it can be dangerous to play Pokemon Go. I don't feel playing Pokemon Go is any more dangerous than not playing Pokemon Go.

This anecdote of mine that was quoted was embellished and I'm not a fan of that. First, they misquoted me by changing 'run over' to 'hit' when I spoke about the golf cart on the trail. The hard sound of 'hit' have a different impact than the smooth sound of 'run over'. I asked them to correct that.

They also misconstrued my statements to make it sound like the golf cart driver was playing Pokemon Go when he wasn't. They also embellished the story to have me jumping into the bushes which never happened. They aren't even any bushes on the trail I was on.

Definitely an interesting to be quoted in an article.

Why won't my Observable Trigger in a Unit Test?

I've been writing some tests as part of a project I'm working on, and for some reason I could not get a mocked Observable to resolve. This will explain the mistake I made and how to fix it.

The Setup

This component used a resolver to load data before the component loaded. To access a resolver's data, you inject the activated route into the constructor, like this:


constructor(private route:ActivatedRoute){}

In the ngOnInit(), you'd subscribe to the data property:


ngOnInit(){
this.route.data.subscribe((data: {myValue}){
this.myValue = data.myValue
}
);
}

This saves your MyValue data from the resolver into the local component instances myValue.

Writing The Tests

First, I mocked the ActivatedRoute:


class ActivatedRouteMock {
data: Observable<Data>;
}

Then, I created an instance of it:


const activatedRoute = new ActivatedRoutMock();

As part of the TestBed's providers:


{ provide: ActivatedRoute, useValue: activatedRoute}

The first test I wrote was to make sure the subscribe was actively working.

First, I created the observer and component:


const observer;
beforeEach(() =>
{
activatedRoute.data = Observable.create (observer) => {
observer = observer;
}
spyOn(activatedRoute.data, 'subscribe');
component = TestBed.createComponent(myComp).componentInstance;
});

Then, I ran the test:


it('should subscribe to activated route', () =>
{
expect(activatedRoute.data.subscribe).toHaveBeenCalled();
});

This worked great. Now, I wanted to test to make sure that other methods inside the component's result function worked. To do that I'll have manually trigger the observer:


it('should resolve route data and save myValue'. ()=>
}
const myValue = "something";
const results = {};
results['myValue'] = myValue;
observer.next(results);
observer.component();
expect(component.myValue).toBe(myValue);
});

This should work, right? Nope, it failed ever time. The observer was always null. I was scratching my head and adding a lot of breakpoints and outputs trying to figure out what I had done wrong so far.

What is wrong

The function to create the observable is never run until the observable is subscribed to. Clearly we are subscribing to it in the component code:


this.route.data.subscribe((data: {myValue}){
this.myValue = data.myValue
}

So, why doesn't it run? Think about it first, because spoilers are below.

The spy is getting in the way:


spyOn(activatedRoute.data, 'subscribe');

Because of the spy in place, the subscribe() function is intercepted, and as such never run, which never runs the function in the Observable's create function, which never saves the Observer. The solution was simple once I figured out what was going on:


spyOn(activatedRoute.data, 'subscribe').and.callThrough();

Tell the spy to intercept and watch, but still allow the call to go through.

Everything started working wonderfully. :-)

How do I switch between different NG Material Button Types?

ng-materal provides a bunch of button variants. Each button type is an HTML button that offers identical functionality, but with slightly different designs and colors. Here is an example of two buttons:


<button mat-flat-button>My Button 1</button>
<button mat-stroked-button>My Button 2</button>

If you drill into the button class, you'll see that all the button variants are implemented in the same code base, as directives.

I was doing a code review on a current project and saw that the code was conditionally determining which button type to display:


<button mat-flat-button *ngIf="condition">My Button 1</button>
<button mat-stroked-button *ngIf="!condition">My Button 1</button>

I was bugged by the fact that we were implementing two button components in our code for what was essentially a style change. That's when I started digging into the specific implementation and discovered that the primary difference between a mat-flat-button and a mat-stroked-button was style changes.

I proposed this alternate approach:


<button mat-button [ngClass]="condition?'mat-flat-button':'mat-stroked-button'">My Button 1</button>

We use the ngClass directive to conditionally flip the style between the flat-button and the stroked-button. It solved our issue with less code.

More Entries

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.