You’re probably familiar with dependency injection using classes, but what about using strings, numbers, booleans, or any other object?

“Classic” dependency injection with classes/services

The nominal case of dependency injection in Angular uses injectable classes that are often called services.

Such implementation relies on having an injectable class defined like this:

import { Injectable } from '@angular/core';@Injectable({  
providedIn: 'root'
})
export class MyService {
}

And then, the service class can be injected into any other class using the following constructor-based syntax:

import {Component} from '@angular/core';
import {MyService} from '../my.service';

@Component({
//...
})
export class MyComponent {

constructor(private service: MyService) {
}

While this…


The Angular TestBed gives us access to the DOM generated by a component through its ComponentFixture class, specifically its debugElement property.

This is a great feature because instead of just testing our Typescript code, we can test the rendered HTML user interface, which is what components are all about.

This post will show how we can use component harnesses to make DOM testing even easier while creating robust tests that promote code reuse.

How to test the DOM structure in vanilla Angular?

debugElement is the object that gives you access to the DOM generated by your component. Accessing the debugElement looks like this:

beforeEach(() => {…


Every six months, a new major version of the Angular framework is released to the public. Angular 12 is the latest iteration released in May 2021. Let’s take a look at the different changes and improvements made to Angular with this latest version.

CSS improvements: Sass and Tailwind!

Sass can now be used inline in the styles field of the @Component decorator. If you wish to enable that behavior, you have to add "inlineStyleLanguage": "scss” to your angular.jsonconfig file.

Tailwind CSS is also now supported by Angular CLI natively, which means that if you want to add Tailwind support, you can:

1. Install Tailwind with…


Sometimes, we need to load some information upfront, right from the time our application starts. We want to make sure that such information is available synchronously right from the beginning and then for the application's entire life cycle.

For instance, we might need to load environment variables from a server or any external configuration data from a third-party API.

Enter the APP_INITIALIZER injection token

The APP_INITIALIZER injection token is a way to provide a factory function that performs initialization tasks.

Such tasks will run during the application bootstrap process, and the resulting data will be available on startup.

In the following example, I’m adding a…


In this tutorial, we will see how to debug Angular applications without using any breakpoints and without using console.log.

Instead, we will look at debugging features introduced with Angular 9 under the ng namespace variable, which is automatically available in development mode but not exposed when the application is running in production mode.

To use those features, we need to get familiar with how to select a DOM element in the browser:


Typescript is a language that constantly involves and brings useful new features to the table. In this post, we’re going to take a look at five tips & tricks that can be used daily while working with Typescript.

Note that those tips don’t just apply to Angular and could be used with React, Vue.js, or even vanilla web app code that doesn’t use any framework/library.

1. Generating type data automatically

One of the best features of Typescript is that it allows us to use types for our data, using interfaces, enums, classes, and more.

The problem is that in many cases, we have to work…


A video controlled programmatically with two buttons.

As developers, we tend to think about using either components or services when we work with Angular. In many cases, though, using template reference variables or directives is a great way to solve problems.

Let’s look at different examples where we want to control some advanced HTML5 controls, such as the video element. This element can be used like this to display a video on a website:

<video controls width="550">
<source src="https://myvideolink.com/test.mp4" />
</video>

It’s important to note that this specific HTML video element has its own API of interesting attributes, events, and methods that can be used to control…


In this post, we will explore how to use the Angular CDK (Component Development Kit) to create an overlay that renders some content on top of other content.

The Angular CDK is a library built by the Angular Material team at Google. That said, the CDK itself is independent of any CSS styling, which means it is designed to be agnostic, and you can use it without Angular Material.

CDK Set-up

To use the Angular CDK, all we have to do is add it as a dependency of our Angular project:

npm install @angular/cdk

Once the CDK is installed, we import the…


ngIf code example

As Angular developers, we’re using the ngIf directive daily, so much so that we tend to use one or two familiar syntaxes and forget that quite a few options are available.

In this post, we’re going to cover all of the different possible syntaxes for ngIf.

1. *ngIf directive with a single condition

This is the most frequently used option when we want to show/hide a DOM element based upon a specific condition:

<div *ngIf="condition">
This DIV is displayed when "condition" is true
</div>

2. [ngIf] with ng-template

Our previous example is syntactic sugar for the following syntax:

<ng-template [ngIf]="condition">
<div>This DIV is displayed when "condition" is true</div>
</ng-template>

Note that…


With its version 10, NgRx has released a new package called @ngrx/component. This package includes helpers to facilitate reactive coding practices at the component level.

If you’ve heard about NgRx before, it was most likely a Redux-like state management solution for Angular, known as @ngrx/store. In fact, NgRx stands for Reactive eXtensions for Angular, which is more than just state management.

This post will look at one of the new features of @ngrx/component: The ngrxLet directive.

The async pipe

If you’re familiar with the async pipe in Angular, you can skip this section.

The async pipe's main purpose is to allow us to…

Alain Chautard

Google Developer Expert in Angular, Consultant and Trainer at http://www.angulartraining.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store