> For the complete documentation index, see [llms.txt](https://jsverse.gitbook.io/transloco/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jsverse.gitbook.io/transloco/resources/faqs.md).

# FAQs

### Why does the translation fail when using `translate()` inside `ngOnInit`, but work with the structural directive?

The issue arises because loading translations is asynchronous, while `translate()` is synchronous. You have two options to fix this:

1. Subscribe to Transloco service events and call `translate()` inside the subscription.
2. Use `selectTranslate()` instead.

The structural directive works because it waits for the translation to load before rendering, which is why it works in the template.

***

### Can I use an Angular component inside a translation string?

It’s not possible with AOT compilation. However, you can:

1. Convert the component into a web component using `@angular/elements` and use the custom tag in the translation.
2. Split the translation into two parts and insert the component in between.

***

### What about `getBrowserLang()` in SSR?

`getBrowserLang()` only works in the browser context. For SSR, set a default language as a fallback:

```typescript
const defaultLang = getBrowserLang() || 'en';
```

***

### Can I include HTML markup inside a translation?

Yes, you can use HTML tags in your translations by binding the translated string to `innerHTML`. Here is a simple example:

With key-value as:

```json
{ 
  "contact": "Contact <a href=\"mailto:support@example.com\">support@example.com</a> for assistance." 
}
```

And, in template:

```angular-html
<p [innerHTML]="t('contact')">
```

You can also check out [ngx-transloco-markup](https://github.com/dscheerens/ngx-transloco-markup).

***

### Isn’t calling a function from the template using the structural directive bad practice?

No, it's actually recommended. The structural directive is efficient and DRY, as it creates a single subscription in the template. Additionally, `t` is memoized, meaning repeated translations for the same key are cached. When using the OnPush change detection strategy, this can significantly reduce change detection cycles.

***

### Why do values not get translated in unit tests?

In unit tests, it’s your responsibility to ensure that translations are loaded before calling `translate()`. To make sure translations are ready, set `preloadLangs: true` in the options passed to `TranslocoTestingModule.forRoot`.

***

### Why doesn't querying an element inside the `*transloco` directive with `@ViewChild()` work?

The `*transloco` directive involves an asynchronous operation that fetches translations. As a result, the element inside the directive is not available until the translations are loaded. To access the element after rendering, use a setter for the `ViewChild`.

***

### I'm having \`flat\` related issues when running Jest tests after upgrading to the latest version of Transloco. How can I resolve this?

This issue is primarily related to Jest's ESM support and is not directly tied to Transloco. However, you can upgrade to Transloco v7.5.1+ where the flat dependency was removed, or alternatively, you can try one of the solutions suggested in [this GitHub issue](https://github.com/jsverse/transloco/issues/714).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://jsverse.gitbook.io/transloco/resources/faqs.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.