Latest tips / 5

If you want to create a collection from a folder in your Eleventy project, like a collection of blog posts in the posts folder, you could manually add a post tag to every post. But there is an easier way.

The Collection API in Eleventy lets you filter your pages by glob patterns:

module.exports = (eleventyConfig) => {
  eleventyConfig.addCollection("posts", function (collectionApi) {
    return collectionApi.getFilteredByGlob("posts/*.md");
  });
};

This will create a collection "posts" that contains all the markdown files in the posts folder.

A factory function provider in Angular can have dependencies using the deps property.

@NgModule({
  providers: [
    {
      provide: SOME_INJECTION_TOKEN,
      deps: [MyService],
      useFactory: (myService: myService) => {
        return myService.someMethod();
      },
    },
  ],
})
export class MyModule {}

The problem is that you need to write the dependencies twice: once for the deps property and once as arguments of the useFactory function. Thanks to the new inject() function in Angular 14 there is now a better way to inject dependencies.

Call the inject() function and pass your dependency (here MyService) as argument. It will provide you the dependency and the return value is type-safe.

import { inject } from "@angular/core";

@NgModule({
  providers: [
    {
      provide: SOME_INJECTION_TOKEN,
      useFactory: () => {
        const myService = inject(MyService);
        return myService.someMethod();

        // Or as a one-liner:
        // return inject(MyService).someMethod();
      },
    },
  ],
})
export class MyModule {}

After switching to another branch, you can use the git switch - command to switch back to the previous branch without having to reenter the name:

# Feature branch is active
$ git branch --show-current
feature/some-feature

# Switch to another branch
$ git switch main

# Do some work ...

# Switch back to "feature/some-feature"
$ git switch -

Angular generates a unique id for your app which is available via APP_ID injection token. This is useful if you are in a micro-frontend with multiple Angular apps on the same page and you need a unique value.

import { APP_ID } from "@angular/core";

@Component()
export class MyComponent {
  constructor(@Inject(APP_ID) private appId: string) {
    console.log("App id:", appId); // Example: "pvu"
  }
}

Angular uses the app id for prefixing your CSS selectors when using ViewEncapsulation.Emulated. You can define your own id by providing the token as a provider in your app module:

import { APP_ID } from "@angular/core";

@NgModule({
  // ...
  providers: [
    {
      provide: APP_ID,
      useValue: "42",
    },
  ],
})
export class AppModule {}

Eleventy v1.0.0 (and above) supports Nunjucks globals. This lets you register a global value or function that is available in all Nunjucks templates.

module.exports = (eleventyConfig) {
  // Register two globals, a static value and a function
  eleventyConfig.addNunjucksGlobal("message", "Hello World");
  eleventyConfig.addNunjucksGlobal("greeting", (name) => `Hello ${name}`);
}

Now you can use {{ message }} and {{ greeting('John') }} in your Nunjucks templates.

A more useful example is a global function that generates a unique id. You may need this if you want to connect a label with its input or for aria-labelledby and aria-describedby. Here I use the nanoid package to generate the id:

const { nanoid } = require("nanoid");
module.exports = (eleventyConfig) =>
  eleventyConfig.addNunjucksGlobal("nanoid", () => nanoid());
};

Now you can create a new unique id, assign it to a local variable and use it to connect two HTML elements:

{% set id = nanoid() %}
<article aria-labelledby="{{ id }}">
  <h2 id="{{ id }}">...</h2>
  <p>...</p>
</article>

In the example above we connect the h2 with the article element using aria-labelledby.