微信扫一扫Intlayer Angular Usage
Core Philosophy
Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in *.content.ts files adjacent to the Angular components that use them.
Workflow
To create a translated component, you need two files:
- Declaration: A content file (e.g.,
my-component.content.ts) defining the dictionary. - Implementation: An Angular component (e.g.,
my-component.component.ts) using theuseIntlayersignal.
1. Declare Content
Create a content file using t() for translations.
File: src/app/my-component/my-component.content.ts
import { t, type Dictionary } from "intlayer";
const content = {
// The 'key' must be unique and matches what you pass to useIntlayer()
key: "my-component",
content: {
text: t({
en: "Welcome",
fr: "Bienvenue",
es: "Hola",
}),
},
} satisfies Dictionary;
export default content;
Setup
Register provideIntlayer() in the providers of your ApplicationConfig (see the Angular guide).
useIntlayer Hook
In Angular, useIntlayer returns a Signal. You must call it as a function to access the value.
import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";
@Component({
selector: "app-my-component",
standalone: true,
template: `
<div>
<h1>
{{ content().text }}
</h1>
<img [src]="content().text.value" [alt]="content().text.value" />
</div>
`,
})
export class MyComponent {
content = useIntlayer("my-component");
}
Compiler
The Intlayer Compiler can extract all your content keys from your components, using one CLI command (npx intlayer extract) or automatically at app build.