Reference Dom Elements in Angular

Sometimes you need to reference a DOM element inside an angular template. We can do this with JavaScript using the document.getElementById(‘title’);, however this is considered bad practice. In Angular, there are three solutions that I’m aware of. The first is what I mentioned above and not recommended. Bad <h1 id="title">This is my title</h1> … export class AppComponent implements OnInit { ngOnInit(): void { const title = document.getElementById(‘title’); title.style.color = ‘pink’; } } As you can see this changes the color of the h1 to pink.
Read more →

Angular and Jest

The Angular CLI ships with Jasmine and Karma to run unit tests. However, out of the box, the unit tests are a bit slow for my tastes. Using Jest for our unit tests speeds things up and only runs the tests when the component has been changed. Setup Jest When you create a new Angular CLI project, a few things need to be configured in order to get the unit tests up and running with Jest.
Read more →

Pre-Render Your Angular App

Pre-rendering a Single Page Application does not only give the user performance benefits but also allows search engines to successfully crawl your site. This is pretty important for clients who take SEO seriously! Currently, Angular Universal gives you two options, pre-rendering and re-rendering. It has been my experience that using anything but CSS causes issues with Angular Universal. So I’ve had to come up with other solutions. One such solution is to eject the Angular CLI and add a pre-render plugin to your webpack config.
Read more →

Building an Angular & Material App Part I

I thought it would be fun to write an app that uses the Punk API with the Angular CLI and Angular Material. My plan is to build this app over the span of a few blog posts. Part I will focus on the set up of Angular, Angular Material. At the end of this tutorial, we will have an app that displays a list of beers that we can page through. Or if you want to just view the finished product, you can view the repo or the live demo.

Read more →

Moving to Hugo

Moving my blog from Ghost to Hugo
Read more →