Add support for passing arguments to translate function

libs/components/src/i18n/i18n.component.ts

@@ -53,6 +53,12 @@ export class I18nComponent implements AfterContentInit {
   @Input("key")
   translationKey: string;
 
+  /**
+   * Optional arguments to pass to the translation function.
+   */
+  @Input()
+  args: (string | number)[] = [];
+
   @ContentChildren(I18nTagDirective)
   templateTags: QueryList<I18nTagDirective>;
 
@@ -61,7 +67,14 @@ export class I18nComponent implements AfterContentInit {
   constructor(private i18nService: I18nService) {}
 
   ngAfterContentInit() {
-    this.translationParts = this.parseTranslatedString(this.i18nService.t(this.translationKey));
+    const translatedText = this.i18nService.t(
+      this.translationKey,
+      this.args[0],
+      this.args[1],
+      this.args[2]
+    );
+
+    this.translationParts = this.parseTranslatedString(translatedText);
     // Assign any templateRefs to the translation parts
     this.templateTags.forEach((tag, index) => {
       this.translationParts.forEach((part) => {

libs/components/src/i18n/i18n.mdx

@@ -32,12 +32,12 @@ will be rendered as is.
     The entire sentence can be <2>translated as a whole</2> and re-arranged according to each language's grammar rules."
 -->
 <bit-i18n key="basicExample">
-  <a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
   <!-- <0></0> -->
-  <strong *bit-i18n-tag="let text">{{ text }}</strong>
+  <a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
   <!-- <1></1> -->
+  <strong *bit-i18n-tag="let text">{{ text }}</strong>
+  <!-- <2></2> -->
   <a *bit-i18n-tag="let text" href="#">
-    <!-- <2></2> -->
     <strong>{{ text }}</strong>
   </a>
 </bit-i18n>
@@ -80,10 +80,30 @@ rendered as is.
    The entire sentence can be <2>translated as a whole</2> and re-arranged according to each language's grammar rules."
 -->
 <bit-i18n key="basicExample">
-  <a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
   <!-- <0></0> -->
-  <strong *bit-i18n-tag="let text">{{ text }}</strong>
+  <a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
   <!-- <1></1> -->
+  <strong *bit-i18n-tag="let text">{{ text }}</strong>
   <!-- Missing template for <2></2> -->
 </bit-i18n>
 ```
+
+## Missing Template Example
+
+You can also pass arguments to the `i18nService.t()` method via the `[args]` input attribute;
+
+<Story of={stories.ArgsExample} />
+
+<br />
+
+### Source
+
+```html
+<!-- argExample in messages.json
+   `This is an example with <0>link</0> tags and $SOME_ARG$.`
+-->
+<bit-i18n key="argExample" [args]="['passed args']">
+  <!-- <0></0> -->
+  <a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
+</bit-i18n>
+```

libs/components/src/i18n/i18n.stories.ts

@@ -24,6 +24,7 @@ export default {
               otherExample: `
               This is another example with <1>bold</1> tags to show that tag order does not matter
               and the <0>link</0> tags are after.`,
+              argExample: (arg1: string) => `This is an example with <0>link</0> tags and ${arg1}.`,
             });
           },
         },
@@ -63,6 +64,18 @@ export const AttributeSelector: Story = {
   }),
 };
 
+export const ArgsExample: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+<p bit-i18n key="argExample" [args]="['passed args']">
+  <a *bit-i18n-tag="let text" href="javascript:;">{{ text }}</a>
+  <strong *bit-i18n-tag="let text">{{ text }}</strong>
+</p>
+    `,
+  }),
+};
+
 export const MissingTemplate: Story = {
   render: (args) => ({
     props: args,