From 1e5469022a46842e6653f7d07c9d3cbbacd4f0c1 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 14 Sep 2018 13:44:05 -0700
Subject: [PATCH] SHIBUI-814 Converted text to use new directives

---
 .../resources/i18n/messages_en.properties     |  20 ++-
 ui/src/app/app.component.html                 |  13 +-
 .../component/change-item.component.html      |   2 +-
 .../contention-dialog.component.html          |  15 +-
 ui/src/app/contention/contention.module.ts    |   4 +-
 .../forms/advanced-info-form.component.html   |  79 +++++++----
 .../forms/assertion-form.component.html       |  38 ++---
 .../attribute-release-form.component.html     |  12 +-
 .../forms/descriptor-info-form.component.html |  22 +--
 .../forms/finish-form.component.html          | 112 +++++++--------
 .../forms/key-info-form.component.html        |  68 +++++----
 .../forms/logout-form.component.html          |  24 ++--
 .../forms/metadata-ui-form.component.html     |  66 ++++++---
 .../organization-info-form.component.html     |  58 +++++---
 .../forms/relying-party-form.component.html   |  81 +++++++----
 ui/src/app/metadata/domain/component/index.ts |   4 +-
 .../component/preview-dialog.component.html   |   6 +-
 ui/src/app/metadata/domain/domain.module.ts   |   4 +-
 .../component/search-dialog.component.html    |  10 +-
 .../container/edit-filter.component.html      |   6 +-
 .../container/new-filter.component.html       |   6 +-
 ui/src/app/metadata/filter/filter.module.ts   |   4 +-
 .../component/delete-dialog.component.html    |  10 +-
 .../component/provider-item.component.html    |   5 +-
 .../component/provider-search.component.html  |   6 +-
 .../component/resolver-item.component.html    |  16 +--
 .../dashboard-providers-list.component.html   |   2 +-
 .../dashboard-resolvers-list.component.html   |   2 +-
 ui/src/app/metadata/metadata.module.ts        |   4 +-
 .../component/delete-filter.component.html    |   8 +-
 .../component/unsaved-provider.dialog.html    |   8 +-
 .../container/provider-edit.component.html    |   6 +-
 .../container/provider-wizard.component.html  |   2 +-
 .../app/metadata/provider/provider.module.ts  |   4 +-
 .../component/unsaved-dialog.component.html   |  12 +-
 .../component/wizard-nav.component.html       |   8 +-
 .../container/blank-resolver.component.html   |  18 +--
 .../container/confirm-copy.component.html     |  12 +-
 .../container/copy-resolver.component.html    |  36 ++---
 .../resolver/container/editor.component.html  |   6 +-
 .../container/new-resolver.component.html     |  14 +-
 .../container/upload-resolver.component.html  |  22 +--
 .../resolver/container/wizard.component.html  |   4 +-
 .../app/metadata/resolver/resolver.module.ts  |   4 +-
 .../widget/array/array.component.html         |   2 +-
 .../boolean-radio.component.html              |   4 +-
 .../widget/check/checkbox.component.html      |   2 +-
 .../widget/check/checklist.component.html     |  12 +-
 .../widget/datalist/datalist.component.html   |   4 +-
 .../filter-target.component.html              |   8 +-
 .../widget/number/number.component.html       |   4 +-
 .../widget/select/select.component.html       |   4 +-
 .../widget/string/string.component.html       |   4 +-
 .../widget/textarea/textarea.component.html   |   4 +-
 .../shared/component/i18n-text.component.html | 133 +++++++++---------
 .../wizard/component/wizard.component.html    |   9 +-
 56 files changed, 591 insertions(+), 462 deletions(-)

diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
index b9f3e0049..0cabb3ccd 100644
--- a/backend/src/main/resources/i18n/messages_en.properties
+++ b/backend/src/main/resources/i18n/messages_en.properties
@@ -3,11 +3,27 @@ action.logout=Logout
 action.add-new=Add New
 action.clear=Clear
 
+action.use-mine=Use My Changes
+action.use-theirs=Use Their Changes
+
 heading.shibboleth=Shibboleth { foo }
 
-label.metadata-sources=Metadata Sources
 label.metadata-source=Metadata Source
-label.metadata-providers=Metadata Providers
+label.metadata-sources=Metadata Sources
 label.metadata-provider=Metadata Provider
+label.metadata-providers=Metadata Providers
 label.source-management=Source Management
 label.search-files=Search Files
+
+label.service-provider-entity-id=Service Provider Entity ID
+
+label.my-changes=My Changes
+label.their-changes=Their Changes
+
+label.service-provider-name-dashboard-display-only=Service Provider Name (Dashboard Display Only)
+
+
+message.data-version-contention=Data Version Contention
+message.contention-new-version=A newer version of this metadata source has been saved. Below are a list of changes. You can use your changes or their changes.
+
+tooltip.service-provider-name-dashboard-display-only=Service Provider Name (Dashboard Display Only) popover
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 51cf460d0..c88ee5bee 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -1,10 +1,9 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <nav class="navbar navbar-expand-md fixed-top">
     <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description">
         <img [src]="brand.logo.small" width="30" height="30" class="d-inline-block align-top" [alt]="brand.logo.alt">
         <span class="d-lg-inline d-none">{{ brand.logo.link.label }}</span>
     </a>
-    <span class="navbar-text" i18n="@@label--app">{{ brand.header.title }}</span>
+    <span class="navbar-text">{{ brand.header.title }}</span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
             aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -30,7 +29,7 @@
                         role="button">
                         <i class="fa fa-cube fa-fw" aria-hidden="true"></i>
                         &nbsp;
-                        <ng-container i18n="@@action--add-source">Metadata Source</ng-container>
+                        <translate key="label.metadata-source">Metadata Source</translate>
                     </a>
                     <a class="nav-link"
                         routerLink="/metadata/provider/wizard"
@@ -39,20 +38,20 @@
                         role="button">
                         <i class="fa fa-cubes fa-fw" aria-hidden="true"></i>
                         &nbsp;
-                        <ng-container i18n="@@action--add-filter">Metadata Provider</ng-container>
+                        <translate key="label.metadata-provider">Metadata Provider</translate>
                     </a>
                 </div>
             </li>
             <li class="nav-item">
                 <a class="nav-link" routerLink="/metadata" routerLinkActive="active" aria-label="Metadata Dashboard">
                     <i class="fa fa-th fa-fw" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--dashboard">Dashboard</ng-container>
+                    <translate key="action.dashboard">Dashboard</translate>
                 </a>
             </li>
             <li>
                 <a class="nav-link" href="/logout" target="_self" aria-label="Log out of Shibboleth UI">
                     <i class="fa fa-sign-out fa-fw" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--logout">Logout</ng-container>
+                    <translate key="action.logout">Logout</translate>
                 </a>
             </li>
         </ul>
@@ -78,7 +77,7 @@
                 {{ formatted$ | async }}
                 &nbsp;|&nbsp;
                 </ng-container>
-                <ng-container i18n="@@label--copyright">Copyright</ng-container> &copy; {{ today | date:'yyyy' }} Internet2
+                <translate key="label.copyright" [params]="{ year: year }">Copyright &copy; Internet2</translate>
             </p>
         </div>
         <div class="col-md-4 logo">
diff --git a/ui/src/app/contention/component/change-item.component.html b/ui/src/app/contention/component/change-item.component.html
index b2c4aac8b..4a915a51e 100644
--- a/ui/src/app/contention/component/change-item.component.html
+++ b/ui/src/app/contention/component/change-item.component.html
@@ -2,7 +2,7 @@
     <h5 class="mb-1"><i18n-text [key]="item.label"></i18n-text></h5>
     <small *ngIf="item.conflict">
         <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
-        <span class="sr-only">Conflict</span>
+        <span class="sr-only" translate="message.conflict">Conflict</span>
     </small>
 </div>
 <ng-container [ngSwitch]="type">
diff --git a/ui/src/app/contention/component/contention-dialog.component.html b/ui/src/app/contention/component/contention-dialog.component.html
index 461af81b7..99fa5b1f3 100644
--- a/ui/src/app/contention/component/contention-dialog.component.html
+++ b/ui/src/app/contention/component/contention-dialog.component.html
@@ -1,16 +1,17 @@
-<div i18n-aria-label="@@message--data-version-contention" aria-label="Data Version Contention" role="region" tabindex="0">
+<div i18n-aria-label="@@message.data-version-contention" aria-label="Data Version Contention" role="region" tabindex="0">
     <div class="modal-header">
-        <h4 class="modal-title" i18n="@@message--data-version-contention">Data Version Contention</h4>
+        <h4 class="modal-title" translate="message.data-version-contention">Data Version Contention</h4>
     </div>
     <div class="modal-body">
         <div class="d-flex w-100 justify-content-between">
             <i class="fa fa-fw fa-exclamation-triangle fa-3x text-warning"></i>
-            <p class="ml-2" i18n="@message--contention-new-version">A newer version of this metadata source has been saved. Below are a list of changes. You can use your changes or their changes.</p>
+            <p class="ml-2" translate="message.contention-new-version">A newer version of this metadata source has been saved. Below are a list of changes. You can use your changes or their
+            changes.</p>
         </div>
         <div class="row">
             <div class="col col-6">
                 <div class="card">
-                    <div class="card-header bg-info text-white">
+                    <div class="card-header bg-info text-white" translate="label.my-changes">
                         My Changes
                     </div>
                     <div class="list-group list-group-flush">
@@ -20,7 +21,7 @@ <h4 class="modal-title" i18n="@@message--data-version-contention">Data Version C
             </div>
             <div class="col col-6">
                 <div class="card">
-                    <div class="card-header bg-danger text-white">
+                    <div class="card-header bg-danger text-white" translate="label.their-changes">
                         Their Changes
                     </div>
                     <div class="list-group list-group-flush">
@@ -32,12 +33,12 @@ <h4 class="modal-title" i18n="@@message--data-version-contention">Data Version C
     </div>
     <div class="modal-footer">
         <button
-            i18n="@@action--use-mine"
+            translate="action.use-mine"
             class="btn btn-info"
             (click)="activeModal.close(resolutionObj)"
             [disabled]="!resolutionObj">Use My Changes</button>
         <button
-            i18n="@@action--use-theirs"
+            translate="action.use-theirs"
             class="btn btn-danger"
             (click)="activeModal.dismiss(rejectionObj)"
             [disabled]="!rejectionObj">Use Their Changes</button>
diff --git a/ui/src/app/contention/contention.module.ts b/ui/src/app/contention/contention.module.ts
index 4ce48c3c3..5ecc3c680 100644
--- a/ui/src/app/contention/contention.module.ts
+++ b/ui/src/app/contention/contention.module.ts
@@ -9,6 +9,7 @@ import { ContentionDialogComponent } from './component/contention-dialog.compone
 import { ChangeItemComponent } from './component/change-item.component';
 import { ContentionService } from './service/contention.service';
 import { SharedModule } from '../shared/shared.module';
+import { I18nModule } from '../i18n/i18n.module';
 
 export const COMPONENTS = [
     ContentionDialogComponent,
@@ -20,7 +21,8 @@ export const COMPONENTS = [
         CommonModule,
         SharedModule,
         StoreModule.forFeature('contention', reducers),
-        EffectsModule.forFeature([ContentionEffects])
+        EffectsModule.forFeature([ContentionEffects]),
+        I18nModule
     ],
     providers: [
         ContentionService
diff --git a/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html b/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
index 8ab1ac8b5..58d940b93 100644
--- a/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
@@ -5,15 +5,17 @@
                 <div class="row">
                     <label for="serviceProviderName" class="col-sm-10">
                         <span>
-                            <ng-container i18n="@@label--service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</ng-container>
+                            <translate key="label.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</translate>
                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipServiceProviderNameDashboardDisplayOnly i18n="@@tooltip--service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only) popover</ng-template>
+                        <ng-template #tooltipServiceProviderNameDashboardDisplayOnly>
+                            <translate key="tooltip.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only) popover</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipServiceProviderNameDashboardDisplayOnly"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -28,15 +30,17 @@
                 <div class="row">
                     <label for="entityId" class="col-sm-10">
                         <span>
-                            <ng-container i18n="@@label--service-provider-entity-id">Service Provider Entity ID</ng-container>
+                            <translate key="label.service-provider-entity-id">Service Provider Entity ID</translate>
                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipServiceProviderEntityID i18n="@@tooltip--service-provider-entity-id">Service Provider Entity ID popover</ng-template>
+                        <ng-template #tooltipServiceProviderEntityID>
+                            <translate key="tooltip.service-provider-entity-id">Service Provider Entity ID popover</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipServiceProviderEntityID"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -50,7 +54,9 @@
             <div class="form-group">
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse" for="serviceEnabled">
                     <input disableValidation="true" class="custom-control-input" type="checkbox" formControlName="serviceEnabled" id="serviceEnabled" name="serviceEnabled" role="checkbox">
-                    <label class="custom-control-label" i18n="@@label--enable-this-service" for="serviceEnabled" aria-label="Enable this service?">Enable this service?</label>
+                    <label class="custom-control-label" for="serviceEnabled" aria-label="Enable this service?">
+                        <translate key="label.enable-this-service">Enable this service?</translate>
+                    </label>
                 </div>
             </div>
             <div formGroupName="organization">
@@ -58,15 +64,17 @@
                     <div class="row">
                         <label for="name" class="col-sm-10">
                             <span>
-                                <ng-container i18n="@@label--organization-name">Organization Name</ng-container>
+                                <translate key="label.organization-name">Organization Name</translate>
                                 <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" *ngIf="hasValue$ | async"></i>
                             </span>
                         </label>
                         <span class="col-sm-2 text-right">
-                            <ng-template #tooltipOrganizationName i18n="@@tooltip--organization-name">Organization Name popover</ng-template>
+                            <ng-template #tooltipOrganizationName>
+                                <translate key="tooltip.organization-name">Organization Name popover</translate>
+                            </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipOrganizationName"
-                               i18n-aria-label="@@tooltip--instruction"
+                               i18n-aria-label="@@tooltip.instruction"
                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
@@ -81,15 +89,17 @@
                     <div class="row">
                         <label for="displayName" class="col-sm-10">
                             <span>
-                                <ng-container i18n="@@label--organization-display-name">Organization Display Name</ng-container>
+                                <translate key="label.organization-display-name">Organization Display Name</translate>
                                 <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" *ngIf="hasValue$ | async"></i>
                             </span>
                         </label>
                         <span class="col-sm-2 text-right">
-                            <ng-template #tooltipOrganizationDisplayName i18n="@@tooltip--organization-display-name">Organization Display Name popover</ng-template>
+                            <ng-template #tooltipOrganizationDisplayName>
+                                <translate translate="tooltip.organization-display-name">Organization Display Name popover</translate>
+                            </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipOrganizationDisplayName"
-                               i18n-aria-label="@@tooltip--instruction"
+                               i18n-aria-label="@@tooltip.instruction"
                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
@@ -104,15 +114,17 @@
                     <div class="row">
                         <label for="url" class="col-sm-10">
                             <span>
-                                <ng-container i18n="@@label--organization-url">Organization URL</ng-container>
+                                <translate key="label.organization-url">Organization URL</translate>
                                 <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" *ngIf="hasValue$ | async"></i>
                             </span>
                         </label>
                         <span class="col-sm-2 text-right">
-                            <ng-template #tooltipOrganizationURL i18n="@@tooltip--organization-url">Organization URL popover</ng-template>
+                            <ng-template #tooltipOrganizationURL>
+                                <translate key="tooltip.organization-url">Organization URL popover</translate>
+                            </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipOrganizationURL"
-                               i18n-aria-label="@@tooltip--instruction"
+                               i18n-aria-label="@@tooltip.instruction"
                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
@@ -124,12 +136,14 @@
                            role="textbox" />
                 </div>
             </div>
-            <p class="text-danger" *ngIf="form.get('organization').hasError('org')" i18n="@@message--organization-feedback">* These three fields must all be entered if any single field has a value.</p>
+            <p class="text-danger" *ngIf="form.get('organization').hasError('org')" translate="message.organization-feedback">* These three fields must all be entered if any single field has a value.</p>
         </fieldset>
         <fieldset class="form-section col">
             <p>
-                <ng-container i18n="@@label--contact-information">Contact Information: &nbsp;</ng-container>
-                <button class="btn btn-success btn-sm" (click)="addContact()" i18n="@@action--add-contacts" aria-label="Add contact to accordion group" role="button">Add Contact</button>
+                <translate key="label.contact-information">Contact Information:</translate>&nbsp;&nbsp;
+                <button class="btn btn-success btn-sm" (click)="addContact()" translate="action.add-contacts" aria-label="Add contact to accordion group" role="button">
+                    Add Contact
+                </button>
             </p>
             <div formArrayName="contacts" class="bg-light border rounded p-4" *ngIf="contacts.length">
                 <ul class="list-group" id="contactAccordionGroup" aria-label="Contact information accordion group" tabindex="0" role="presentation">
@@ -161,13 +175,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'name-' + i" class="col-sm-9">
-                                                <ng-container i18n="@@label--name">Name</ng-container>
+                                                <translate key="label.name">Name</translate>
                                             </label>
                                             <span class="col-sm-3 text-right">
-                                                <ng-template #tooltipName i18n="@@tooltip--name">Name popover</ng-template>
+                                                <ng-template #tooltipName>
+                                                    <translate key="tooltip.name">Name popover</translate>
+                                                </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipName"
-                                                   i18n-aria-label="@@tooltip--instruction"
+                                                   i18n-aria-label="@@tooltip.instruction"
                                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
@@ -184,13 +200,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'type-' + i" class="col-sm-9">
-                                                <ng-container i18n="@@label--type">Type</ng-container>
+                                                <translate key="label.type">Type</translate>
                                             </label>
                                             <span class="col-sm-3 text-right">
-                                                <ng-template #tooltipType i18n="@@tooltip--type">Type popover</ng-template>
+                                                <ng-template #tooltipType>
+                                                    <translate key="tooltip.type">Type popover</translate>
+                                                </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipType"
-                                                   i18n-aria-label="@@tooltip--instruction"
+                                                   i18n-aria-label="@@tooltip.instruction"
                                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
@@ -207,13 +225,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'email-' + i" class="col-sm-10">
-                                                <ng-container i18n="@@label--email-address">Email Address</ng-container>
+                                                <translate key="label.email-address">Email Address</translate>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipEmailAddress i18n="@@tooltip--email-address">Email Address popover</ng-template>
+                                                <ng-template #tooltipEmailAddress>
+                                                    <translate translate="tooltip.email-address">Email Address popover</translate>
+                                                </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipEmailAddress"
-                                               i18n-aria-label="@@tooltip--instruction"
+                                               i18n-aria-label="@@tooltip.instruction"
                                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
@@ -222,10 +242,11 @@
                                                class="form-control"
                                                placeholder=""
                                                formControlName="emailAddress"
+                                               i18n-aria-label="label.contact-email-address"
                                                aria-label="Contact email address"
                                                role="textbox" />
                                         <small class="form-text text-danger" *ngIf="contact.get('emailAddress').touched && contact.get('emailAddress').hasError('email')">
-                                            <ng-container i18n="@@message--valid-email">Must be a valid Email Address</ng-container>
+                                            <translate key="message.valid-email">Must be a valid Email Address</translate>
                                         </small>
                                     </div>
                                 </div>
diff --git a/ui/src/app/metadata/domain/component/forms/assertion-form.component.html b/ui/src/app/metadata/domain/component/forms/assertion-form.component.html
index 1665f3507..65056ee9e 100644
--- a/ui/src/app/metadata/domain/component/forms/assertion-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/assertion-form.component.html
@@ -2,8 +2,8 @@
     <div class="row">
         <fieldset class="col col-xl-6 form-section">
             <p>
-                <span i18n="@@label--assertion-consumer-service-endpoints">Assertion Consumer Service Endpoints: </span>
-                <button class="btn btn-success btn-sm" (click)="addEndpoint()" i18n="@@action--add-endpoint" aria-label="Add assertion consumer service endpoint to accordion group" role="button">Add Endpoint</button>
+                <span translate="label.assertion-consumer-service-endpoints">Assertion Consumer Service Endpoints: </span>
+                <button class="btn btn-success btn-sm" (click)="addEndpoint()" translate="action.add-endpoint" aria-label="Add assertion consumer service endpoint to accordion group" role="button">Add Endpoint</button>
             </p>
             <div formArrayName="assertionConsumerServices" class="bg-light border rounded p-4" *ngIf="assertionConsumerServices.length">
                 <ul class="list-group" aria-label="Assertion consumer endpoints accordion" tabindex="0" role="presentation">
@@ -18,11 +18,11 @@
                                     <i class="fa fa-fw" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         <ng-container *ngIf="endpoint.get('locationUrl').value">{{ endpoint.get('locationUrl').value }}</ng-container>
-                                        <ng-container *ngIf="!endpoint.get('locationUrl').value" i18n="@@label--new-endpoint">New Endpoint</ng-container>
+                                        <translate *ngIf="!endpoint.get('locationUrl').value" key="label.new-endpoint">New Endpoint</translate>
                                         {{ i }}
                                     </span>
                                     <i class="fa fa-fw fa-check-square fa-lg text-success" aria-hidden="true" *ngIf="endpoint.get('makeDefault').value === true"></i>
-                                    <small class="sr-only" *ngIf="endpoint.get('makeDefault').value === true" i18n="@@label--default">(default)</small>
+                                    <small class="sr-only" *ngIf="endpoint.get('makeDefault').value === true" translate="label.default">(default)</small>
                                 </div>
                                 <div class="col-sm-2 text-right">
                                     <button class="btn btn-link btn-sm text-danger" (click)="removeEndpoint(i)" aria-label="Delete assertion consumer service endpoint" role="button">
@@ -36,19 +36,21 @@
                             <div class="form-group">
                                 <div class="row">
                                     <label [for]="'location-' + i" class="col-sm-10">
-                                        <ng-container i18n="@@label--assertion-consumer-services-location" i18n="@@label--assertion-consumer-service-locations">Assertion Consumer Service Location</ng-container>
+                                        <translate key="label.assertion-consumer-services-location">Assertion Consumer Service Location</translate>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipAssertionConsumerServiceLocation i18n="@@tooltip--assertion-consumer-service-location">Assertion Consumer Service Location popover</ng-template>
+                                        <ng-template #tooltipAssertionConsumerServiceLocation>
+                                            <translate key="tooltip.assertion-consumer-service-location">Assertion Consumer Service Location popover</translate>
+                                        </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipAssertionConsumerServiceLocation"
-                                           i18n-aria-label="@@tooltip--instruction"
+                                           i18n-aria-label="@@tooltip.instruction"
                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                     </span>
                                 </div>
                                 <input [id]="'location-' + i" type="text" class="form-control" placeholder="" formControlName="locationUrl" aria-label="Assertion consumer service endpoint location" role="textbox" />
                                 <small class="form-text text-danger" *ngIf="endpoint.get('locationUrl').hasError('pattern')">
-                                    <ng-container i18n="@@message--valid-url">Must be a valid URL</ng-container>
+                                    <translate key="message.valid-url">Must be a valid URL</translate>
                                 </small>
                             </div>
                             <div class="row">
@@ -56,18 +58,20 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'binding-' + i" class="col-sm-10">
-                                                <ng-container i18n="@@label--assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</ng-container>
+                                                <translate key="label.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipAssertionConsumerServiceLocationBinding i18n="@@tooltip--assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</ng-template>
+                                                <ng-template #tooltipAssertionConsumerServiceLocationBinding>
+                                                    <translate key="tooltip.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate>
+                                                </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipAssertionConsumerServiceLocationBinding"
-                                               i18n-aria-label="@@tooltip--instruction"
+                                               i18n-aria-label="@@tooltip.instruction"
                                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
                                         <select [id]="'binding-' + i" class="form-control" formControlName="binding" role="listbox" aria-label="Assertion consumer service location binding type">
-                                            <option disabled selected [ngValue]="null" hidden i18n="@@label--select-binding" role="option">Select Binding Type</option>
+                                            <option disabled selected [ngValue]="null" hidden translate="label.select-binding" role="option">Select Binding Type</option>
                                             <option *ngFor="let opt of bindingTypes; let i=index;" [value]="opt" [attr.aria-label]="opt" role="option">
                                                 {{ opt }}
                                             </option>
@@ -78,11 +82,13 @@
                                     <div class="form-check">
                                         <fieldset aria-label="Mark this assertion consumer service endpoint as the default?">
                                             <label class="d-block">
-                                                <ng-container i18n="@@label--mark-as-default">Mark as Default</ng-container>
-                                                <ng-template #tooltipMarkAsDefault i18n="@@tooltip--mark-as-default">Mark as Default</ng-template>
+                                                <translate key="label.mark-as-default">Mark as Default</translate>
+                                                <ng-template #tooltipMarkAsDefault>
+                                                    <translate key="tooltip.mark-as-default">Mark as Default</translate>
+                                                </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipMarkAsDefault"
-                                                   i18n-aria-label="@@tooltip--instruction"
+                                                   i18n-aria-label="@@tooltip.instruction"
                                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </label>
                                             <div class="custom-control custom-checkbox custom-control-inline">
@@ -93,7 +99,7 @@
                                                     [checked]="endpoint.get('makeDefault').value"
                                                     aria-checked="false"
                                                     role="checkbox">
-                                                <label class="custom-control-label" for="markAsDefault-{{ i }}" i18n="@@label--yes">Yes</label>
+                                                <label class="custom-control-label" for="markAsDefault-{{ i }}" translate="label.yes">Yes</label>
                                             </div>
                                         </fieldset>
                                     </div>
diff --git a/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.html b/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.html
index f8c4d86f8..f6e70f5c2 100644
--- a/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.html
@@ -4,8 +4,8 @@
             <table class="table table-striped table-sm">
                 <thead>
                 <tr class="table-secondary">
-                    <th i18n="@@label--attribute-name">Attribute Name</th>
-                    <th i18n="@@label--yes">Yes</th>
+                    <th translate="label.attribute-name">Attribute Name</th>
+                    <th translate="label.yes">Yes</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -29,20 +29,20 @@
                         </td>
                     </tr>
                     <tr>
-                        <td scope="col" i18n="@@label--check-all-attributes">Check All Attributes</td>
+                        <td scope="col" translate="label.check-all-attributes">Check All Attributes</td>
                         <td scope="col">
                             <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()">
                                 <i class="fa fa-fw fa-check"></i>
-                                <span class="sr-only" i18n="@@label--check-all-attributes">Check All Attributes</span>
+                                <span class="sr-only" translate="label.check-all-attributes">Check All Attributes</span>
                             </button>
                         </td>
                     </tr>
                     <tr>
-                        <td scope="col" i18n="@@label--clear-all-attributes">Clear All Attributes</td>
+                        <td scope="col" translate="label.clear-all-attributes">Clear All Attributes</td>
                         <td scope="col">
                             <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()">
                                 <i class="fa fa-fw fa-times"></i>
-                                <span class="sr-only" i18n="@@label--clear-all-attributes">Clear All Attributes</span>
+                                <span class="sr-only" translate="label.clear-all-attributes">Clear All Attributes</span>
                             </button>
                         </td>
                     </tr>
diff --git a/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html b/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
index 40f56de26..7f53b5bbf 100644
--- a/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
@@ -4,32 +4,34 @@
             <div class="form-group">
                 <div class="row">
                     <label for="protocolSupportEnum" class="col-sm-10">
-                        <ng-container i18n="@@label--protocol-support-enumeration">Protocol Support Enumeration</ng-container>
+                        <translate key="label.protocol-support-enumeration">Protocol Support Enumeration</translate>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipProtocolSupportEnumeration i18n="@@tooltip--protocol-support-enumeration">Protocol Support Enumeration popover</ng-template>
+                        <ng-template #tooltipProtocolSupportEnumeration>
+                            <translate key="tooltip.protocol-support-enumeration">Protocol Support Enumeration popover</translate>
+                        </ng-template>
                     <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                        [ngbPopover]="tooltipProtocolSupportEnumeration"
-                       i18n-aria-label="@@tooltip--instruction"
+                       i18n-aria-label="@@tooltip.instruction"
                        aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
                 <select id="protocolSupportEnum" class="form-control" formControlName="protocolSupportEnum" aria-label="Protocol support enumeration dropdown" role="listbox">
-                    <option disabled selected [ngValue]="null" hidden i18n="@@label--select-protocol" role="option">Select Protocol</option>
+                    <option disabled selected [ngValue]="null" hidden translate="label.select-protocol" role="option">Select Protocol</option>
                     <option *ngFor="let opt of enumOptions" [value]="opt" [attr.aria-label]="opt" role="option">{{ opt }}</option>
                 </select>
             </div>
             <div class="form-group">
                 <div class="row">
                     <span class="col-sm-10">
-                        <ng-container i18n="@@label--nameid-format">NameID Format</ng-container>&nbsp;
-                        <button class="btn btn-success btn-sm" (click)="addFormat()" i18n="@@action--add-nameid-format" role="button">Add NameID Format</button>
+                        <translate key="label.nameid-format">NameID Format</translate>&nbsp;
+                        <button class="btn btn-success btn-sm" (click)="addFormat()" translate="action.add-nameid-format" role="button">Add NameID Format</button>
                     </span>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipNameIdFormat i18n="@@tooltip--nameid-format">Add NameID Format Popover</ng-template>
+                        <ng-template #tooltipNameIdFormat translate="tooltip.nameid-format">Add NameID Format Popover</ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipNameIdFormat"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -37,7 +39,9 @@
             <div formArrayName="nameIdFormats" class="form-group" *ngIf="nameIdFormats.length">
                 <div *ngFor="let format of nameIdFormats.controls; let i=index; let isLast=last" class="row">
                     <div class="col">
-                        <label [for]="'nameIdFormat-' + i" class="sr-only">NameID Format {{ i + 1 }}</label>
+                        <label [for]="'nameIdFormat-' + i" class="sr-only">
+                            <translate key="label.nameid-format">NameID Format</translate> {{ i + 1 }}
+                        </label>
                         <auto-complete
                             [id]="'nameIdFormat-' + i"
                             [formControlName]="i"
diff --git a/ui/src/app/metadata/domain/component/forms/finish-form.component.html b/ui/src/app/metadata/domain/component/forms/finish-form.component.html
index 3a2cb51a7..44aea8a56 100644
--- a/ui/src/app/metadata/domain/component/forms/finish-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/finish-form.component.html
@@ -6,51 +6,51 @@
                     <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                         <input class="custom-control-input" type="checkbox" id="serviceEnabled" formControlName="serviceEnabled">
                         <label class="custom-control-label"
-                            i18n="@@label--enable-this-service-opon-saving"
+                            translate="label.enable-this-service-opon-saving"
                             for="serviceEnabled">Enable this service upon saving?</label>
                     </div>
-                    <ng-template #tooltipEnableThisServiceUponSaving i18n="@@tooltip--enable-this-service-upon-saving">Enable this service upon saving popover</ng-template>
+                    <ng-template #tooltipEnableThisServiceUponSaving translate="tooltip.enable-this-service-upon-saving">Enable this service upon saving popover</ng-template>
                     <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                        [ngbPopover]="tooltipEnableThisServiceUponSaving"
-                       i18n-aria-label="@@tooltip--instruction"
+                       i18n-aria-label="@@tooltip.instruction"
                        role="tooltip"></i>
                 </div>
             </section>
             <section class="entity-section">
                 <h3 class="tag tag-success tag-sm my-4">
                     <span class="index">1</span>
-                    <ng-container i18n="@@label--name-and-entity-id">Name and Entity ID</ng-container>
+                    <translate key="label.name-and-entity-id">Name and Entity ID</ng-container>
                 </h3>
                 <dl>
-                    <dt class="text-primary" i18n="@@label--service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</dt>
+                    <dt class="text-primary" translate="label.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</dt>
                     <dd class="value">{{ resolver.serviceProviderName }}</dd>
-                    <dt class="text-primary" i18n="@@label--service-provider-entity-id">Service Provider Entity ID</dt>
+                    <dt class="text-primary" translate="label.service-provider-entity-id">Service Provider Entity ID</dt>
                     <dd class="value">{{ resolver.entityId }}</dd>
-                    <dt class="text-primary" i18n="@@label--enable-this-service">Enable this service?</dt>
+                    <dt class="text-primary" translate="label.enable-this-service">Enable this service?</dt>
                     <dd class="value">{{ resolver.serviceEnabled ? 'Yes' : 'No' }}</dd>
                 </dl>
             </section>
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 2]" class="tag tag-success tag-sm my-4" aria-label="Organization Information wizard page, step 2 - click to go back and make updates" role="button">
                     <span class="index">2</span>
-                    <ng-container i18n="@@label--organization-information">Organization Information</ng-container>
+                    <translate key="label.organization-information">Organization Information</ng-container>
                 </a>
                 <dl *ngIf="resolver.organization">
-                    <dt class="text-primary" i18n="@@label--organization-name">Organization Name</dt>
+                    <dt class="text-primary" translate="label.organization-name">Organization Name</dt>
                     <dd class="value">{{ resolver.organization.name }}</dd>
-                    <dt class="text-primary" i18n="@@label--organization-display-name">Organization Display Name</dt>
+                    <dt class="text-primary" translate="label.organization-display-name">Organization Display Name</dt>
                     <dd class="value">{{ resolver.organization.displayName }}</dd>
-                    <dt class="text-primary" i18n="@@label--organization-url">Organization URL</dt>
+                    <dt class="text-primary" translate="label.organization-url">Organization URL</dt>
                     <dd class="value">{{ resolver.organization.url }}</dd>
-                    <dt class="text-primary" i18n="@@label--contact-information">Contact Information</dt>
+                    <dt class="text-primary" translate="label.contact-information">Contact Information</dt>
                     <dd class="value">
                         <p class="text-secondary" *ngIf="!resolver.contacts.length">&mdash;</p>
                         <table class="table table-sm table-bordered table-striped" *ngIf="resolver.contacts.length">
                             <thead>
                             <tr class="table-secondary">
-                                <th scope="col" i18n="@@label--given-name">Given Name</th>
-                                <th scope="col" i18n="@@email-address">Email Address</th>
-                                <th scope="col" i18n=label--contact-type>Contact Type</th>
+                                <th scope="col" translate="label.given-name">Given Name</th>
+                                <th scope="col" translate="email-address">Email Address</th>
+                                <th scope="col" i18n=label.contact-type>Contact Type</th>
                             </tr>
                             </thead>
                             <tbody>
@@ -67,34 +67,34 @@ <h3 class="tag tag-success tag-sm my-4">
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 3]" class="tag tag-success tag-sm my-4" aria-label="User Interface / MDUI Information wizard page, step 3 - click to go back and make updates" role="button">
                     <span class="index">3</span>
-                    <ng-container i18n="@@label--user-interface-mdui-infromation">User Interface / MDUI Information</ng-container>
+                    <translate key="label.user-interface-mdui-infromation">User Interface / MDUI Information</ng-container>
                 </a>
                 <dl *ngIf="resolver.mdui">
-                    <dt class="text-primary" i18n="@@label--display-name">Display Name</dt>
+                    <dt class="text-primary" translate="label.display-name">Display Name</dt>
                     <dd class="value">{{ resolver.mdui.displayName }}</dd>
-                    <dt class="text-primary" i18n="@@label--information-url">Information URL</dt>
+                    <dt class="text-primary" translate="label.information-url">Information URL</dt>
                     <dd class="value">{{ resolver.mdui.informationUrl }}</dd>
-                    <dt class="text-primary" i18n="@@label--description">Description</dt>
+                    <dt class="text-primary" translate="label.description">Description</dt>
                     <dd class="value">{{ resolver.mdui.description }}</dd>
-                    <dt class="text-primary" i18n="@@label--privacy-statement">Privacy Statement URL</dt>
+                    <dt class="text-primary" translate="label.privacy-statement">Privacy Statement URL</dt>
                     <dd class="value">{{ resolver.mdui.privacyStatementUrl }}</dd>
-                    <dt class="text-primary" i18n="@@label--logo-url">Logo URL</dt>
+                    <dt class="text-primary" translate="label.logo-url">Logo URL</dt>
                     <dd class="value">{{ resolver.mdui.logoUrl }}</dd>
-                    <dt class="text-primary" i18n="@@label--logo-width">Logo Width</dt>
+                    <dt class="text-primary" translate="label.logo-width">Logo Width</dt>
                     <dd class="value">{{ resolver.mdui.logoWidth }}</dd>
-                    <dt class="text-primary" i18n="@@label--logo-height">Logo Height</dt>
+                    <dt class="text-primary" translate="label.logo-height">Logo Height</dt>
                     <dd class="value">{{ resolver.mdui.logoHeight }}</dd>
                 </dl>
             </section>
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 4]" class="tag tag-success tag-sm my-4" aria-label="SP SSO Descriptor Information wizard page, step 4 - click to go back and make updates" role="button">
                     <span class="index">4</span>
-                    <ng-container i18n="@@label--sp-sso-descriptor-information">SP SSO Descriptor Information</ng-container>
+                    <translate key="label.sp-sso-descriptor-information">SP SSO Descriptor Information</ng-container>
                 </a>
                 <dl *ngIf="resolver.serviceProviderSsoDescriptor">
-                    <dt class="text-primary" i18n="@@label--protocol-support-enumeration">Protocol Support Enumeration</dt>
+                    <dt class="text-primary" translate="label.protocol-support-enumeration">Protocol Support Enumeration</dt>
                     <dd class="value">{{ resolver.serviceProviderSsoDescriptor.protocolSupportEnum }}</dd>
-                    <dt class="text-primary" i18n="@@label--nameid-format">NameID Format</dt>
+                    <dt class="text-primary" translate="label.nameid-format">NameID Format</dt>
                     <dd class="value">
                         <p class="text-secondary" *ngIf="!resolver.serviceProviderSsoDescriptor.nameIdFormats.length">&mdash;</p>
                         <ul class="list-unstyled" *ngIf="resolver.serviceProviderSsoDescriptor.nameIdFormats.length">
@@ -108,14 +108,14 @@ <h3 class="tag tag-success tag-sm my-4">
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 5]" class="tag tag-success tag-sm my-4" aria-label="Logout Endpoints wizard page, step 5 - click to go back and make updates" role="button">
                     <span class="index">5</span>
-                    <ng-container i18n="@@label--logout-endpoints">Logout Endpoints</ng-container>
+                    <translate key="label.logout-endpoints">Logout Endpoints</ng-container>
                 </a>
                 <p class="text-secondary" *ngIf="!resolver.logoutEndpoints.length">&mdash;</p>
                 <table class="table table-sm table-bordered table-striped"  *ngIf="resolver.logoutEndpoints.length">
                     <thead>
                     <tr class="table-secondary">
-                        <th scope="col" i18n="@@label--logout-endpoints">Logout Endpoint</th>
-                        <th scope="col" i18n="@@label--binding-types">Binding Type</th>
+                        <th scope="col" translate="label.logout-endpoints">Logout Endpoint</th>
+                        <th scope="col" translate="label.binding-types">Binding Type</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -131,25 +131,25 @@ <h3 class="tag tag-success tag-sm my-4">
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 6]" class="tag tag-success tag-sm my-4" aria-label="Security Information wizard page, step 6 - click to go back and make updates" role="button">
                     <span class="index">6</span>
-                    <ng-container i18n="@@label--security-information">Security Information</ng-container>
+                    <translate key="label.security-information">Security Information</ng-container>
                 </a>
                 <dl *ngIf="resolver.securityInfo">
-                    <dt class="text-primary" i18n="@@label--is-there-a-x509-certificate">Is there a X509 Certificate?</dt>
+                    <dt class="text-primary" translate="label.is-there-a-x509-certificate">Is there a X509 Certificate?</dt>
                     <dd class="value">{{ resolver.securityInfo.x509CertificateAvailable ? 'Yes' : 'No' }}</dd>
-                    <dt class="text-primary" i18n="@@label--authentication-requests-signed">Authentication Requests Signed?</dt>
+                    <dt class="text-primary" translate="label.authentication-requests-signed">Authentication Requests Signed?</dt>
                     <dd class="value">{{ resolver.securityInfo.authenticationRequestsSigned ? 'Yes' : 'No' }}</dd>
-                    <dt class="text-primary" i18n="@@label--want-assertions-signed">Want Assertions Signed?</dt>
+                    <dt class="text-primary" translate="label.want-assertions-signed">Want Assertions Signed?</dt>
                     <dd class="value">{{ resolver.securityInfo.wantAssertionsSigned ? 'Yes' : 'No' }}</dd>
-                    <dt class="text-primary" i18n="@@label--x509-certificates">X509 Certificates</dt>
+                    <dt class="text-primary" translate="label.x509-certificates">X509 Certificates</dt>
                     <dd class="value">
                         <p class="text-secondary" *ngIf="!resolver.securityInfo.x509Certificates.length">&mdash;</p>
                         <table class="table table-sm table-bordered table-striped" *ngIf="resolver.securityInfo.x509Certificates.length">
-                            <caption class="sr-only" i18n="@@label--x509-certificates">X509 Certificates</caption>
+                            <caption class="sr-only" translate="label.x509-certificates">X509 Certificates</caption>
                             <thead>
                             <tr class="table-secondary">
-                                <th scope="col" i18n="@@label--certificate-name-display-only">Certificate Name (Display Only)</th>
-                                <th scope="col" i18n="@@label--type">Type</th>
-                                <th scope="col" i18n="@@label--certificate">Certificate</th>
+                                <th scope="col" translate="label.certificate-name-display-only">Certificate Name (Display Only)</th>
+                                <th scope="col" translate="label.type">Type</th>
+                                <th scope="col" translate="label.certificate">Certificate</th>
                             </tr>
                             </thead>
                             <tbody>
@@ -169,18 +169,18 @@ <h3 class="tag tag-success tag-sm my-4">
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 7]" class="tag tag-success tag-sm my-4" aria-label="Assertion Consumer Services wizard page, step 7 - click to go back and make updates" role="button">
                     <span class="index">7</span>
-                    <ng-container i18n="@@label--assertion-consumer-services">Assertion Consumer Services</ng-container>
+                    <translate key="label.assertion-consumer-services">Assertion Consumer Services</ng-container>
                 </a>
                 <dl>
-                    <dt class="text-primary" i18n="@@label--assertion-consumer-service-endpoints">Assertion Consumer Service Endpoints</dt>
+                    <dt class="text-primary" translate="label.assertion-consumer-service-endpoints">Assertion Consumer Service Endpoints</dt>
                     <dd class="value">
                         <p class="text-secondary" *ngIf="!resolver.assertionConsumerServices.length">&mdash;</p>
                         <table class="table table-sm table-bordered table-striped" *ngIf="resolver.assertionConsumerServices.length">
                             <thead>
                             <tr class="table-secondary">
                                 <th scope="col">#</th>
-                                <th scope="col" i18n="@@label--assertion-consumer-service-locations">Assertion Consumer Service Location</th>
-                                <th scope="col" i18n="@@label--assertion-consumer-service-location-binding">Assertion Consumer Service Binding</th>
+                                <th scope="col" translate="label.assertion-consumer-service-locations">Assertion Consumer Service Location</th>
+                                <th scope="col" translate="label.assertion-consumer-service-location-binding">Assertion Consumer Service Binding</th>
                             </tr>
                             </thead>
                             <tbody>
@@ -197,18 +197,18 @@ <h3 class="tag tag-success tag-sm my-4">
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 8]" class="tag tag-success tag-sm my-4" aria-label="Relying Party Overrides wizard page, step 8 - click to go back and make updates" role="button">
                     <span class="index">8</span>
-                    <ng-container i18n="@@label--relying-party-overrides">Relying Party Overrides</ng-container>
+                    <translate key="label.relying-party-overrides">Relying Party Overrides</ng-container>
                 </a>
                 <dl *ngIf="resolver.relyingPartyOverrides">
-                    <dt class="text-primary" i18n="@@label--sign-the-assertion">Sign the Assertion?</dt>
+                    <dt class="text-primary" translate="label.sign-the-assertion">Sign the Assertion?</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.signAssertion ? 'True' : 'False' }}</dd>
-                    <dt class="text-primary" i18n="@@label--dont-sign-the-response">Don't Sign the Response?</dt>
+                    <dt class="text-primary" translate="label.dont-sign-the-response">Don't Sign the Response?</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.dontSignResponse ? 'True' : 'False' }}</dd>
-                    <dt class="text-primary" i18n="@@label--turn-off-encryption-of-response">Turn off Encryption of Response?</dt>
+                    <dt class="text-primary" translate="label.turn-off-encryption-of-response">Turn off Encryption of Response?</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.turnOffEncryption ? 'True' : 'False' }}</dd>
-                    <dt class="text-primary" i18n="@@label--use-sha1-signing-algorithm">Use SHA1 Signing Algorithm?</dt>
+                    <dt class="text-primary" translate="label.use-sha1-signing-algorithm">Use SHA1 Signing Algorithm?</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.useSha ? 'True' : 'False' }}</dd>
-                    <dt class="text-primary" i18n="@@label--nameid-format-to-send">NameID Format to Send</dt>
+                    <dt class="text-primary" translate="label.nameid-format-to-send">NameID Format to Send</dt>
                     <dd class="value">
                         <p class="text-secondary" *ngIf="!resolver.relyingPartyOverrides.nameIdFormats.length">&mdash;</p>
                         <ul class="list-unstyled" *ngIf="resolver.relyingPartyOverrides.nameIdFormats.length">
@@ -217,7 +217,7 @@ <h3 class="tag tag-success tag-sm my-4">
                             </li>
                         </ul>
                     </dd>
-                    <dt class="text-primary" i18n="@@label--default-authentication-methods">Default Authentication Method(s)</dt>
+                    <dt class="text-primary" translate="label.default-authentication-methods">Default Authentication Method(s)</dt>
                     <dd class="value">
                         <p class="text-secondary" *ngIf="!resolver.relyingPartyOverrides.authenticationMethods.length">&mdash;</p>
                         <ol class="list-unstyled" *ngIf="resolver.relyingPartyOverrides.authenticationMethods.length">
@@ -226,25 +226,25 @@ <h3 class="tag tag-success tag-sm my-4">
                             </li>
                         </ol>
                     </dd>
-                    <dt class="text-primary" i18n="@@label--ignore-any-sp-requested-authentication-method">Ignore any SP-Requested Authentication Method?</dt>
+                    <dt class="text-primary" translate="label.ignore-any-sp-requested-authentication-method">Ignore any SP-Requested Authentication Method?</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.ignoreAuthenticationMethod ? 'True' : 'False' }}</dd>
-                    <dt class="text-primary" i18n="@@label--omit-not-before-condition">Omit Not Before Condition?</dt>
+                    <dt class="text-primary" translate="label.omit-not-before-condition">Omit Not Before Condition?</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.omitNotBefore ? 'True' : 'False' }}</dd>
-                    <dt class="text-primary" i18n="@@label--responderid">ResponderID</dt>
+                    <dt class="text-primary" translate="label.responderid">ResponderID</dt>
                     <dd class="value">{{ resolver.relyingPartyOverrides.responderId }}</dd>
                 </dl>
             </section>
             <section class="entity-section">
                 <a href="" [routerLink]="['../', 9]" class="tag tag-success tag-sm my-4" aria-label="Attribute Release wizard page, step 9 - click to go back and make updates" role="button">
                     <span class="index">9</span>
-                    <ng-container i18n="@@label--attribute-release">Attribute Release</ng-container>
+                    <translate key="label.attribute-release">Attribute Release</ng-container>
                 </a>
                 <table class="table table-sm table-bordered table-striped" *ngIf="resolver.attributeRelease">
                     <thead>
                     <tr class="table-secondary">
-                        <th scope="col" i18n="@@label--attribute-name">Attribute Name</th>
-                        <th scope="col" i18n="@@label--true">True</th>
-                        <th scope="col" i18n="@@label--false">False</th>
+                        <th scope="col" translate="label.attribute-name">Attribute Name</th>
+                        <th scope="col" translate="label.true">True</th>
+                        <th scope="col" translate="label.false">False</th>
                     </tr>
                     </thead>
                     <tbody>
diff --git a/ui/src/app/metadata/domain/component/forms/key-info-form.component.html b/ui/src/app/metadata/domain/component/forms/key-info-form.component.html
index 342d04279..1419817ff 100644
--- a/ui/src/app/metadata/domain/component/forms/key-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/key-info-form.component.html
@@ -5,13 +5,15 @@
                 <div class="form-group">
                     <div class="row">
                         <label for="x509CertificateAvailableRadioGroup">
-                            <ng-container i18n="@@label--is-there-a-x509-certificate">Is there a X509 Certificate?</ng-container>
+                            <translate key="label.is-there-a-x509-certificate">Is there a X509 Certificate?</translate>
                         </label>&nbsp;
                         <span>
-                            <ng-template #tooltipIsThereAX509Certificate i18n="@@tooltip--authentication-requests-signed">Is there a X509 Certificate popover</ng-template>
+                            <ng-template #tooltipIsThereAX509Certificate>
+                                <translate key="tooltip.authentication-requests-signed">Is there a X509 Certificate popover</translate>
+                            </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipIsThereAX509Certificate"
-                               i18n-aria-label="@@tooltip--instruction"
+                               i18n-aria-label="@@tooltip.instruction"
                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
@@ -19,12 +21,12 @@
                         <div class="form-check form-check-inline">
                             <input disableValidation="true" class="form-check-input" type="radio" formControlName="x509CertificateAvailable" name="x509CertificateAvailable"
                                 [value]="true" id="x509CertificateAvailableTrue" aria-checked="false" role="radio">
-                            <label class="form-check-label" i18n="@@label--yes" for="x509CertificateAvailableTrue">Yes</label>
+                            <label class="form-check-label" translate="label.yes" for="x509CertificateAvailableTrue">Yes</label>
                         </div>
                         <div class="form-check form-check-inline">
                             <input disableValidation="true" class="form-check-input" type="radio" tabindex="0" formControlName="x509CertificateAvailable"
                                 name="x509CertificateAvailable" id="x509CertificateAvailableFalse" [value]="false" aria-checked="true" role="radio">
-                            <label class="form-check-label" i18n="@@label--no" for="x509CertificateAvailableFalse">No</label>
+                            <label class="form-check-label" translate="label.no" for="x509CertificateAvailableFalse">No</label>
                         </div>
                     </div>
                 </div>
@@ -33,13 +35,15 @@
                 <fieldset aria-label="Should authentication requests be signed? Radio choice">
                     <div class="row">
                         <label for="authenticationRequestsSignedRadioGroup">
-                            <ng-container i18n="@@label--authentication-requests-signed">Authentication Requests Signed?</ng-container>
+                            <translate key="label.authentication-requests-signed">Authentication Requests Signed?</translate>
                         </label>&nbsp;
                         <span>
-                            <ng-template #tooltipAuthenticationRequestsSigned i18n="@@tooltip--authentication-requests-signed">Authentication Requests Signed popover</ng-template>
+                            <ng-template #tooltipAuthenticationRequestsSigned>
+                                <translate key="tooltip.authentication-requests-signed">Authentication Requests Signed popover</translate>
+                            </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipAuthenticationRequestsSigned"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
@@ -47,12 +51,12 @@
                         <div class="form-check form-check-inline">
                             <input disableValidation="true" class="form-check-input" type="radio" tabindex="0" formControlName="authenticationRequestsSigned"
                                 name="authenticationRequestsSigned" id="authenticationRequestsSignedTrue" [value]="true" aria-checked="false" role="radio">
-                            <label class="form-check-label" i18n="@@label--yes" for="authenticationRequestsSignedTrue">Yes</label>
+                            <label class="form-check-label" translate="label.yes" for="authenticationRequestsSignedTrue">Yes</label>
                         </div>
                         <div class="form-check form-check-inline">
                             <input disableValidation="true" class="form-check-input" type="radio" tabindex="0" formControlName="authenticationRequestsSigned"
                                 name="authenticationRequestsSigned" id="authenticationRequestsSignedFalse" [value]="false" aria-checked="true" role="radio">
-                            <label class="form-check-label" i18n="@@label--no" for="authenticationRequestsSignedFalse">No</label>
+                            <label class="form-check-label" translate="label.no" for="authenticationRequestsSignedFalse">No</label>
                         </div>
                     </div>
                 </fieldset>
@@ -61,13 +65,15 @@
                 <fieldset aria-label="Do you want the assertions signed? Radio choice">
                     <div class="row">
                         <label>
-                            <ng-container i18n="@@label--want-assertions-signed">Want Assertions Signed?</ng-container>
+                            <translate key="label.want-assertions-signed">Want Assertions Signed?</translate>
                         </label>&nbsp;
                         <span>
-                            <ng-template #tooltipWantAssertionsSigned i18n="@@tooltip--want-assertions-signed">Want Assertions Signed</ng-template>
+                            <ng-template #tooltipWantAssertionsSigned>
+                                <translate key="tooltip.want-assertions-signed">Want Assertions Signed</translate>
+                            </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                 [ngbPopover]="tooltipWantAssertionsSigned"
-                                i18n-aria-label="@@tooltip--instruction"
+                                i18n-aria-label="@@tooltip.instruction"
                                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                         </span>
                     </div>
@@ -75,12 +81,12 @@
                         <div class="form-check form-check-inline">
                             <input disableValidation="true" class="form-check-input" type="radio" tabindex="0" formControlName="wantAssertionsSigned"
                                 name="wantAssertionsSigned" id="wantAssertionsSignedTrue" [value]="true" aria-checked="false" role="radio">
-                            <label class="form-check-label" i18n="@@label--yes" for="wantAssertionsSignedTrue">Yes</label>
+                            <label class="form-check-label" translate="label.yes" for="wantAssertionsSignedTrue">Yes</label>
                         </div>
                         <div class="form-check form-check-inline">
                             <input disableValidation="true" class="form-check-input" type="radio" tabindex="0" formControlName="wantAssertionsSigned"
                                 name="wantAssertionsSigned" name="wantAssertionsSigned" id="wantAssertionsSignedFalse" [value]="false" aria-checked="true" role="radio">
-                            <label class="form-check-label" i18n="@@label--no" for="wantAssertionsSignedFalse">No</label>
+                            <label class="form-check-label" translate="label.no" for="wantAssertionsSignedFalse">No</label>
                         </div>
                     </div>
                 </fieldset>
@@ -88,8 +94,8 @@
         </div>
         <fieldset class="col form-section">
             <p>
-                <ng-container i18n="@@label--x509-certificates">X509 Certificates: </ng-container>
-                <button class="btn btn-success btn-sm" (click)="addCert()" [disabled]="!(hasCert$ | async)" i18n="@@action--add-certificate" aria-label="Add certificate to accordion group" role="button">Add Certificate</button>
+                <translate key="label.x509-certificates">X509 Certificates: </translate>
+                <button class="btn btn-success btn-sm" (click)="addCert()" [disabled]="!(hasCert$ | async)" translate="action.add-certificate" aria-label="Add certificate to accordion group" role="button">Add Certificate</button>
             </p>
             <div formArrayName="x509Certificates" class="bg-light border rounded p-4" *ngIf="x509Certificates.length">
                 <ul class="list-group" aria-label="x509 Certificates accordion"  tabindex="0" role="presentation">
@@ -104,7 +110,7 @@
                                     <i class="fa fa-fw" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         <ng-container *ngIf="cert.get('name').value">{{ cert.get('name').value }}</ng-container>
-                                        <ng-container *ngIf="!cert.get('name').value" i18n="@@label--new-cert">New Certificate</ng-container>
+                                        <ng-container *ngIf="!cert.get('name').value" translate="label.new-cert">New Certificate</ng-container>
                                         <small *ngIf="cert.get('type').value">
                                             (<i18n-text [key]="cert.get('type').value"></i18n-text>)
                                         </small>
@@ -123,14 +129,17 @@
                                 <div class="row">
                                     <label [for]="'name-' + i" class="col-sm-10">
                                         <span>
-                                             <ng-container i18n="@@label--certificate-name-display-only">Certificate Name (Display Only)</ng-container> <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
+                                             <translate key="label.certificate-name-display-only">Certificate Name (Display Only)</translate>
+                                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                                         </span>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipCertificateName i18n="@@tooltip--certificate-name">Certificate Name Popover</ng-template>
+                                        <ng-template #tooltipCertificateName>
+                                            <translate key="tooltip.certificate-name">Certificate Name Popover</translate>
+                                        </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipCertificateName"
-                                           i18n-aria-label="@@tooltip--instruction"
+                                           i18n-aria-label="@@tooltip.instruction"
                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                     </span>
                                 </div>
@@ -141,14 +150,17 @@
                                     <div class="row">
                                         <label [for]="'type-' + i" class="col-sm-10">
                                             <span>
-                                                <ng-container i18n="@@label--type">Type <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i></ng-container>
+                                                <translate key="label.type">Type</translate>
+                                                <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                                             </span>
                                         </label>
                                         <span class="col-sm-2 text-right">
-                                            <ng-template #tooltipCertificateType i18n="@@tooltip--certificate-type">Certificate Type Popover</ng-template>
+                                            <ng-template #tooltipCertificateType>
+                                                <translate key="tooltip.certificate-type">Certificate Type Popover</translate>
+                                            </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipCertificateType"
-                                           i18n-aria-label="@@tooltip--instruction"
+                                           i18n-aria-label="@@tooltip.instruction"
                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                         </span>
                                     </div>
@@ -167,15 +179,17 @@
                                 <div class="row">
                                     <label [for]="'cert-' + i" class="col-sm-10">
                                         <span>
-                                            <ng-container i18n="@@label--certificate">Certificate</ng-container>
+                                            <translate key="label.certificate">Certificate</translate>
                                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                                         </span>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipCertificateBody i18n="@@tooltip--certificate">Certificate Popover</ng-template>
+                                        <ng-template #tooltipCertificateBody>
+                                            <translate key="tooltip.certificate">Certificate Popover</translate>
+                                        </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipCertificateBody"
-                                               i18n-aria-label="@@tooltip--instruction"
+                                               i18n-aria-label="@@tooltip.instruction"
                                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                     </span>
                                 </div>
diff --git a/ui/src/app/metadata/domain/component/forms/logout-form.component.html b/ui/src/app/metadata/domain/component/forms/logout-form.component.html
index 83b6e0065..334fc8c92 100644
--- a/ui/src/app/metadata/domain/component/forms/logout-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/logout-form.component.html
@@ -2,8 +2,8 @@
     <div class="row">
         <fieldset class="col col-xl-6 form-section">
             <p>
-                <ng-container i18n="@@label--logout-endpoints">Logout Endpoints: </ng-container>
-                <button class="btn btn-success btn-sm" (click)="addEndpoint()" i18n="@@action--add-endpoint" aria-label="Add logout endpoint to accordion group">Add Endpoint</button>
+                <translate key="label.logout-endpoints">Logout Endpoints: </translate>
+                <button class="btn btn-success btn-sm" (click)="addEndpoint()" translate="action.add-endpoint" aria-label="Add logout endpoint to accordion group">Add Endpoint</button>
             </p>
             <div formArrayName="logoutEndpoints" class="bg-light border rounded p-4" *ngIf="logoutEndpoints.length">
                 <ul class="list-group" id="logoutAccordionGroup" aria-label="Logout endpoint accordion group" role="presentation" tabindex="0">
@@ -18,7 +18,7 @@
                                     <i class="fa fa-fw" [ngClass]="{'fa-chevron-right': acc.isHidden, 'fa-chevron-down': !acc.isHidden}"></i>
                                     <span tabindex="0" role="heading" aria-level="3">
                                         <ng-container *ngIf="endpoint.get('url').value">{{ endpoint.get('url').value }}</ng-container>
-                                        <ng-container *ngIf="!endpoint.get('url').value" i18n="@@label--new-endpoint">New Endpoint</ng-container>
+                                        <ng-container *ngIf="!endpoint.get('url').value" translate="label.new-endpoint">New Endpoint</ng-container>
                                     </span>
                                 </div>
                                 <span class="col-sm-2 text-right">
@@ -33,13 +33,15 @@
                             <div class="form-group">
                                 <div class="row">
                                     <label [for]="'url-' + i" class="col-sm-10">
-                                        <ng-container i18n="@@label--url">URL</ng-container>
+                                        <translate key="label.url">URL</translate>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipLogoutEndpointsUrl i18n="@@tooltip--logout-endpoints-url">Logout Endpoints Url popover</ng-template>
+                                        <ng-template #tooltipLogoutEndpointsUrl>
+                                            <translate key="tooltip.logout-endpoints-url">Logout Endpoints Url popover</translate>
+                                        </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipLogoutEndpointsUrl"
-                                           i18n-aria-label="@@tooltip--instruction"
+                                           i18n-aria-label="@@tooltip.instruction"
                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                     </span>
                                 </div>
@@ -49,18 +51,20 @@
                             <div class="form-group">
                                 <div class="row">
                                     <label [for]="'binding-' + i" class="col-sm-10">
-                                        <ng-container i18n="@@label--binding-types">Binding Type</ng-container>
+                                        <translate key="label.binding-types">Binding Type</translate>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipLogoutEndpointsBindingType i18n="@@tooltip--logout-endpoints-binding-type">Logout Endpoints Binding Type popover</ng-template>
+                                        <ng-template #tooltipLogoutEndpointsBindingType>
+                                            <translate key="tooltip.logout-endpoints-binding-type">Logout Endpoints Binding Type popover</translate>
+                                        </ng-template>
                                     <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                        [ngbPopover]="tooltipLogoutEndpointsBindingType"
-                                       i18n-aria-label="@@tooltip--instruction"
+                                       i18n-aria-label="@@tooltip.instruction"
                                        aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                     </span>
                                 </div>
                                 <select [id]="'binding-' + i" class="form-control" formControlName="bindingType" aria-label="Logout binding type dropdown" role="listbox">
-                                    <option disabled selected [ngValue]="null" hidden role="option" i18n="@@label--select-binding">Select Binding Type</option>
+                                    <option disabled selected [ngValue]="null" hidden role="option" translate="label.select-binding">Select Binding Type</option>
                                     <option *ngFor="let opt of bindingTypes; let i=index;" [value]="opt" [attr.aria-label]="opt" role="option">{{ opt }}</option>
                                 </select>
                             </div>
diff --git a/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html b/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html
index be3eb2cc2..0e835e651 100644
--- a/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html
@@ -4,13 +4,15 @@
             <div class="form-group">
                 <div class="row">
                     <label for="displayName" class="col-sm-10">
-                        <ng-container i18n="@@label--display-name">Display Name</ng-container>
+                        <translate key="label.display-name">Display Name</translate>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIDisplayName i18n="@@tooltip--mdui-display-name">Typically, the IdP Display Name field will be presented on IdP discovery service interfaces.</ng-template>
+                        <ng-template #tooltipMDUIDisplayName>
+                            <translate key="tooltip.mdui-display-name">Typically, the IdP Display Name field will be presented on IdP discovery service interfaces.</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIDisplayName"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -19,13 +21,16 @@
             <div class="form-group">
                 <div class="row">
                     <label for="informationUrl" class="col-sm-10">
-                        <ng-container i18n="@@label--information-url" >Information URL</ng-container>
+                        <translate key="label.information-url">Information URL</translate>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIInformationUrl i18n="@@tooltip--mdui-information-url">The IdP Information URL is a link to a comprehensive information page about the IdP. This page should expand on the content of the IdP Description field.</ng-template>
+                        <ng-template #tooltipMDUIInformationUrl>
+                            <translate key="tooltip.mdui-information-url">The IdP Information URL is a link to a comprehensive information page about the IdP. This page should expand on the
+                            content of the IdP Description field.</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIInformationUrl"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -35,13 +40,17 @@
             <div class="form-group">
                 <div class="row">
                     <label for="description" class="col-sm-10">
-                        <ng-container i18n="@@label--description">Description</ng-container>
+                        <translate key="label.description">Description</translate>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIDescription i18n="@@tooltip--mdui-description">The IdP Description is a brief description of the IdP service. On a well-designed discovery interface, the IdP Description will be presented to the user in addition to the IdP Display Name, and so the IdP Description helps disambiguate duplicate or similar IdP Display Names.</ng-template>
+                        <ng-template #tooltipMDUIDescription>
+                            <translate key="tooltip.mdui-description">The IdP Description is a brief description of the IdP service. On a well-designed discovery interface, the IdP
+                            Description will be presented to the user in addition to the IdP Display Name, and so the IdP Description helps
+                            disambiguate duplicate or similar IdP Display Names.</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIDescription"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -65,13 +74,16 @@
             <div class="form-group">
                 <div class="row">
                     <label for="privacyStatementUrl" class="col-sm-10">
-                        <ng-container i18n="@@label--privacy-statement-url">Privacy Statement URL</ng-container>
+                        <translate key="label.privacy-statement-url">Privacy Statement URL</translate>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIPrivacyStatementUrl i18n="@@tooltip--mdui-privacy-statement-url">The IdP Privacy Statement URL is a link to the IdP's Privacy Statement. The content of the Privacy Statement should be targeted at end users.</ng-template>
+                        <ng-template #tooltipMDUIPrivacyStatementUrl>
+                            <translate key="tooltip.mdui-privacy-statement-url">The IdP Privacy Statement URL is a link to the IdP's Privacy Statement. The content of the Privacy Statement should be
+                            targeted at end users.</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIPrivacyStatementUrl"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -81,13 +93,16 @@
             <div class="form-group">
                 <div class="row">
                     <label for="logoUrl" class="col-sm-10">
-                        <ng-container i18n="@@label--logo-url">Logo URL</ng-container>
+                        <translate key="label.logo-url">Logo URL</translate>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUILogoUrl i18n="@@tooltip--mdui-logo-url">The IdP Logo URL in metadata points to an image file on a remote server. A discovery service, for example, may rely on a visual cue (i.e., a logo) instead of or in addition to the IdP Display Name.</ng-template>
+                        <ng-template #tooltipMDUILogoUrl>
+                            <translate key="tooltip.mdui-logo-url">The IdP Logo URL in metadata points to an image file on a remote server. A discovery service, for example, may rely on
+                            a visual cue (i.e., a logo) instead of or in addition to the IdP Display Name.</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUILogoUrl"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -99,36 +114,41 @@
                     <div class="form-group">
                         <div class="row">
                             <label for="logoWidth" class="col-sm-10">
-                                <ng-container i18n="@@label--logo-width">Logo Width</ng-container>
+                                <translate key="label.logo-width">Logo Width</translate>
                             </label>
                             <span class="col-sm-2 text-right">
-                                <ng-template #tooltipMDUILogoWidth i18n="@@tooltip--mdui-logo-width">The logo should have a minimum width of 100 pixels</ng-template>
+                                <ng-template #tooltipMDUILogoWidth>
+                                    <translate key="tooltip.mdui-logo-width">The logo should have a minimum width of 100 pixels</translate>
+                                </ng-template>
                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                    [ngbPopover]="tooltipMDUILogoUrl"
-                                   i18n-aria-label="@@tooltip--instruction"
+                                   i18n-aria-label="@@tooltip.instruction"
                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                             </span>
                         </div>
                         <input id="logoWidth" type="number" class="form-control" placeholder="" formControlName="logoWidth" step="1" role="textbox" />
-                        <small class="form-text text-secondary" i18n="@@message--must-be-integer">Must be an integer equal to or greater than 0</small>
+                        <small class="form-text text-secondary" translate="message.must-be-integer">Must be an integer equal to or greater than 0</small>
                     </div>
                 </div>
                 <div class="col">
                     <div class="form-group">
                         <div class="row">
                             <label for="logoHeight" class="col-sm-10">
-                                <ng-container i18n="@@label--logo-height">Logo Height</ng-container>
+                                <translate key="label.logo-height">Logo Height</translate>
                             </label>
                             <span class="col-sm-2 text-right">
-                                <ng-template #tooltipMDUILogoHeight i18n="@@tooltip--mdui-logo-height">The logo should have a minimum height of 75 pixels and a maximum height of 150 pixels (or the application will scale it proportionally)</ng-template>
+                                <ng-template #tooltipMDUILogoHeight>
+                                    <translate key="tooltip.mdui-logo-height">The logo should have a minimum height of 75 pixels and a maximum height of 150 pixels (or the application will scale it
+                                    proportionally)</translate>
+                                </ng-template>
                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                    [ngbPopover]="tooltipMDUILogoHeight"
-                                   i18n-aria-label="@@tooltip--instruction"
+                                   i18n-aria-label="@@tooltip.instruction"
                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                             </span>
                         </div>
                         <input id="logoHeight" type="number" class="form-control" placeholder="" formControlName="logoHeight" step="1" role="textbox" />
-                        <small class="form-text text-secondary" i18n="@@message--must-be-integer">Must be an integer equal to or greater than 0</small>
+                        <small class="form-text text-secondary" translate="message.must-be-integer">Must be an integer equal to or greater than 0</small>
                     </div>
                 </div>
             </div>
diff --git a/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html b/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html
index 285b21cd9..7827dc798 100644
--- a/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html
@@ -5,15 +5,17 @@
                 <div class="row">
                     <label for="name" class=col-sm-10>
                         <span>
-                            <ng-container i18n="@@label--organization-name">Organization Name</ng-container>
+                            <translate key="label.organization-name">Organization Name</translate>
                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" *ngIf="hasValue$ | async"></i>
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipOrganizationName i18n="@@tooltip--organization-name">Organization Name Popover</ng-template>
+                        <ng-template #tooltipOrganizationName >
+                            <translate key="tooltip.organization-name">Organization Name Popover</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipOrganizationName"
-                           i18n-aria-label="@@tooltip--instruction"
+                           i18n-aria-label="@@tooltip.instruction"
                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -23,15 +25,17 @@
                 <div class="row">
                     <label for="displayName" class="col-sm-10">
                         <span>
-                            <ng-container i18n="@@label--organization-display-name">Organization Display Name</ng-container>
+                            <translate key="label.organization-display-name">Organization Display Name</translate>
                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" *ngIf="hasValue$ | async"></i>
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipOrganizationDisplayName i18n="@@tooltip--organization-display-name">Organization Display Name Popover</ng-template>
+                        <ng-template #tooltipOrganizationDisplayName>
+                            <translate key="tooltip.organization-display-name">Organization Display Name Popover</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipOrganizationDisplayName"
-                            i18n-aria-label="@@tooltip--instruction"
+                            i18n-aria-label="@@tooltip.instruction"
                             aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
@@ -41,27 +45,29 @@
                 <div class="row">
                     <label for="url" class="col-sm-10">
                         <span>
-                            <ng-container i18n="@@label--organization-url">Organization URL</ng-container>
+                            <translate key="label.organization-url">Organization URL</translate>
                             <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" *ngIf="hasValue$ | async"></i>
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipOrganizationUrl i18n="@@tooltip--organization-url">Organization Url Popover</ng-template>
+                        <ng-template #tooltipOrganizationUrl>
+                            <translate key="tooltip.organization-url">Organization Url Popover</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipOrganizationUrl"
-                            i18n-aria-label="@@tooltip--instruction"
+                            i18n-aria-label="@@tooltip.instruction"
                             aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </div>
                 <input id="url" type="text" class="form-control" placeholder="" formControlName="url" role="textbox" />
                 <small class="form-text text-danger" *ngIf="form.get('organization.url').hasError('pattern')">Must be a valid URL</small>
             </div>
-            <p class="text-danger" *ngIf="form.get('organization').hasError('org')" i18n="@@message--organization-feedback">* These three fields must all be entered if any single field has a value.</p>
+            <p class="text-danger" *ngIf="form.get('organization').hasError('org')" translate="message.organization-feedback">* These three fields must all be entered if any single field has a value.</p>
         </fieldset>
         <fieldset class="form-section col">
             <p>
-                <ng-container i18n="@@label--contact-information">Contact Information: </ng-container>
-                <button class="btn btn-success btn-sm" (click)="addContact()" i18n="@@action--add-contact" aria-label="Add contact to accordion group" role="button">Add Contact</button>
+                <translate key="label.contact-information">Contact Information: </translate>
+                <button class="btn btn-success btn-sm" (click)="addContact()" translate="action.add-contact" aria-label="Add contact to accordion group" role="button">Add Contact</button>
             </p>
             <div formArrayName="contacts" class="bg-light border rounded p-4" *ngIf="contacts.length">
                 <ul class="list-group" id="contactAccordionGroup" aria-label="Contact information accordion group" role="presentation" tabindex="0">
@@ -93,13 +99,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'name-' + i" class="col-sm-9">
-                                                <ng-container i18n="@@label--name">Contact Name</ng-container>
+                                                <translate key="label.name">Contact Name</translate>
                                             </label>
                                             <span class="col-sm-3 text-right">
-                                                 <ng-template #tooltipContactName i18n="@@tooltip--contact-name">Contact Name Popover</ng-template>
+                                                <ng-template #tooltipContactName>
+                                                    <translate key="tooltip.contact-name">Contact Name Popover</translate>
+                                                </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipContactName"
-                                                   i18n-aria-label="@@tooltip--instruction"
+                                                   i18n-aria-label="@@tooltip.instruction"
                                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
@@ -110,18 +118,20 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'type-' + i" class="col-sm-10">
-                                                <ng-container i18n="@@label--type">Contact Type</ng-container>
+                                                <translate key="label.type">Contact Type</translate>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipContactType i18n="@@tooltip--contact-type">Contact Type Popover</ng-template>
+                                                <ng-template #tooltipContactType>
+                                                    <translate key="tooltip.contact-type">Contact Type Popover</translate>
+                                                </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipContactType"
-                                               i18n-aria-label="@@tooltip--instruction"
+                                               i18n-aria-label="@@tooltip.instruction"
                                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
                                         <select [id]="'type-' + i" class="form-control" formControlName="type" aria-label="Contact type dropdown" role="listbox">
-                                            <option disabled hidden i18n="@@label--select-contact-type" value>Select Contact Type</option>
+                                            <option disabled hidden translate="label.select-contact-type" value>Select Contact Type</option>
                                             <option *ngFor="let opt of contactTypes; let i=index;" [value]="opt" [attr.aria-label]="opt" role="option">
                                                 {{ opt }}
                                             </option>
@@ -134,19 +144,21 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'email-' + i" class="col-sm-10">
-                                                <ng-container i18n="@@label--email-address">Contact Email Address</ng-container>
+                                                <translate key="label.email-address">Contact Email Address</translate>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipContactEmail i18n="@@tooltip--contact-email">Contact Email Popover</ng-template>
+                                                <ng-template #tooltipContactEmail>
+                                                    <translate key="tooltip.contact-email">Contact Email Popover</translate>
+                                                </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipContactEmail"
-                                                   i18n-aria-label="@@tooltip--instruction"
+                                                   i18n-aria-label="@@tooltip.instruction"
                                                    aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                                             </span>
                                         </div>
                                         <input [id]="'email-' + i" type="email" class="form-control" placeholder="" formControlName="emailAddress" role="textbox" />
                                         <small class="form-text text-danger" *ngIf="contact.get('emailAddress').touched && contact.get('emailAddress').hasError('email')">
-                                            <ng-container i18n="@@message--valid-email">Must be a valid Email Address</ng-container>
+                                            <translate key="message.valid-email">Must be a valid Email Address</translate>
                                         </small>
                                     </div>
                                 </div>
diff --git a/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html b/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html
index ff42bc8df..299c647b0 100644
--- a/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html
@@ -5,10 +5,12 @@
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                     <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="signAssertion" id="signAssertion"
                         [value]="true" role="checkbox" aria-checked="false">
-                    <label class="custom-control-label" i18n="@@label--sign-the-assertion" for="signAssertion">Sign the Assertion</label>
+                    <label class="custom-control-label" translate="label.sign-the-assertion" for="signAssertion">Sign the Assertion</label>
                 </div>
-                <ng-template #tooltipSignAssertion i18n="@@tooltip--sign-assertion">Sign Assertion popover</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipSignAssertion" i18n-aria-label="@@tooltip--instruction"
+                <ng-template #tooltipSignAssertion>
+                    <translate key="tooltip.sign-assertion">Sign Assertion popover</translate>
+                </ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipSignAssertion" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </fieldset>
         </div>
@@ -17,10 +19,12 @@
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                     <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="dontSignResponse" id="dontSignResponse"
                         [value]="true" role="checkbox" aria-checked="false">
-                    <label class="custom-control-label" i18n="@@label--dont-sign-the-response" for="dontSignResponse">Don't Sign the Response</label>
+                    <label class="custom-control-label" translate="label.dont-sign-the-response" for="dontSignResponse">Don't Sign the Response</label>
                 </div>
-                <ng-template #tooltipDontSignResponse i18n="@@tooltip--dont-sign-response">Don't Sign Response popover</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipDontSignResponse" i18n-aria-label="@@tooltip--instruction"
+                <ng-template #tooltipDontSignResponse>
+                    <translate key="tooltip.dont-sign-response">Don't Sign Response popover</translate>
+                </ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipDontSignResponse" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </fieldset>
         </div>
@@ -29,10 +33,12 @@
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                     <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="turnOffEncryption" id="turnOffEncryption"
                         [value]="true" role="checkbox" aria-checked="false">
-                    <label class="custom-control-label" i18n="@@label--turn-off-encryption-of-response" for="turnOffEncryption">Turn Off Encryption of Response</label>
+                    <label class="custom-control-label" translate="label.turn-off-encryption-of-response" for="turnOffEncryption">Turn Off Encryption of Response</label>
                 </div>
-                <ng-template #tooltipTurnOffEncryption i18n="@@tooltip--turn-off-encryption">Turn Off Encryption of Response popover</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipTurnOffEncryption" i18n-aria-label="@@tooltip--instruction"
+                <ng-template #tooltipTurnOffEncryption>
+                    <translate key="tooltip.turn-off-encryption">Turn Off Encryption of Response popover</translate>
+                </ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipTurnOffEncryption" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </fieldset>
         </div>
@@ -41,30 +47,35 @@
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                     <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="useSha" [value]="true" id="useSha"
                         role="checkbox" aria-checked="false">
-                    <label class="custom-control-label" i18n="@@label--use-sha1-signing-algorithm" for="useSha">Use SHA1 Signing Algorithm</label>
+                    <label class="custom-control-label" translate="label.use-sha1-signing-algorithm" for="useSha">Use SHA1 Signing Algorithm</label>
                 </div>
-                <ng-template #tooltipUseShaAlgorithm i18n="@@tooltip--usa-sha-algorithm">Use SHA1 Signing Algorithm popover</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipUseShaAlgorithm" i18n-aria-label="@@tooltip--instruction"
+                <ng-template #tooltipUseShaAlgorithm translate="tooltip.usa-sha-algorithm">Use SHA1 Signing Algorithm popover</ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipUseShaAlgorithm" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </fieldset>
         </div>
         <div formArrayName="nameIdFormats" class="form-group">
             <div class="row">
                 <span class="col-sm-10">
-                    <ng-container i18n="@@label--nameid-format-to-send">NameID Format to Send</ng-container>
+                    <translate key="label.nameid-format-to-send">NameID Format to Send</translate>
                     &nbsp;
-                    <button class="btn btn-success btn-sm" (click)="addFormat()" i18n="@@action--add-nameid-format" aria-label="Add nameID format"
+                    <button class="btn btn-success btn-sm" (click)="addFormat()" translate="action.add-nameid-format" aria-label="Add nameID format"
                         role="button">Add NameID Format</button>
                 </span>
                 <span class="col-sm-2 text-right">
-                    <ng-template #tooltipNameIdFormat i18n="@@tooltip--nameid-format">Add NameID Format popover</ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipNameIdFormat" i18n-aria-label="@@tooltip--instruction"
+                    <ng-template #tooltipNameIdFormat>
+                        <translate key="tooltip.nameid-format">Add NameID Format popover</translate>
+                    </ng-template>
+                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipNameIdFormat" i18n-aria-label="@@tooltip.instruction"
                         aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                 </span>
             </div>
             <div *ngIf="nameIdFormatList.length" class="p-2">
                 <div class="row" *ngFor="let format of nameIdFormatList.controls; let i=index; let isLast=last">
-                    <label [for]="'nameIdFormat-' + i" class="sr-only" i18n="@@label--nameid-format-indexed">NameID Format {{ i + 1 }}</label>
+                    <label [for]="'nameIdFormat-' + i" class="sr-only">
+                        <translate key="label.nameid-format">NameID Format</translate>
+                        {{ i + 1 }}
+                    </label>
                     <auto-complete
                         class="col-sm-11"
                         [id]="'nameIdFormat-' + i"
@@ -85,20 +96,24 @@
         <div formArrayName="authenticationMethods" class="form-group">
             <div class="row">
                 <span class="col-sm-10">
-                    <ng-container i18n="@@label--authentication-methods-to-use">Authentication Methods to Use</ng-container>
+                    <translate key="label.authentication-methods-to-use">Authentication Methods to Use</translate>
                      &nbsp;
-                    <button class="btn btn-success btn-sm" (click)="addAuthenticationMethod()" i18n="@@action--add-athentication-method" aria-label="Add authentication method"
+                    <button class="btn btn-success btn-sm" (click)="addAuthenticationMethod()" translate="action.add-athentication-method" aria-label="Add authentication method"
                         role="button">Add Authentication Method</button>
                 </span>
                 <span class="col-sm-2 text-right">
-                    <ng-template #tooltipAuthMethod i18n="@@tooltip--authentication-methods-to-use">Authentication Methods to Use popover</ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipAuthMethod" i18n-aria-label="@@tooltip--instruction"
+                    <ng-template #tooltipAuthMethod>
+                        <translate key="tooltip.authentication-methods-to-use">Authentication Methods to Use popover</translate>
+                    </ng-template>
+                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipAuthMethod" i18n-aria-label="@@tooltip.instruction"
                         aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                 </span>
             </div>
             <div *ngIf="authenticationMethodList.length" class="p-2">
                 <div class="row" *ngFor="let format of authenticationMethodList.controls; let i=index; let isLast=last">
-                    <label [for]="'authMethod-' + i" class="sr-only" i18n="@@label--auth-method-indexed">Authentication Method {{ i + 1 }}</label>
+                    <label [for]="'authMethod-' + i" class="sr-only">
+                        <translate key="label.auth-method-indexed">Authentication Method</translate> {{ i + 1 }}
+                    </label>
                     <auto-complete
                         class="col-sm-11"
                         [id]="'authMethod-' + i"
@@ -121,10 +136,12 @@
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                     <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="ignoreAuthenticationMethod"
                         [value]="true" id="ignoreAuthenticationMethod" role="checkbox" aria-checked="false">
-                    <label class="custom-control-label" i18n="@@label--ignore-any-sp-requested-authentication-method" for="ignoreAuthenticationMethod">Ignore any SP-Requested Authentication Method</label>
+                    <label class="custom-control-label" translate="label.ignore-any-sp-requested-authentication-method" for="ignoreAuthenticationMethod">Ignore any SP-Requested Authentication Method</label>
                 </div>
-                <ng-template #tooltipIgnoreAuthMethod i18n="@@tooltip--ignore-auth-method">Ignore any SP-Requested Authentication Method popover</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipIgnoreAuthMethod" i18n-aria-label="@@tooltip--instruction"
+                <ng-template #tooltipIgnoreAuthMethod>
+                    <translate key="tooltip.ignore-auth-method">Ignore any SP-Requested Authentication Method popover</translate>
+                </ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipIgnoreAuthMethod" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </fieldset>
         </div>
@@ -133,21 +150,23 @@
                 <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
                     <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="omitNotBefore" [value]="true"
                         id="omitNotBefore" role="checkbox" aria-checked="false">
-                    <label class="custom-control-label" i18n="@@label--omit-not-before-condition" for="omitNotBefore">Omit Not Before Condition</label>
+                    <label class="custom-control-label" translate="label.omit-not-before-condition" for="omitNotBefore">Omit Not Before Condition</label>
                 </div>
-                <ng-template #tooltipOmitNotBeforeCondition i18n="@@tooltip--omit-not-before-condition">Omit Not Before Condition popover</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipOmitNotBeforeCondition" i18n-aria-label="@@tooltip--instruction"
+                <ng-template #tooltipOmitNotBeforeCondition translate="tooltip.omit-not-before-condition">Omit Not Before Condition popover</ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipOmitNotBeforeCondition" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </fieldset>
         </div>
         <div class="form-group">
             <div class="row">
                 <label for="responderId" class="col-sm-10">
-                    <ng-container i18n="@@label--responder-id">ResponderID</ng-container>
+                    <translate key="label.responder-id">ResponderID</translate>
                 </label>
                 <span class="col-sm-2 text-right">
-                    <ng-template #tooltipResponderId i18n="@@tooltip--responder-id">ResponderId popover</ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipResponderId" i18n-aria-label="@@tooltip--instruction"
+                    <ng-template #tooltipResponderId>
+                        <translate key="tooltip.responder-id">ResponderId popover</translate>
+                    </ng-template>
+                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipResponderId" i18n-aria-label="@@tooltip.instruction"
                         aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                 </span>
             </div>
diff --git a/ui/src/app/metadata/domain/component/index.ts b/ui/src/app/metadata/domain/component/index.ts
index 238ff8d25..9aca9ce25 100644
--- a/ui/src/app/metadata/domain/component/index.ts
+++ b/ui/src/app/metadata/domain/component/index.ts
@@ -19,6 +19,7 @@ import { ProviderFormFragmentComponent } from './forms/provider-form-fragment.co
 
 import { SharedModule } from '../../../shared/shared.module';
 import { DomainModule } from '../../domain/domain.module';
+import { I18nModule } from '../../../i18n/i18n.module';
 
 export const COMPONENTS = [
     AdvancedInfoFormComponent,
@@ -51,7 +52,8 @@ export const declarations = [
         RouterModule,
         NgbPopoverModule,
         NgbModalModule,
-        SharedModule
+        SharedModule,
+        I18nModule
     ],
     providers: []
 })
diff --git a/ui/src/app/metadata/domain/component/preview-dialog.component.html b/ui/src/app/metadata/domain/component/preview-dialog.component.html
index 1a943cbf0..a8fc698d8 100644
--- a/ui/src/app/metadata/domain/component/preview-dialog.component.html
+++ b/ui/src/app/metadata/domain/component/preview-dialog.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title" i18n="@@label--preview-provider">Preview XML</h4>
+    <h4 class="modal-title" translate="label.preview-provider">Preview XML</h4>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.close()">
         <span aria-hidden="true">&times;</span>
     </button>
@@ -10,7 +10,7 @@ <h4 class="modal-title" i18n="@@label--preview-provider">Preview XML</h4>
 <div class="modal-footer">
     <button type="button" class="btn btn-primary" (click)="preview(xml)">
         <i class="fa fa-fw fa-save"></i>
-        <ng-container i18n="@@action--download-file">Download File</ng-container>
+        <translate key="action.download-file">Download File</translate>
     </button>
-    <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" i18n="@@action--cancel">Cancel</button>
+    <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" translate="action.cancel">Cancel</button>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/domain/domain.module.ts b/ui/src/app/metadata/domain/domain.module.ts
index c51bbb260..5cf2a72b0 100644
--- a/ui/src/app/metadata/domain/domain.module.ts
+++ b/ui/src/app/metadata/domain/domain.module.ts
@@ -13,6 +13,7 @@ import { MetadataProviderService } from './service/provider.service';
 import { EntityEffects } from './effect/entity.effect';
 import { PreviewDialogComponent } from './component/preview-dialog.component';
 import { MetadataFilterService } from './service/filter.service';
+import { I18nModule } from '../../i18n/i18n.module';
 
 export const COMPONENTS = [
     PreviewDialogComponent
@@ -27,7 +28,8 @@ export const DECLARATIONS = [
     entryComponents: COMPONENTS,
     imports: [
         HttpModule,
-        CommonModule
+        CommonModule,
+        I18nModule
     ],
     exports: DECLARATIONS,
     providers: []
diff --git a/ui/src/app/metadata/filter/component/search-dialog.component.html b/ui/src/app/metadata/filter/component/search-dialog.component.html
index 141a93a14..7b6697f37 100644
--- a/ui/src/app/metadata/filter/component/search-dialog.component.html
+++ b/ui/src/app/metadata/filter/component/search-dialog.component.html
@@ -1,7 +1,7 @@
 <section role="dialog" aria-label="Search filter modal" tabindex="0">
     <div class="modal-header">
         <h4 class="modal-title">
-            <ng-container i18n="@@label--search-entity-id">Search Entity Id</ng-container>
+            <translate key="label.search-entity-id">Search Entity Id</translate>
              ({{ source }})
         </h4>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close modal" (click)="activeModal.dismiss()">
@@ -17,7 +17,7 @@ <h4 class="modal-title">
                         class="form-control"
                         aria-label="Entity ID search text box"
                     />
-                    <small class="form-text text-muted" i18n="@@label--min-4-chars">
+                    <small class="form-text text-muted" translate="label.min-4-chars">
                         Minimum 4 characters.
                     </small>
                 </div>
@@ -29,7 +29,7 @@ <h4 class="modal-title">
                         [disabled]="form.get('search').invalid">
                         <i class="fa fa-fw fa-search" *ngSwitchDefault></i>
                         <i class="fa fa-fw fa-spinner fa-pulse fa-fw" *ngSwitchCase="true"></i>
-                        <ng-container i18n="@@action--search">Search</ng-container>
+                        <translate key="action.search">Search</translate>
                     </button>
                 </div>
             </div>
@@ -47,8 +47,8 @@ <h4 class="modal-title">
     <div class="modal-footer">
         <button type="button" class="btn btn-primary" (click)="activeModal.close(selected)">
             <i class="fa fa-fw fa-save"></i>
-            <ng-container i18n="@@action--select-id">Select ID</ng-container>
+            <translate key="action.select-id">Select ID</translate>
         </button>
-        <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" i18n="@@action--cancel">Cancel</button>
+        <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" translate="action.cancel">Cancel</button>
     </div>
 </section>
diff --git a/ui/src/app/metadata/filter/container/edit-filter.component.html b/ui/src/app/metadata/filter/container/edit-filter.component.html
index 5c9ecb5c8..249018795 100644
--- a/ui/src/app/metadata/filter/container/edit-filter.component.html
+++ b/ui/src/app/metadata/filter/container/edit-filter.component.html
@@ -5,7 +5,7 @@
                 <div class="col-md-12">
                     <span class="display-6">
                         <i class="fa fa-fw fa-gears"></i>
-                        <ng-container i18n="@@label--new-filter">&nbsp; Edit EntityAttributesFilter</ng-container>
+                        <translate key="label.new-filter">&nbsp; Edit EntityAttributesFilter</translate>
                     </span>
                 </div>
             </div>
@@ -18,11 +18,11 @@
                         'fa-spinner': (isSaving$ | async),
                         'fa-pulse': (isSaving$ | async)
                     }"></i>
-                    <ng-container i18n="@@action--save">Save</ng-container>
+                    <translate key="action.save">Save</translate>
                 </button>
                 &nbsp;
                 <button (click)="this.cancel()" type="reset" class="btn btn-secondary" [disabled]="isSaving$ | async">
-                    <ng-container i18n="@@action--cancel">Cancel</ng-container>
+                    <translate key="action.cancel">Cancel</translate>
                 </button>
             </div>
             <sf-form
diff --git a/ui/src/app/metadata/filter/container/new-filter.component.html b/ui/src/app/metadata/filter/container/new-filter.component.html
index 22c07b036..9cedaa2a4 100644
--- a/ui/src/app/metadata/filter/container/new-filter.component.html
+++ b/ui/src/app/metadata/filter/container/new-filter.component.html
@@ -5,7 +5,7 @@
                 <div class="col-md-12">
                     <span class="display-6">
                         <i class="fa fa-fw fa-gears"></i>
-                        <ng-container i18n="@@label--new-filter">&nbsp; New Filter - EntityAttributes</ng-container>
+                        <translate key="label.new-filter">&nbsp; New Filter - EntityAttributes</translate>
                     </span>
                 </div>
             </div>
@@ -18,11 +18,11 @@
                                         'fa-spinner': (isSaving$ | async),
                                         'fa-pulse': (isSaving$ | async)
                                     }"></i>
-                    <ng-container i18n="@@action--save">Save</ng-container>
+                    <translate key="action.save">Save</translate>
                 </button>
                 &nbsp;
                 <button (click)="this.cancel()" type="reset" class="btn btn-secondary" [disabled]="isSaving$ | async">
-                    <ng-container i18n="@@action--cancel">Cancel</ng-container>
+                    <translate key="action.cancel">Cancel</translate>
                 </button>
             </div>
             <sf-form
diff --git a/ui/src/app/metadata/filter/filter.module.ts b/ui/src/app/metadata/filter/filter.module.ts
index f4f86b486..8f4d2e509 100644
--- a/ui/src/app/metadata/filter/filter.module.ts
+++ b/ui/src/app/metadata/filter/filter.module.ts
@@ -21,6 +21,7 @@ import { DomainModule } from '../domain/domain.module';
 import { ModuleWithProviders } from '@angular/compiler/src/core';
 import { FilterCollectionEffects } from './effect/collection.effect';
 import { FormModule } from '../../schema-form/schema-form.module';
+import { I18nModule } from '../../i18n/i18n.module';
 
 @NgModule({
     declarations: [
@@ -42,7 +43,8 @@ import { FormModule } from '../../schema-form/schema-form.module';
         DomainModule,
         HttpClientModule,
         RouterModule,
-        FormModule
+        FormModule,
+        I18nModule
     ]
 })
 export class FilterModule {
diff --git a/ui/src/app/metadata/manager/component/delete-dialog.component.html b/ui/src/app/metadata/manager/component/delete-dialog.component.html
index 8bd928974..443f25ce9 100644
--- a/ui/src/app/metadata/manager/component/delete-dialog.component.html
+++ b/ui/src/app/metadata/manager/component/delete-dialog.component.html
@@ -1,10 +1,10 @@
 <div class="modal-header">
-    <h4 class="modal-title" i18n="@@message--delete-source-title">Delete Metadata Source?</h4>
+    <h4 class="modal-title" translate="message.delete-source-title">Delete Metadata Source?</h4>
 </div>
-<div class="modal-body"> <!-- [ngSwitch]="message" -->
-    <p i18n="@@message--delete-source-body">You are deleting a metadata source. This cannot be undone. Continue?</p>
+<div class="modal-body">
+    <p translate="message.delete-source-body">You are deleting a metadata source. This cannot be undone. Continue?</p>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-danger" (click)="this.activeModal.close()" i18n="@@action--delete">Delete</button>
-    <button type="button" class="btn btn-secondary" (click)="this.activeModal.dismiss()" i18n="@@action--cancel">Cancel</button>
+    <button type="button" class="btn btn-danger" (click)="this.activeModal.close()" translate="action.delete">Delete</button>
+    <button type="button" class="btn btn-secondary" (click)="this.activeModal.dismiss()" translate="action.cancel">Cancel</button>
 </div>
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.html b/ui/src/app/metadata/manager/component/provider-item.component.html
index b2799e0cf..0b222543d 100644
--- a/ui/src/app/metadata/manager/component/provider-item.component.html
+++ b/ui/src/app/metadata/manager/component/provider-item.component.html
@@ -1,3 +1,4 @@
+<!-- TODO -->
 <div class="card">
     <div class="card-header" (click)="toggle.emit(provider)" (keydown.space)="toggle.emit(provider)" tabindex="0">
         <div class="d-flex">
@@ -73,8 +74,8 @@
                                 'fa-check-circle text-success': provider.enabled,
                                 'fa-times-circle text-danger': !provider.enabled
                             }"></i>
-                            <span *ngIf="provider.enabled" i18n="@@value--provider">Enabled</span>
-                            <span *ngIf="!provider.enabled" i18n="@@value--disabled">Disabled</span>
+                            <span *ngIf="provider.enabled" translate="value.enabled">Enabled</span>
+                            <span *ngIf="!provider.enabled" translate="value.disabled">Disabled</span>
                         </div>
                     </div>
                 </div>
diff --git a/ui/src/app/metadata/manager/component/provider-search.component.html b/ui/src/app/metadata/manager/component/provider-search.component.html
index 2a0682179..85371e28a 100644
--- a/ui/src/app/metadata/manager/component/provider-search.component.html
+++ b/ui/src/app/metadata/manager/component/provider-search.component.html
@@ -1,12 +1,12 @@
 <form [formGroup]="searchForm">
-    <label for="search" class="sr-only" i18n="@@action--search">Search</label>
+    <label for="search" class="sr-only" translate="action.search">Search</label>
     <div class="input-group input-group-sm">
         <input
             id="search"
             type="text"
             tabindex="0"
             class="form-control"
-            i18n-placeholder="@@message--search-files"
+            i18n-placeholder="@@message.search-files"
             placeholder="Search Files"
             aria-label="To search for a source, enter name then press enter"
             formControlName="search"
@@ -17,7 +17,7 @@
                 tabindex="0"
                 aria-label="Clear search text field"
                 (click)="search.emit('')"
-                i18n="@@action--clear">Clear</button>
+                translate="action.clear">Clear</button>
         </div>
     </div>
 </form>
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.html b/ui/src/app/metadata/manager/component/resolver-item.component.html
index 5be89b505..6c5ae2afe 100644
--- a/ui/src/app/metadata/manager/component/resolver-item.component.html
+++ b/ui/src/app/metadata/manager/component/resolver-item.component.html
@@ -17,7 +17,7 @@
                         'fa-check-circle text-success': entity.enabled,
                         'fa-times-circle text-danger': !entity.enabled
                     }"></i>
-                    <span *ngIf="entity.isDraft()" class="badge badge-warning" i18n="@@warning--incomplete-form" aria-label="Warning Badge: Incomplete Form">Incomplete Form</span>
+                    <span *ngIf="entity.isDraft()" class="badge badge-warning" translate="warning.incomplete-form" aria-label="Warning Badge: Incomplete Form">Incomplete Form</span>
                     <small class="d-block">{{ entity.getDisplayId() }}</small>
                 </div>
             </div>
@@ -36,20 +36,20 @@
             <div class="row">
                 <div class="col-10">
                     <div class="row">
-                        <div class="col text-right font-weight-bold" i18n="@@label--service-provider">
+                        <div class="col text-right font-weight-bold" translate="label.service-provider">
                             Metadata Source Name:
                         </div>
                         <div class="col">{{ entity.name }}</div>
-                        <div class="col text-right font-weight-bold" i18n="@@label--created-date">Created Date:</div>
+                        <div class="col text-right font-weight-bold" translate="label.created-date">Created Date:</div>
                         <div class="col" *ngIf="!entity.isDraft()">{{ entity.getCreationDate() | date:'medium' }}</div>
                         <div class="col" *ngIf="entity.isDraft()"> &mdash; </div>
                     </div>
                     <div class="row">
-                        <div class="col text-right font-weight-bold" i18n="@@label--service-entity-id">
+                        <div class="col text-right font-weight-bold" translate="label.service-entity-id">
                             Metadata Source Entity ID:
                         </div>
                         <div class="col">{{ entity.getDisplayId() }}</div>
-                        <div class="col text-right font-weight-bold" i18n="@@label--service-provider-status">
+                        <div class="col text-right font-weight-bold" translate="label.service-provider-status">
                             Metadata Source Status:
                         </div>
                         <div class="col" *ngIf="!entity.isDraft()">
@@ -57,11 +57,11 @@
                                 'fa-check-circle text-success': entity.enabled,
                                 'fa-times-circle text-danger': !entity.enabled
                             }"></i>
-                            <span *ngIf="entity.enabled" i18n="@@value--enabled">Enabled</span>
-                            <span *ngIf="!entity.enabled" i18n="@@value--disabled">Disabled</span>
+                            <span *ngIf="entity.enabled" translate="value.enabled">Enabled</span>
+                            <span *ngIf="!entity.enabled" translate="value.disabled">Disabled</span>
                         </div>
                         <div class="col" *ngIf="entity.isDraft()">
-                            <span class="badge badge-warning" i18n="@@warning--incomplete-form">Incomplete Form</span>
+                            <span class="badge badge-warning" translate="warning.incomplete-form">Incomplete Form</span>
                         </div>
                     </div>
                 </div>
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
index 467538039..f12b2a925 100644
--- a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
+++ b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
@@ -3,7 +3,7 @@
         <div class="section-header bg-primary p-2 text-light">
             <div class="row justify-content-between">
                 <div class="col-12">
-                    <span class="lead" i18n="@@label--current-metadata-sources">Current Metadata Providers</span>
+                    <span class="lead" translate="label.current-metadata-sources">Current Metadata Providers</span>
                 </div>
             </div>
         </div>
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
index d771864ca..122d7587e 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
@@ -3,7 +3,7 @@
         <div class="section-header bg-primary p-2 text-light">
             <div class="row justify-content-between">
                 <div class="col-md-8">
-                    <span class="lead" i18n="@@label--current-metadata-sources">Current Metadata Sources</span>
+                    <span class="lead" translate="label.current-metadata-sources">Current Metadata Sources</span>
                 </div>
                 <div class="col-md-4">
                     <provider-search
diff --git a/ui/src/app/metadata/metadata.module.ts b/ui/src/app/metadata/metadata.module.ts
index 259620bf1..9c88a04df 100644
--- a/ui/src/app/metadata/metadata.module.ts
+++ b/ui/src/app/metadata/metadata.module.ts
@@ -8,6 +8,7 @@ import { MetadataPageComponent } from './metadata.component';
 import { ManagerModule } from './manager/manager.module';
 import { MetadataRoutingModule } from './metadata.routing';
 import { ProviderModule } from './provider/provider.module';
+import { I18nModule } from '../i18n/i18n.module';
 
 
 @NgModule({
@@ -17,7 +18,8 @@ import { ProviderModule } from './provider/provider.module';
         DomainModule.forRoot(),
         ManagerModule.forRoot(),
         ProviderModule.forRoot(),
-        MetadataRoutingModule
+        MetadataRoutingModule,
+        I18nModule
     ],
     providers: [],
     declarations: [
diff --git a/ui/src/app/metadata/provider/component/delete-filter.component.html b/ui/src/app/metadata/provider/component/delete-filter.component.html
index 64d9bab9b..2983901e8 100644
--- a/ui/src/app/metadata/provider/component/delete-filter.component.html
+++ b/ui/src/app/metadata/provider/component/delete-filter.component.html
@@ -1,10 +1,10 @@
 <div class="modal-header">
-    <h4 class="modal-title" i18n="@@message--delete-source-title">Delete Metadata Filter?</h4>
+    <h4 class="modal-title" translate="message.delete-source-title">Delete Metadata Filter?</h4>
 </div>
 <div class="modal-body">
-    <p i18n="@@message--delete-source-body">You are deleting a metadata filter. This cannot be undone. Continue?</p>
+    <p translate="message.delete-source-body">You are deleting a metadata filter. This cannot be undone. Continue?</p>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-danger" (click)="this.activeModal.close()" i18n="@@action--delete">Delete</button>
-    <button type="button" class="btn btn-secondary" (click)="this.activeModal.dismiss()" i18n="@@action--cancel">Cancel</button>
+    <button type="button" class="btn btn-danger" (click)="this.activeModal.close()" translate="action.delete">Delete</button>
+    <button type="button" class="btn btn-secondary" (click)="this.activeModal.dismiss()" translate="action.cancel">Cancel</button>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html b/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html
index f556f49cd..6c210c045 100644
--- a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html
+++ b/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html
@@ -1,16 +1,16 @@
 <ng-container>
     <div aria-label="Save your information? modal" role="region" tabindex="0">
         <div class="modal-header">
-            <h4 class="modal-title" i18n="@@message--unsaved-dialog-title">Save your information?</h4>
+            <h4 class="modal-title" translate="message.unsaved-dialog-title">Save your information?</h4>
         </div>
         <div class="modal-body">
-            <p i18n="@@message--unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
+            <p translate="message.unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-primary" (click)="this.close()">
-                <span i18n="@@action--discard-changes" aria-label="Discard changes, go back to dashboard">Discard Changes</span>
+                <span translate="action.discard-changes" aria-label="Discard changes, go back to dashboard">Discard Changes</span>
             </button>
-            <button type="button" class="btn btn-secondary" (click)="this.dismiss()" i18n="@@action--cancel" aria-label="Close modal and go back to editing">Cancel</button>
+            <button type="button" class="btn btn-secondary" (click)="this.dismiss()" translate="action.cancel" aria-label="Close modal and go back to editing">Cancel</button>
         </div>
     </div>
 </ng-container>
\ No newline at end of file
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.html b/ui/src/app/metadata/provider/container/provider-edit.component.html
index 85fc2bfc9..db835c649 100644
--- a/ui/src/app/metadata/provider/container/provider-edit.component.html
+++ b/ui/src/app/metadata/provider/container/provider-edit.component.html
@@ -26,20 +26,20 @@
                         'fa-spinner': (isSaving$ | async),
                         'fa-pulse': (isSaving$ | async)
                     }"></i>
-                    <ng-container i18n="@@action--save">Save</ng-container>
+                    <translate key="action.save">Save</ng-container>
                 </button>
                 &nbsp;
                 <button class="btn btn-secondary"
                     (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
                     role="button">
-                    <ng-container i18n="@@action--cancel">Cancel</ng-container>
+                    <translate key="action.cancel">Cancel</ng-container>
                 </button>
             </div>
             <div class="col-xs-12 col-lg-9 order-lg-1 order-3">
                 <div class="alert alert-danger alert-compact mt-3 mt-lg-0"
                     *ngIf="(isInvalid$ | async)">
                     <i class="fa fa-fw fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
-                    <ng-container i18n-text="@@message--editor-invalid">All forms must be valid before changes can be saved!</ng-container>
+                    <ng-container i18n-text="@@message.editor-invalid">All forms must be valid before changes can be saved!</ng-container>
                 </div>
             </div>
         </div>
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.html b/ui/src/app/metadata/provider/container/provider-wizard.component.html
index 7d1528b03..50ab3827f 100644
--- a/ui/src/app/metadata/provider/container/provider-wizard.component.html
+++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html
@@ -2,7 +2,7 @@
     <div class="section-header bg-info p-2 text-white">
         <div class="row justify-content-between">
             <div class="col-md-12">
-                <span class="display-6" i18n="@@label--add-a-new-metadata-resolver">Add a new metadata provider</span>
+                <span class="display-6" translate="label.add-a-new-metadata-resolver">Add a new metadata provider</span>
             </div>
         </div>
     </div>
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 277899b15..219f3d19c 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -31,6 +31,7 @@ import { ProviderEditorNavComponent } from './component/provider-editor-nav.comp
 import { UnsavedProviderComponent } from './component/unsaved-provider.dialog';
 import { ContentionModule } from '../../contention/contention.module';
 import { DeleteFilterComponent } from './component/delete-filter.component';
+import { I18nModule } from '../../i18n/i18n.module';
 
 @NgModule({
     declarations: [
@@ -61,7 +62,8 @@ import { DeleteFilterComponent } from './component/delete-filter.component';
         RouterModule,
         ContentionModule,
         NgbDropdownModule,
-        NgbModalModule
+        NgbModalModule,
+        I18nModule
     ],
     exports: []
 })
diff --git a/ui/src/app/metadata/resolver/component/unsaved-dialog.component.html b/ui/src/app/metadata/resolver/component/unsaved-dialog.component.html
index 763bcd770..091b7f4b7 100644
--- a/ui/src/app/metadata/resolver/component/unsaved-dialog.component.html
+++ b/ui/src/app/metadata/resolver/component/unsaved-dialog.component.html
@@ -1,22 +1,22 @@
 <ng-container [ngSwitch]="message">
     <div aria-label="Save your information? modal" role="region" tabindex="0">
         <div class="modal-header">
-            <h4 class="modal-title" i18n="@@message--unsaved-dialog-title">Save your information?</h4>
+            <h4 class="modal-title" translate="message.unsaved-dialog-title">Save your information?</h4>
         </div>
         <div class="modal-body">
-            <p *ngSwitchDefault i18n="@@message--unsaved-default">
+            <p *ngSwitchDefault translate="message.unsaved-default">
                 You have not completed the wizard! Do you wish to save this information? You can finish the wizard later by clicking the
                 "Edit"
                 <i class="fa fa-fw fa-edit"></i> icon on the dashboard.
             </p>
-            <p *ngSwitchCase="'editor'" i18n="@@message--unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
+            <p *ngSwitchCase="'editor'" translate="message.unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-primary" (click)="this.close()">
-                <span *ngSwitchDefault i18n="@@action--finish-later" aria-label="Finish changes later, go back to dashboard">Finish Later</span>
-                <span *ngSwitchCase="'editor'" i18n="@@action--discard-changes" aria-label="Discard changes, go back to dashboard">Discard Changes</span>
+                <span *ngSwitchDefault translate="action.finish-later" aria-label="Finish changes later, go back to dashboard">Finish Later</span>
+                <span *ngSwitchCase="'editor'" translate="action.discard-changes" aria-label="Discard changes, go back to dashboard">Discard Changes</span>
             </button>
-            <button type="button" class="btn btn-secondary" (click)="this.dismiss()" i18n="@@action--cancel" aria-label="Close modal and go back to editing">Cancel</button>
+            <button type="button" class="btn btn-secondary" (click)="this.dismiss()" translate="action.cancel" aria-label="Close modal and go back to editing">Cancel</button>
         </div>
     </div>
 </ng-container>
diff --git a/ui/src/app/metadata/resolver/component/wizard-nav.component.html b/ui/src/app/metadata/resolver/component/wizard-nav.component.html
index cada4d76f..de1cb9386 100644
--- a/ui/src/app/metadata/resolver/component/wizard-nav.component.html
+++ b/ui/src/app/metadata/resolver/component/wizard-nav.component.html
@@ -4,7 +4,7 @@
             <button class="nav-link previous btn clearfix" (click)="onPrevious.emit(previousPage.index)" [disabled]="wizardIsInvalid$ | async" [attr.aria-label]="previousPage.path" role="button">
                 <span class="direction pull-left">
                     <i class="fa fa-fw fa-arrow-circle-left d-block fa-2x"></i>
-                    <ng-container i18n="@@action--back">Back</ng-container>
+                    <translate key="action.back">Back</translate>
                 </span>
                 <span class="label pull-right">
                     {{ previousPage.index }}. <i18n-text [key]="previousPage.path"></i18n-text>
@@ -30,7 +30,7 @@ <h3 class="tag tag-primary">
                 </span>
                 <span class="direction pull-right">
                     <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                    <ng-container i18n="@@action--next">Next</ng-container>
+                    <translate key="action.next">Next</translate>
                 </span>
             </button>
         </li>
@@ -40,7 +40,7 @@ <h3 class="tag tag-primary">
                 [disabled]="wizardIsSaving$ | async"
                 aria-label="Save"
                 role="button">
-                <span class="label pull-left" i18n="@@action--save">Save</span>
+                <span class="label pull-left" translate="action.save">Save</span>
                 <span class="direction pull-right">
                     <i class="fa fa-fw next d-block fa-2x"
                         [ngClass]="{
@@ -48,7 +48,7 @@ <h3 class="tag tag-primary">
                             'fa-spinner': (wizardIsSaving$ | async),
                             'fa-pulse': (wizardIsSaving$ | async)
                         }"></i>
-                    <ng-container i18n="@@action--save">Save</ng-container>
+                    <translate key="action.save">Save</translate>
                 </span>
             </button>
         </li>
diff --git a/ui/src/app/metadata/resolver/container/blank-resolver.component.html b/ui/src/app/metadata/resolver/container/blank-resolver.component.html
index 923d35548..dd9ff6af1 100644
--- a/ui/src/app/metadata/resolver/container/blank-resolver.component.html
+++ b/ui/src/app/metadata/resolver/container/blank-resolver.component.html
@@ -5,18 +5,18 @@
                 <li class="nav-item">
                     <h3 class="tag tag-primary">
                         <span class="index">1</span>
-                        <ng-container i18n="@@label--name-and-entityid">1. Name and EntityId</ng-container>
+                        <translate key="label.name-and-entityid">1. Name and EntityId</translate>
                     </h3>
                 </li>
                 <li class="nav-item">
                     <button class="nav-link next btn clearfix" (click)="next()" [disabled]="providerForm.invalid" aria-label="Next: Step 2, Organization information" role="button">
                         <span class="label pull-left">
                             2.
-                            <ng-container i18n="@@label--org-info">Organization Information</ng-container>
+                            <translate key="label.org-info">Organization Information</translate>
                         </span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                            <ng-container i18n="@@action--next">Next</ng-container>
+                            <translate key="action.next">Next</translate>
                         </span>
                     </button>
                 </li>
@@ -24,33 +24,33 @@ <h3 class="tag tag-primary">
             <fieldset class="bg-light border rounded p-4">
                 <div class="form-group">
                     <label for="serviceProviderName">
-                        <ng-container i18n="@@label--service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</ng-container>
+                        <translate key="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</translate>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <input id="serviceProviderName" type="text" class="form-control" placeholder="" formControlName="serviceProviderName" />
                     <ng-container *ngIf="providerForm.get('serviceProviderName').touched && providerForm.get('serviceProviderName').invalid">
                         <small class="form-text text-danger" *ngIf="providerForm.get('serviceProviderName').hasError('required')">
-                            <ng-container i18n="@@message--service-resolver-name-required">Service Resolver Name is required</ng-container>
+                            <translate key="message.service-resolver-name-required">Service Resolver Name is required</translate>
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
                     <label for="entityId">
-                        <ng-container i18n="@@label--service-resolver-entity-id">Service Resolver Entity ID</ng-container>
+                        <translate key="label.service-resolver-entity-id">Service Resolver Entity ID</translate>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <input id="entityId" type="text" class="form-control" placeholder="" formControlName="entityId" />
                     <ng-container *ngIf="providerForm.get('entityId').touched && providerForm.get('entityId').invalid">
                         <small class="form-text text-danger" *ngIf="providerForm.get('entityId').hasError('required')">
-                            <ng-container i18n="@@message--entity-id-required">Entity ID is required</ng-container>
+                            <translate key="message.entity-id-required">Entity ID is required</translate>
                         </small>
                     </ng-container>
                     <small class="form-text text-danger" *ngIf="providerForm.get('entityId').hasError('unique')">
-                        <ng-container i18n="@@message--entity-id-must-be-unique">Entity ID must be unique</ng-container>
+                        <translate key="message.entity-id-must-be-unique">Entity ID must be unique</translate>
                     </small>
                 </div>
                 <button type="submit" class="btn btn-primary sr-only" [disabled]="providerForm.invalid">
-                    <ng-container i18n="@@action--next">Next</ng-container>
+                    <translate key="action.next">Next</translate>
                     <i class="fa fa-fw fa-arrow-circle-right fa-lg"></i>
                 </button>
             </fieldset>
diff --git a/ui/src/app/metadata/resolver/container/confirm-copy.component.html b/ui/src/app/metadata/resolver/container/confirm-copy.component.html
index 3e794dbe6..8e5fb9d34 100644
--- a/ui/src/app/metadata/resolver/container/confirm-copy.component.html
+++ b/ui/src/app/metadata/resolver/container/confirm-copy.component.html
@@ -3,7 +3,7 @@
         <div class="section-header bg-info p-2 text-white">
             <div class="row justify-content-between">
                 <div class="col-md-12">
-                    <span class="display-6" i18n="@@label--add-a-new-metadata-source">Add a new metadata source - Finish Summary</span>
+                    <span class="display-6" translate="label.add-a-new-metadata-source">Add a new metadata source - Finish Summary</span>
                 </div>
             </div>
         </div>
@@ -13,9 +13,9 @@
                     <button class="nav-link previous btn clearfix" role="button" routerLink="/new/copy">
                         <span class="direction pull-left">
                             <i class="fa fa-fw fa-arrow-circle-left d-block fa-2x"></i>
-                            <ng-container i18n="@@action--back">Back</ng-container>
+                            <translate key="action.back">Back</translate>
                         </span>
-                        <span class="label pull-right" i18n="@@label--name-and-entityid">
+                        <span class="label pull-right" translate="label.name-and-entityid">
                             Name and Entity ID.
                         </span>
                     </button>
@@ -23,19 +23,19 @@
                 <li class="nav-item">
                     <h3 class="tag tag-primary">
                         <span class="index"><i class="fa fa-fw fa-check"></i></span>
-                        <ng-container i18n="@@label--finish-summary-validation">Finished!</ng-container>
+                        <translate key="label.finish-summary-validation">Finished!</translate>
                     </h3>
                 </li>
                 <li class="nav-item">
                     <button class="nav-link save btn" aria-label="Save" role="button" (click)="onSave(resolver)" [disabled]="saving$ | async">
-                        <span class="label pull-left" i18n="@@action--save">Save</span>
+                        <span class="label pull-left" translate="action.save">Save</span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw next d-block fa-2x"
                                 [ngClass]="{
                                     'fa-save': !(saving$ | async),
                                     'fa-spinner fa-pulse': (saving$ | async)
                                 }"></i>
-                            <ng-container i18n="@@action--save">Save</ng-container>
+                            <translate key="action.save">Save</translate>
                         </span>
                     </button>
                 </li>
diff --git a/ui/src/app/metadata/resolver/container/copy-resolver.component.html b/ui/src/app/metadata/resolver/container/copy-resolver.component.html
index f49d4e388..4e0d2e445 100644
--- a/ui/src/app/metadata/resolver/container/copy-resolver.component.html
+++ b/ui/src/app/metadata/resolver/container/copy-resolver.component.html
@@ -5,18 +5,18 @@
                 <li class="nav-item">
                     <h3 class="tag tag-primary">
                         <span class="index">1</span>
-                        <ng-container i18n="@@label--name-and-entityid">1. Name and EntityId</ng-container>
+                        <translate key="label.name-and-entityid">1. Name and EntityId</translate>
                     </h3>
                 </li>
                 <li class="nav-item">
                     <button class="nav-link next btn clearfix" (click)="next()" [disabled]="providerForm.invalid" aria-label="Next: Step 2, Organization information"
                         role="button">
-                        <span class="label pull-left" i18n="@@label--finish-validate">
+                        <span class="label pull-left" translate="label.finish-validate">
                             Finished!
                         </span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                            <ng-container i18n="@@action--next">Next</ng-container>
+                            <translate key="action.next">Next</translate>
                         </span>
                     </button>
                 </li>
@@ -24,7 +24,7 @@ <h3 class="tag tag-primary">
             <fieldset class="bg-light border rounded p-4">
                 <div class="form-group">
                     <label for="serviceProviderName">
-                        <ng-container i18n="@@label--select-entity-id-to-copy">Select the Entity ID to copy</ng-container>
+                        <translate key="label.select-entity-id-to-copy">Select the Entity ID to copy</translate>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <auto-complete
@@ -33,44 +33,44 @@ <h3 class="tag tag-primary">
                         [matches]="searchResults$ | async"
                         [required]="true"
                         role="textbox"
-                        i18n-aria-label="@@label--select-entity-id-to-copy"
+                        i18n-aria-label="@@label.select-entity-id-to-copy"
                         aria-label="Select the Entity ID to copy">
                     </auto-complete>
                     <ng-container *ngIf="providerForm.get('serviceProviderName').touched && providerForm.get('serviceProviderName').invalid">
                         <small class="form-text text-danger" *ngIf="providerForm.get('serviceProviderName').hasError('required')">
-                            <ng-container i18n="@@message--service-resolver-name-required"></ng-container>
+                            <translate key="message.service-resolver-name-required"></translate>
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
                     <label for="serviceProviderName">
-                        <ng-container i18n="@@label--metadata-source-name-dashboard-display-only">Metadata Source Name (Dashboard Display Only)</ng-container>
+                        <translate key="label.metadata-source-name-dashboard-display-only">Metadata Source Name (Dashboard Display Only)</translate>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <input id="serviceProviderName" type="text" class="form-control" placeholder="" formControlName="serviceProviderName" />
                     <ng-container *ngIf="providerForm.get('serviceProviderName').touched && providerForm.get('serviceProviderName').invalid">
                         <small class="form-text text-danger" *ngIf="providerForm.get('serviceProviderName').hasError('required')">
-                            <ng-container i18n="@@message--service-resolver-name-required">Service Resolver Name is required</ng-container>
+                            <translate key="message.service-resolver-name-required">Service Resolver Name is required</translate>
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
                     <label for="entityId">
-                        <ng-container i18n="@@label--service-resolver-entity-id">New Entity ID</ng-container>
+                        <translate key="label.service-resolver-entity-id">New Entity ID</translate>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <input id="entityId" type="text" class="form-control" placeholder="" formControlName="entityId" />
                     <ng-container *ngIf="providerForm.get('entityId').touched && providerForm.get('entityId').invalid">
                         <small class="form-text text-danger" *ngIf="providerForm.get('entityId').hasError('required')">
-                            <ng-container i18n="@@message--entity-id-required">Entity ID is required</ng-container>
+                            <translate key="message.entity-id-required">Entity ID is required</translate>
                         </small>
                     </ng-container>
                     <small class="form-text text-danger" *ngIf="providerForm.get('entityId').hasError('unique')">
-                        <ng-container i18n="@@message--entity-id-must-be-unique">Entity ID must be unique</ng-container>
+                        <translate key="message.entity-id-must-be-unique">Entity ID must be unique</translate>
                     </small>
                 </div>
                 <button type="submit" class="btn btn-primary sr-only" [disabled]="providerForm.invalid">
-                    <ng-container i18n="@@action--next">Next</ng-container>
+                    <translate key="action.next">Next</translate>
                     <i class="fa fa-fw fa-arrow-circle-right fa-lg"></i>
                 </button>
             </fieldset>
@@ -80,8 +80,8 @@ <h3 class="tag tag-primary">
         <table class="table table-striped table-sm">
             <thead>
                 <tr class="table-secondary">
-                    <th i18n="@@label--sections-to-copy">Sections to Copy?</th>
-                    <th i18n="@@label--yes">Yes</th>
+                    <th translate="label.sections-to-copy">Sections to Copy?</th>
+                    <th translate="label.yes">Yes</th>
                 </tr>
             </thead>
             <tbody>
@@ -103,20 +103,20 @@ <h3 class="tag tag-primary">
                     </td>
                 </tr>
                 <tr>
-                    <td scope="col" i18n="@@label--check-all-attributes">Check All Attributes</td>
+                    <td scope="col" translate="label.check-all-attributes">Check All Attributes</td>
                     <td scope="col">
                         <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()">
                             <i class="fa fa-fw fa-check"></i>
-                            <span class="sr-only" i18n="@@label--check-all-attributes">Check All Attributes</span>
+                            <span class="sr-only" translate="label.check-all-attributes">Check All Attributes</span>
                         </button>
                     </td>
                 </tr>
                 <tr>
-                    <td scope="col" i18n="@@label--clear-all-attributes">Clear All Attributes</td>
+                    <td scope="col" translate="label.clear-all-attributes">Clear All Attributes</td>
                     <td scope="col">
                         <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()">
                             <i class="fa fa-fw fa-times"></i>
-                            <span class="sr-only" i18n="@@label--clear-all-attributes">Clear All Attributes</span>
+                            <span class="sr-only" translate="label.clear-all-attributes">Clear All Attributes</span>
                         </button>
                     </td>
                 </tr>
diff --git a/ui/src/app/metadata/resolver/container/editor.component.html b/ui/src/app/metadata/resolver/container/editor.component.html
index 422a1cbc2..910f028d0 100644
--- a/ui/src/app/metadata/resolver/container/editor.component.html
+++ b/ui/src/app/metadata/resolver/container/editor.component.html
@@ -46,19 +46,19 @@
                         aria-label="Save changes to the metadata source. You will return to the dashboard"
                         role="button">
                         <i class="fa fa-fw fa-save"></i>
-                        <ng-container i18n="@@action--save">Save</ng-container>
+                        <translate key="action.save">Save</translate>
                     </button>
                     &nbsp;
                     <button class="btn btn-secondary"
                         (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
                         role="button">
-                        <ng-container i18n="@@action--cancel">Cancel</ng-container>
+                        <translate key="action.cancel">Cancel</translate>
                     </button>
                 </div>
                 <div class="col-xs-12 col-lg-9 order-lg-1 order-3">
                     <div class="alert alert-danger alert-compact mt-3 mt-lg-0" *ngIf="(wizardIsInvalid$ | async) && (otherPageInvalid$ | async)">
                         <i class="fa fa-fw fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
-                        <ng-container i18n-text="@@message--editor-invalid">All forms must be valid before changes can be saved!</ng-container>
+                        <translate key="message.editor-invalid">All forms must be valid before changes can be saved!</translate>
                     </div>
                 </div>
             </div>
diff --git a/ui/src/app/metadata/resolver/container/new-resolver.component.html b/ui/src/app/metadata/resolver/container/new-resolver.component.html
index da87cfc6c..37285c7a6 100644
--- a/ui/src/app/metadata/resolver/container/new-resolver.component.html
+++ b/ui/src/app/metadata/resolver/container/new-resolver.component.html
@@ -3,12 +3,12 @@
         <div class="section-header bg-info p-2 text-white">
             <div class="row justify-content-between">
                 <div class="col-md-12">
-                    <span class="display-6" i18n="@@label--add-a-new-metadata-resolver">Add a new metadata source</span>
+                    <span class="display-6" translate="label.add-a-new-metadata-resolver">Add a new metadata source</span>
                 </div>
             </div>
         </div>
         <div class="section-body p-4 border border-top-0 border-info">
-            <h3 i18n="@@label--how-are-you-adding-the-metadata-information">How are you adding the metadata information?</h3>
+            <h3 translate="label.how-are-you-adding-the-metadata-information">How are you adding the metadata information?</h3>
             <br />
             <div class="row">
                 <div class="col col-xl-6 col-lg-9 col-xs-12">
@@ -20,12 +20,12 @@ <h3 i18n="@@label--how-are-you-adding-the-metadata-information">How are you addi
                                 role="button"
                                 routerLink="upload"
                                 routerLinkActive="btn-success">
-                                <ng-container i18n="@@label--upload-url">Upload/URL</ng-container>
+                                <translate key="label.upload-url">Upload/URL</translate>
                                 <i class="fa fa-link fa-2x d-block"></i>
                             </button>
                         </div>
                         <div class="">
-                            <span class="subheading-1">&nbsp;<ng-container i18n="@@label--or">or</ng-container>&nbsp;</span>
+                            <span class="subheading-1">&nbsp;<translate key="label.or">or</translate>&nbsp;</span>
                         </div>
                         <div class="resolver-nav-option">
                             <button type="button"
@@ -34,12 +34,12 @@ <h3 i18n="@@label--how-are-you-adding-the-metadata-information">How are you addi
                                 role="button"
                                 routerLink="blank"
                                 routerLinkActive="btn-info">
-                                <ng-container i18n="@@action--create">Create</ng-container>
+                                <translate key="action.create">Create</translate>
                                 <i class="fa fa-plus-square fa-2x d-block"></i>
                             </button>
                         </div>
                         <div class="">
-                            <span class="subheading-1">&nbsp;<ng-container i18n="@@label--or">or</ng-container>&nbsp;</span>
+                            <span class="subheading-1">&nbsp;<translate key="label.or">or</translate>&nbsp;</span>
                         </div>
                         <div class="resolver-nav-option">
                             <button type="button"
@@ -48,7 +48,7 @@ <h3 i18n="@@label--how-are-you-adding-the-metadata-information">How are you addi
                                 role="button"
                                 routerLink="copy"
                                 routerLinkActive="btn-warning">
-                                <ng-container i18n="@@action--copy">Copy</ng-container>
+                                <translate key="action.copy">Copy</translate>
                                 <i class="fa fa-copy fa-2x d-block"></i>
                             </button>
                         </div>
diff --git a/ui/src/app/metadata/resolver/container/upload-resolver.component.html b/ui/src/app/metadata/resolver/container/upload-resolver.component.html
index 11ce69a7a..b52f5abdd 100644
--- a/ui/src/app/metadata/resolver/container/upload-resolver.component.html
+++ b/ui/src/app/metadata/resolver/container/upload-resolver.component.html
@@ -5,17 +5,17 @@
                 <li class="nav-item">
                     <h3 class="tag tag-primary">
                         <span class="index">1</span>
-                        <ng-container i18n="@@label--name-and-upload-url">1. Name and Upload Url</ng-container>
+                        <translate key="label.name-and-upload-url">1. Name and Upload Url</translate>
                     </h3>
                 </li>
                 <li class="nav-item">
                     <button class="nav-link next btn clearfix" (click)="save()" [disabled]="providerForm.invalid" aria-label="Save metadata resolver" role="button">
-                        <span class="label pull-left" i18n="@@action--save">
+                        <span class="label pull-left" translate="action.save">
                             Save
                         </span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw fa-save d-block fa-2x"></i>
-                            <ng-container i18n="@@action--save">Save</ng-container>
+                            <translate key="action.save">Save</translate>
                         </span>
                     </button>
                 </li>
@@ -23,39 +23,39 @@ <h3 class="tag tag-primary">
             <fieldset class="bg-light border rounded p-4">
                 <div class="form-group">
                     <label for="serviceProviderName">
-                        <ng-container i18n="@@label--service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</ng-container>
+                        <translate key="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</translate>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <input id="serviceProviderName" type="text" class="form-control" placeholder="" formControlName="serviceProviderName" />
                     <ng-container *ngIf="providerForm.get('serviceProviderName').touched && providerForm.get('serviceProviderName').invalid">
                         <small class="form-text text-danger"
                             *ngIf="providerForm.get('serviceProviderName').hasError('required')"
-                            i18n="@@message--service-resolver-name-required">
+                            translate="message.service-resolver-name-required">
                             Service Resolver Name is required
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
-                    <label i18n="@@label--service-resolver-file" for="fileInput">Select Resolver Metadata File</label>
+                    <label translate="label.service-resolver-file" for="fileInput">Select Resolver Metadata File</label>
                     <div class="custom-file d-block">
                         <input id="fileInput" type="file" name="file" class="custom-file-input" (change)="fileChange($event)" />
                         <label for="fileInput" class="custom-file-label">
-                            <span *ngIf="!providerForm.get('file').value" class="custom-file-control" i18n="@@action--choose-file">Choose File</span>
-                            <span *ngIf="providerForm.get('file').value" class="custom-file-control" i18n="@@action--choose-file">{{ providerForm.get('file').value }}</span>
+                            <span *ngIf="!providerForm.get('file').value" class="custom-file-control" translate="action.choose-file">Choose File</span>
+                            <span *ngIf="providerForm.get('file').value" class="custom-file-control" translate="action.choose-file">{{ providerForm.get('file').value }}</span>
                         </label>
                     </div>
                 </div>
                 <div class="text-center">
                     &mdash;
-                    <ng-container i18n="@@label--or">OR</ng-container>
+                    <translate key="label.or">OR</translate>
                     &mdash;
                 </div>
                 <div class="form-group">
-                    <label i18n="@@label--service-resolver-metadata-url" for="url">Service Resolver Metadata URL</label>
+                    <label translate="label.service-resolver-metadata-url" for="url">Service Resolver Metadata URL</label>
                     <input id="url" type="text" class="form-control" placeholder="" formControlName="url" />
                 </div>
                 <div class="alert alert-danger" role="alert">
-                    <span i18n="@@alert--file-upload-alert">Note: You can only import a file with a single entityID (EntityDescriptor element) in it. Anything more in that file will result in an error.</span>
+                    <span translate="alert.file-upload-alert">Note: You can only import a file with a single entityID (EntityDescriptor element) in it. Anything more in that file will result in an error.</span>
                 </div>
             </fieldset>
         </form>
diff --git a/ui/src/app/metadata/resolver/container/wizard.component.html b/ui/src/app/metadata/resolver/container/wizard.component.html
index 5987c1837..1776a1db2 100644
--- a/ui/src/app/metadata/resolver/container/wizard.component.html
+++ b/ui/src/app/metadata/resolver/container/wizard.component.html
@@ -5,10 +5,10 @@
                 <div class="col-md-12">
                     <span class="display-6" role="heading" aria-level="1">
                         <i class="fa fa-fw fa-plus-square"></i>
-                        <ng-container i18n="@@message--add-new-md-resolver">Add a new metadata source</ng-container>
+                        <translate key="message.add-new-md-resolver">Add a new metadata source</translate>
                         &ndash; {{ (currentPage$ | async).label }} ({{ (resolver$ | async).serviceProviderName }})
                         <span class="pull-right">
-                            (<ng-container i18n="@@message--wizard-status">Step {{ wizardIndex$ | async }} of {{ wizard.length + 1 }}</ng-container>)
+                            (<translate key="message.wizard-status">Step {{ wizardIndex$ | async }} of {{ wizard.length + 1 }}</translate>)
                         </span>
                     </span>
                 </div>
diff --git a/ui/src/app/metadata/resolver/resolver.module.ts b/ui/src/app/metadata/resolver/resolver.module.ts
index fcdd94c49..f086c6f44 100644
--- a/ui/src/app/metadata/resolver/resolver.module.ts
+++ b/ui/src/app/metadata/resolver/resolver.module.ts
@@ -30,6 +30,7 @@ import { DraftCollectionEffects } from './effect/draft-collection.effects';
 import { WizardEffects } from './effect/wizard.effect';
 import { EditorEffects } from './effect/editor.effect';
 import { UnsavedDialogComponent } from './component/unsaved-dialog.component';
+import { I18nModule } from '../../i18n/i18n.module';
 
 @NgModule({
     declarations: [
@@ -57,7 +58,8 @@ import { UnsavedDialogComponent } from './component/unsaved-dialog.component';
         ReactiveFormsModule,
         FormsModule,
         ProviderEditorFormModule,
-        NgbDropdownModule
+        NgbDropdownModule,
+        I18nModule
     ],
     exports: [
         ProviderEditorFormModule,
diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
index f36f2ed92..f822041d0 100644
--- a/ui/src/app/schema-form/widget/array/array.component.html
+++ b/ui/src/app/schema-form/widget/array/array.component.html
@@ -11,7 +11,7 @@
         &nbsp;
         <span class="text-right" *ngIf="schema.description">
             <ng-template #tooltip>{{ schema.description }}</ng-template>
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip" i18n-aria-label="@@tooltip--instruction"
+            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip" i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </div>
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
index 3d6070d92..44e4a65a6 100644
--- a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
+++ b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -2,10 +2,10 @@
     <label class="d-flex justify-content-start control-label">
         <span>{{ schema.title }}</span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip--instruction"
+                i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
index db1385630..7d5b191df 100644
--- a/ui/src/app/schema-form/widget/check/checkbox.component.html
+++ b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -16,7 +16,7 @@
             </div>
             <div>
                 <ng-template #tooltip>{{ schema.description }}</ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip" i18n-aria-label="@@tooltip--instruction"
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </div>
         </div>
diff --git a/ui/src/app/schema-form/widget/check/checklist.component.html b/ui/src/app/schema-form/widget/check/checklist.component.html
index ec85c8459..1eae97a68 100644
--- a/ui/src/app/schema-form/widget/check/checklist.component.html
+++ b/ui/src/app/schema-form/widget/check/checklist.component.html
@@ -3,8 +3,8 @@
     <table class="table table-striped table-sm">
         <thead>
             <tr class="table-secondary">
-                <th i18n="@@label--attribute-name">Attribute Name</th>
-                <th i18n="@@label--yes">Yes</th>
+                <th translate="label.attribute-name">Attribute Name</th>
+                <th translate="label.yes">Yes</th>
             </tr>
         </thead>
         <tbody>
@@ -31,20 +31,20 @@
                 </td>
             </tr>
             <tr>
-                <td scope="col" i18n="@@label--check-all-attributes">Check All Attributes</td>
+                <td scope="col" translate="label.check-all-attributes">Check All Attributes</td>
                 <td scope="col">
                     <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()">
                         <i class="fa fa-fw fa-check"></i>
-                        <span class="sr-only" i18n="@@label--check-all-attributes">Check All Attributes</span>
+                        <span class="sr-only" translate="label.check-all-attributes">Check All Attributes</span>
                     </button>
                 </td>
             </tr>
             <tr>
-                <td scope="col" i18n="@@label--clear-all-attributes">Clear All Attributes</td>
+                <td scope="col" translate="label.clear-all-attributes">Clear All Attributes</td>
                 <td scope="col">
                     <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()">
                         <i class="fa fa-fw fa-times"></i>
-                        <span class="sr-only" i18n="@@label--clear-all-attributes">Clear All Attributes</span>
+                        <span class="sr-only" translate="label.clear-all-attributes">Clear All Attributes</span>
                     </button>
                 </td>
             </tr>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
index e66040336..ce70beafe 100644
--- a/ui/src/app/schema-form/widget/datalist/datalist.component.html
+++ b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -5,10 +5,10 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip--instruction"
+                i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
index 37bc19ca4..556f0c1fc 100644
--- a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
+++ b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -5,10 +5,10 @@
                 <label [attr.for]="id" class="d-flex justify-content-start control-label">
                     <span>Search By <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
                     <span>
-                        <ng-template #tooltipBy i18n="@@tooltip--description">Search By</ng-template>
+                        <ng-template #tooltipBy translate="tooltip.description">Search By</ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipBy"
-                            i18n-aria-label="@@tooltip--instruction"
+                            i18n-aria-label="@@tooltip.instruction"
                             aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </label>
@@ -41,12 +41,12 @@
                             *ngIf="entityAttributesFilterTargetType !== 'ENTITY'"></i>
                     </span>
                     <span>
-                        <ng-template #tooltipCriteria i18n="@@tooltip--description">
+                        <ng-template #tooltipCriteria translate="tooltip.description">
                             Search Criteria by {{ this.displayType }}
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipCriteria"
-                            i18n-aria-label="@@tooltip--instruction"
+                            i18n-aria-label="@@tooltip.instruction"
                             aria-label="Information icon - press spacebar to read additional information for this form field"></i>
                     </span>
                 </label>
diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
index d44edff92..81fe39eff 100644
--- a/ui/src/app/schema-form/widget/number/number.component.html
+++ b/ui/src/app/schema-form/widget/number/number.component.html
@@ -2,10 +2,10 @@
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
         <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip--instruction"
+                i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
index 0a3913d4e..fef8c30e5 100644
--- a/ui/src/app/schema-form/widget/select/select.component.html
+++ b/ui/src/app/schema-form/widget/select/select.component.html
@@ -5,10 +5,10 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip--instruction"
+                i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
index 1e948381d..e1b4da88d 100644
--- a/ui/src/app/schema-form/widget/string/string.component.html
+++ b/ui/src/app/schema-form/widget/string/string.component.html
@@ -2,10 +2,10 @@
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
         <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip--instruction"
+                i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
index 429a3fcde..12f023606 100644
--- a/ui/src/app/schema-form/widget/textarea/textarea.component.html
+++ b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -5,10 +5,10 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip--instruction"
+                i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
diff --git a/ui/src/app/shared/component/i18n-text.component.html b/ui/src/app/shared/component/i18n-text.component.html
index 7484dd61a..c85955b4d 100644
--- a/ui/src/app/shared/component/i18n-text.component.html
+++ b/ui/src/app/shared/component/i18n-text.component.html
@@ -1,70 +1,69 @@
 <ng-container [ngSwitch]="key">
-    <!-- page name -->
     <ng-container *ngSwitchDefault>{{ key }}</ng-container>
-    <ng-container *ngSwitchCase="'metadata-ui'" i18n="@@label--ui-mdui-info">User Interface / MDUI Information</ng-container>
-    <ng-container *ngSwitchCase="'descriptor-info'" i18n="@@label--sp-sso-descriptor-info">SP SSO Descriptor Information</ng-container>
-    <ng-container *ngSwitchCase="'logout-endpoints'" i18n="@@label--logout-endpoints">Logout Endpoints</ng-container>
-    <ng-container *ngSwitchCase="'key-info'" i18n="@@label--security-info">Security Information</ng-container>
-    <ng-container *ngSwitchCase="'assertion'" i18n="@@label--assertion-consumer-services">Assertion Consumer Service</ng-container>
-    <ng-container *ngSwitchCase="'relying-party'" i18n="@@label--relying-party-overrides">Relying Party Overrides</ng-container>
-    <ng-container *ngSwitchCase="'attribute'" i18n="@@label--attribute-release">Attribute Release</ng-container>
-    <ng-container *ngSwitchCase="'sp-org-info'" i18n="@@label--sp-org-info">SP/Organization Information</ng-container>
-    <ng-container *ngSwitchCase="'org-info'" i18n="@@label--org-info">Organization Information</ng-container>
-    <ng-container *ngSwitchCase="'finish'" i18n="@@label--finished">Finished!</ng-container>
-    <!-- certificate types -->
-    <ng-container *ngSwitchCase="'signing'" i18n="@@label--signing">Signing</ng-container>
-    <ng-container *ngSwitchCase="'encryption'" i18n="@@label--encryption">Encryption</ng-container>
-    <ng-container *ngSwitchCase="'both'" i18n="@@label--both">Both</ng-container>
-    <!-- copy attribute sections-->
-    <ng-container *ngSwitchCase="'spSsoDescriptorInfo'" i18n="@@label--sp-sso-descriptor-info">SP SSO Descriptor Information</ng-container>
-    <ng-container *ngSwitchCase="'organizationInfo'" i18n="@@label--sp-sso-descriptor-info">Organization Information</ng-container>
-    <ng-container *ngSwitchCase="'uiMduiInfo'" i18n="@@label--ui-mdui-info">User Interface / MDUI Information</ng-container>
-    <ng-container *ngSwitchCase="'securityDescriptorInfo'" i18n="@@label--security-descriptor-info">Security Descriptor Information</ng-container>
-    <!-- entity attributes -->
-    <ng-container *ngSwitchCase="'entityId'" i18n="@@label--entity-id">Entity ID</ng-container>
-    <ng-container *ngSwitchCase="'serviceProviderName'" i18n="@@label--service-provider-name">Service Provider Name</ng-container>
-    <ng-container *ngSwitchCase="'organization'" i18n="@@label--organization">Organization</ng-container>
-    <ng-container *ngSwitchCase="'contacts'" i18n="@@label--contacts">Contacts</ng-container>
-    <ng-container *ngSwitchCase="'mdui'" i18n="@@label--mdui">MDUI Information</ng-container>
-    <ng-container *ngSwitchCase="'securityInfo'" i18n="@@label--security-info">Security Information</ng-container>
-    <ng-container *ngSwitchCase="'assertionConsumerServices'" i18n="@@label--assertion-consumer-services">Assertion Consumer Services</ng-container>
-    <ng-container *ngSwitchCase="'serviceProviderSsoDescriptor'" i18n="@@label--service-provider-sso-descriptor">Service Provider Sso Descriptor</ng-container>
-    <ng-container *ngSwitchCase="'logoutEndpoints'" i18n="@@label--logout-endpoints">Logout Endpoints</ng-container>
-    <ng-container *ngSwitchCase="'serviceEnabled'" i18n="@@label--service-enabled">Service Enabled</ng-container>
-    <ng-container *ngSwitchCase="'relyingPartyOverrides'" i18n="@@label--relying-party-overrides">Relying Party Overrides</ng-container>
-    <ng-container *ngSwitchCase="'attributeRelease'" i18n="@@label--attribute-release">Attribute Release</ng-container>
-    <ng-container *ngSwitchCase="'filterName'" i18n="@@label--filter-name">Filter Name</ng-container>
-    <ng-container *ngSwitchCase="'filterEnabled'" i18n="@@label--filter-enabled">Filter Enabled</ng-container>
-    <ng-container *ngSwitchCase="'filterTarget'" i18n="@@label--filter-target">FilterTarget</ng-container>
-    <ng-container *ngSwitchCase="'name'" i18n="@@label--name">Name</ng-container>
-    <ng-container *ngSwitchCase="'type'" i18n="@@label--type">Type</ng-container>
-    <ng-container *ngSwitchCase="'value'" i18n="@@label--value">Value</ng-container>
-    <ng-container *ngSwitchCase="'emailAddress'" i18n="@@label--email-address">Email Address</ng-container>
-    <ng-container *ngSwitchCase="'url'" i18n="@@label--url">URL</ng-container>
-    <ng-container *ngSwitchCase="'bindingType'" i18n="@@label--binding-type">Binding Type</ng-container>
-    <ng-container *ngSwitchCase="'displayName'" i18n="@@label--display-name">Display Name</ng-container>
-    <ng-container *ngSwitchCase="'informationUrl'" i18n="@@label--information-url">Information URL</ng-container>
-    <ng-container *ngSwitchCase="'privacyStatementUrl'" i18n="@@label--privacy-statement-url">Privacy Statement URL</ng-container>
-    <ng-container *ngSwitchCase="'logoUrl'" i18n="@@label--logo-url">Logo URL</ng-container>
-    <ng-container *ngSwitchCase="'logoHeight'" i18n="@@label--logo-height">Logo Height</ng-container>
-    <ng-container *ngSwitchCase="'logoWidth'" i18n="@@label--logo-width">Logo Width</ng-container>
-    <ng-container *ngSwitchCase="'description'" i18n="@@label--description">Description</ng-container>
-    <ng-container *ngSwitchCase="'signAssertion'" i18n="@@label--sign-assertion">Sign Assertions</ng-container>
-    <ng-container *ngSwitchCase="'dontSignResponse'" i18n="@@label--dont-sign-response">Don't Sign Response</ng-container>
-    <ng-container *ngSwitchCase="'turnOffEncryption'" i18n="@@label--turn-off-encryption">Turn off encryption</ng-container>
-    <ng-container *ngSwitchCase="'useSha'" i18n="@@label--use-sha">Use Sha</ng-container>
-    <ng-container *ngSwitchCase="'ignoreAuthenticationMethod'" i18n="@@label--ignore-authentication-method">Ignore Authentication Method</ng-container>
-    <ng-container *ngSwitchCase="'omitNotBefore'" i18n="@@label--omit-not-before">Omit Not Before</ng-container>
-    <ng-container *ngSwitchCase="'responderId'" i18n="@@label--responder-id">Responder ID</ng-container>
-    <ng-container *ngSwitchCase="'nameIdFormats'" i18n="@@label--name-id-formats">Name ID Formats</ng-container>
-    <ng-container *ngSwitchCase="'authenticationMethods'" i18n="@@label--authentication-methods">Authentication Methods</ng-container>
-    <ng-container *ngSwitchCase="'x509CertificateAvailable'" i18n="@@label--x509-certificate-available">x509 Certificate Available</ng-container>
-    <ng-container *ngSwitchCase="'authenticationRequestsSigned'" i18n="@@label--authentication-requests-signed">Authentication Requests Signed</ng-container>
-    <ng-container *ngSwitchCase="'wantAssertionsSigned'" i18n="@@label--want-assertions-signed">Want Assertions Signed</ng-container>
-    <ng-container *ngSwitchCase="'x509Certificates'" i18n="@@label--x509-certificates">x509 Certificates</ng-container>
-    <ng-container *ngSwitchCase="'protocolSupportEnum'" i18n="@@label--protocol-support-enum">Protocol Support Enumeration</ng-container>
-    <ng-container *ngSwitchCase="'nameIdFormats'" i18n="@@label--name-id-formats">Name ID Formats</ng-container>
-    <ng-container *ngSwitchCase="'binding'" i18n="@@label--binding">Binding</ng-container>
-    <ng-container *ngSwitchCase="'locationUrl'" i18n="@@label--location-url">Location URL</ng-container>
-    <ng-container *ngSwitchCase="'makeDefault'" i18n="@@label--make-default">Make Default</ng-container>
+    <ng-container *ngSwitchCase="'metadata-ui'" translate="label.ui-mdui-info">User Interface / MDUI Information</ng-container>
+    <ng-container *ngSwitchCase="'descriptor-info'" translate="label.sp-sso-descriptor-info">SP SSO Descriptor Information</ng-container>
+    <ng-container *ngSwitchCase="'logout-endpoints'" translate="label.logout-endpoints">Logout Endpoints</ng-container>
+    <ng-container *ngSwitchCase="'key-info'" translate="label.security-info">Security Information</ng-container>
+    <ng-container *ngSwitchCase="'assertion'" translate="label.assertion-consumer-services">Assertion Consumer Service</ng-container>
+    <ng-container *ngSwitchCase="'relying-party'" translate="label.relying-party-overrides">Relying Party Overrides</ng-container>
+    <ng-container *ngSwitchCase="'attribute'" translate="label.attribute-release">Attribute Release</ng-container>
+    <ng-container *ngSwitchCase="'sp-org-info'" translate="label.sp-org-info">SP/Organization Information</ng-container>
+    <ng-container *ngSwitchCase="'org-info'" translate="label.org-info">Organization Information</ng-container>
+    <ng-container *ngSwitchCase="'finish'" translate="label.finished">Finished!</ng-container>
+    
+    <ng-container *ngSwitchCase="'signing'" translate="label.signing">Signing</ng-container>
+    <ng-container *ngSwitchCase="'encryption'" translate="label.encryption">Encryption</ng-container>
+    <ng-container *ngSwitchCase="'both'" translate="label.both">Both</ng-container>
+    
+    <ng-container *ngSwitchCase="'spSsoDescriptorInfo'" translate="label.sp-sso-descriptor-info">SP SSO Descriptor Information</ng-container>
+    <ng-container *ngSwitchCase="'organizationInfo'" translate="label.sp-sso-descriptor-info">Organization Information</ng-container>
+    <ng-container *ngSwitchCase="'uiMduiInfo'" translate="label.ui-mdui-info">User Interface / MDUI Information</ng-container>
+    <ng-container *ngSwitchCase="'securityDescriptorInfo'" translate="label.security-descriptor-info">Security Descriptor Information</ng-container>
+    
+    <ng-container *ngSwitchCase="'entityId'" translate="label.entity-id">Entity ID</ng-container>
+    <ng-container *ngSwitchCase="'serviceProviderName'" translate="label.service-provider-name">Service Provider Name</ng-container>
+    <ng-container *ngSwitchCase="'organization'" translate="label.organization">Organization</ng-container>
+    <ng-container *ngSwitchCase="'contacts'" translate="label.contacts">Contacts</ng-container>
+    <ng-container *ngSwitchCase="'mdui'" translate="label.mdui">MDUI Information</ng-container>
+    <ng-container *ngSwitchCase="'securityInfo'" translate="label.security-info">Security Information</ng-container>
+    <ng-container *ngSwitchCase="'assertionConsumerServices'" translate="label.assertion-consumer-services">Assertion Consumer Services</ng-container>
+    <ng-container *ngSwitchCase="'serviceProviderSsoDescriptor'" translate="label.service-provider-sso-descriptor">Service Provider Sso Descriptor</ng-container>
+    <ng-container *ngSwitchCase="'logoutEndpoints'" translate="label.logout-endpoints">Logout Endpoints</ng-container>
+    <ng-container *ngSwitchCase="'serviceEnabled'" translate="label.service-enabled">Service Enabled</ng-container>
+    <ng-container *ngSwitchCase="'relyingPartyOverrides'" translate="label.relying-party-overrides">Relying Party Overrides</ng-container>
+    <ng-container *ngSwitchCase="'attributeRelease'" translate="label.attribute-release">Attribute Release</ng-container>
+    <ng-container *ngSwitchCase="'filterName'" translate="label.filter-name">Filter Name</ng-container>
+    <ng-container *ngSwitchCase="'filterEnabled'" translate="label.filter-enabled">Filter Enabled</ng-container>
+    <ng-container *ngSwitchCase="'filterTarget'" translate="label.filter-target">FilterTarget</ng-container>
+    <ng-container *ngSwitchCase="'name'" translate="label.name">Name</ng-container>
+    <ng-container *ngSwitchCase="'type'" translate="label.type">Type</ng-container>
+    <ng-container *ngSwitchCase="'value'" translate="label.value">Value</ng-container>
+    <ng-container *ngSwitchCase="'emailAddress'" translate="label.email-address">Email Address</ng-container>
+    <ng-container *ngSwitchCase="'url'" translate="label.url">URL</ng-container>
+    <ng-container *ngSwitchCase="'bindingType'" translate="label.binding-type">Binding Type</ng-container>
+    <ng-container *ngSwitchCase="'displayName'" translate="label.display-name">Display Name</ng-container>
+    <ng-container *ngSwitchCase="'informationUrl'" translate="label.information-url">Information URL</ng-container>
+    <ng-container *ngSwitchCase="'privacyStatementUrl'" translate="label.privacy-statement-url">Privacy Statement URL</ng-container>
+    <ng-container *ngSwitchCase="'logoUrl'" translate="label.logo-url">Logo URL</ng-container>
+    <ng-container *ngSwitchCase="'logoHeight'" translate="label.logo-height">Logo Height</ng-container>
+    <ng-container *ngSwitchCase="'logoWidth'" translate="label.logo-width">Logo Width</ng-container>
+    <ng-container *ngSwitchCase="'description'" translate="label.description">Description</ng-container>
+    <ng-container *ngSwitchCase="'signAssertion'" translate="label.sign-assertion">Sign Assertions</ng-container>
+    <ng-container *ngSwitchCase="'dontSignResponse'" translate="label.dont-sign-response">Don't Sign Response</ng-container>
+    <ng-container *ngSwitchCase="'turnOffEncryption'" translate="label.turn-off-encryption">Turn off encryption</ng-container>
+    <ng-container *ngSwitchCase="'useSha'" translate="label.use-sha">Use Sha</ng-container>
+    <ng-container *ngSwitchCase="'ignoreAuthenticationMethod'" translate="label.ignore-authentication-method">Ignore Authentication Method</ng-container>
+    <ng-container *ngSwitchCase="'omitNotBefore'" translate="label.omit-not-before">Omit Not Before</ng-container>
+    <ng-container *ngSwitchCase="'responderId'" translate="label.responder-id">Responder ID</ng-container>
+    <ng-container *ngSwitchCase="'nameIdFormats'" translate="label.name-id-formats">Name ID Formats</ng-container>
+    <ng-container *ngSwitchCase="'authenticationMethods'" translate="label.authentication-methods">Authentication Methods</ng-container>
+    <ng-container *ngSwitchCase="'x509CertificateAvailable'" translate="label.x509-certificate-available">x509 Certificate Available</ng-container>
+    <ng-container *ngSwitchCase="'authenticationRequestsSigned'" translate="label.authentication-requests-signed">Authentication Requests Signed</ng-container>
+    <ng-container *ngSwitchCase="'wantAssertionsSigned'" translate="label.want-assertions-signed">Want Assertions Signed</ng-container>
+    <ng-container *ngSwitchCase="'x509Certificates'" translate="label.x509-certificates">x509 Certificates</ng-container>
+    <ng-container *ngSwitchCase="'protocolSupportEnum'" translate="label.protocol-support-enum">Protocol Support Enumeration</ng-container>
+    <ng-container *ngSwitchCase="'nameIdFormats'" translate="label.name-id-formats">Name ID Formats</ng-container>
+    <ng-container *ngSwitchCase="'binding'" translate="label.binding">Binding</ng-container>
+    <ng-container *ngSwitchCase="'locationUrl'" translate="label.location-url">Location URL</ng-container>
+    <ng-container *ngSwitchCase="'makeDefault'" translate="label.make-default">Make Default</ng-container>
 </ng-container>
diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html
index e90e9d6f8..9921f2ade 100644
--- a/ui/src/app/wizard/component/wizard.component.html
+++ b/ui/src/app/wizard/component/wizard.component.html
@@ -5,7 +5,7 @@
                 [attr.aria-label]="previousPage.path" role="button">
                 <span class="direction pull-left">
                     <i class="fa fa-fw fa-arrow-circle-left d-block fa-2x"></i>
-                    <ng-container i18n="@@action--back">Back</ng-container>
+                    <translate key="action.back">Back</ng-container>
                 </span>
                 <span class="label pull-right">
                     <ng-container *ngIf="(previous$ | async).index">{{ (previous$ | async).index }}. </ng-container>
@@ -25,7 +25,6 @@ <h3 class="tag tag-primary">
                     <ng-container *ngSwitchDefault>{{ (current$ | async).index }}. {{ (current$ | async).label }}</ng-container>
                     <ng-container *ngSwitchCase="icons.CHECK">{{ (current$ | async).label }}</ng-container>
                 </ng-container>
-                <!-- {{ (current$ | async).index }}. {{ (current$ | async).label }} -->
             </h3>
         </li>
         <li class="nav-item" *ngIf="(next$ | async)">
@@ -37,7 +36,7 @@ <h3 class="tag tag-primary">
                 </span>
                 <span class="direction pull-right">
                     <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                    <ng-container i18n="@@action--next">Next</ng-container>
+                    <translate key="action.next">Next</ng-container>
                 </span>
             </button>
         </li>
@@ -47,7 +46,7 @@ <h3 class="tag tag-primary">
                 role="button"
                 [disabled]="disabled$ | async"
                 (click)="onSave.emit()">
-                <span class="label pull-left" i18n="@@action--save">
+                <span class="label pull-left" translate="action.save">
                     Save
                 </span>
                 <span class="direction pull-right">
@@ -57,7 +56,7 @@ <h3 class="tag tag-primary">
                             'fa-spinner': (disabled$ | async),
                             'fa-pulse': (disabled$ | async)
                         }"></i>
-                    <ng-container i18n="@@action--save">Save</ng-container>
+                    <translate key="action.save">Save</ng-container>
                 </span>
             </button>
         </li>