diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
index 0cabb3ccd..1b3db4963 100644
--- a/backend/src/main/resources/i18n/messages_en.properties
+++ b/backend/src/main/resources/i18n/messages_en.properties
@@ -1,29 +1,282 @@
-action.dashboard=Dashboard (en)
-action.logout=Logout
-action.add-new=Add New
-action.clear=Clear
+action.dashboard=(en)Dashboard
+action.logout=(en)Logout
+action.add-new=(en)Add New
+action.add-new-provider=(en)Add a new metadata provider
+action.add-new-source=(en)Add a new metadata source
+action.clear=(en)Clear
+action.delete=(en)Delete
+action.remove=(en)Remove
+action.save=(en)Save
+action.toggle=(en)Toggle { label }
+action.add-contacts=(en)Add Contact
+action.use-mine=(en)Use My Changes
+action.use-theirs=(en)Use Their Changes
+action.discard-changes=(en)Discard Changes
+action.add-endpoint=(en)Add Endpoint
+action.add-nameid-format=(en)Add NameID Format
+action.add-certificate=(en)Add Certificate
+action.add-entity-id=(en)Add Entity ID
+action.download-file=(en)Download File
+action.cancel=(en)Cancel
+action.search=(en)Search
+action.select-id=(en)Select ID
+action.finish-later=(en)Finish Later
+action.back=(en)Back
+action.next=(en)Next
+action.create=(en)Create
+action.copy=(en)Copy
+action.choose-file=(en)Choose File
+action.search-by=(en)Search By
 
-action.use-mine=Use My Changes
-action.use-theirs=Use Their Changes
+value.enabled=(en)Enabled
+value.disabled=(en)Disabled
 
-heading.shibboleth=Shibboleth { foo }
+brand.header.title=(en)Source Management
+brand.logo-link-label=(en)Shibboleth
+brand.logo-link-description=(en)Link to Shibboleth Website
+brand.logo-alt=(en)Shibboleth Logo - Click to be directed to www.shibboleth.net
+brand.footer.text=(en)Links to Shibboleth resources:
+brand.footer.links-label-1=(en)Home Page
+brand.footer.links-desc-1=(en)Shibboleth.net open-source community home page
+brand.footer.links-label-2=(en)Wiki
+brand.footer.links-desc-2=(en)Shibboleth.net open-source community wiki
+brand.footer.links-label-3=(en)Issue Tracker
+brand.footer.links-desc-3=(en)Shibboleth.net open-source community issue tracker
+brand.footer.links-label-4=(en)Mailing List
+brand.footer.links-desc-4=(en)Shibboleth.net open-source community mailing list
+brand.footer.copyright=Copyright © Internet2
 
-label.metadata-source=Metadata Source
-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
+heading.shibboleth=(en)Shibboleth
 
-label.service-provider-entity-id=Service Provider Entity ID
+label.metadata-source=(en)Metadata Source
+label.metadata-sources=(en)Metadata Sources
+label.metadata-provider=(en)Metadata Provider
+label.metadata-providers=(en)Metadata Providers
+label.source-management=(en)Source Management
+label.search-files=(en)Search Files
+label.service-provider-entity-id=(en)Service Provider Entity ID
+label.service-provider-name-dashboard-display-only=(en)Service Provider Name (Dashboard Display Only)
+label.enable-this-service=(en)Enable this service?
+label.organization-name=(en)Organization Name
+label.organization-display-name=(en)Organization Display Name
+label.organization-url=(en)Organization URL
+label.contact-information=(en)Contact Information:
+label.name=(en)Name
+label.type=(en)Type
+label.email-address=(en)Email Address
+label.assertion-consumer-service-endpoints=(en)Assertion Consumer Service Endpoints
+label.my-changes=(en)My Changes
+label.their-changes=(en)Their Changes
+label.new-endpoint=(en)New Endpoint
+label.default=(en)(default)
+label.assertion-consumer-services-location=(en)Assertion Consumer Service Location
+label.assertion-consumer-service-location-binding=(en)Assertion Consumer Service Location Binding
+label.select-binding=(en)Select Binding Type
+label.mark-as-default=(en)Mark as Default
+label.attribute-name=(en)Attribute Name
+label.yes=(en)Yes
+label.check-all-attributes=(en)Check All Attributes
+label.clear-all-attributes=(en)Clear All Attributes
+label.protocol-support-enumeration=(en)Protocol Support Enumeration
+label.select-protocol=(en)Select Protocol
+label.nameid-format=(en)NameID Format
+label.enable-this-service-opon-saving=(en)Enable this service upon saving?
+label.name-and-entity-id=(en)Name and Entity ID
+label.organization-information=(en)Organization Information
+label.contact-information=(en)Contact Information
+label.given-name=(en)Given Name
+label.contact-type=(en)Contact Type
+label.user-interface-mdui-infromation=(en)User Interface / MDUI Information
+label.display-name=(en)Display Name
+label.information-url=(en)Information URL
+label.description=(en)Description
+label.privacy-statement=(en)Privacy Statement URL
+label.logo-url=(en)Logo URL
+label.logo-width=(en)Logo Width
+label.logo-height=(en)Logo Height
+label.sp-sso-descriptor-information=(en)SP SSO Descriptor Information
+label.logout-endpoints=(en)Logout Endpoints
+label.binding-types=(en)Binding Type
+label.security-information=(en)Security Information
+label.is-there-a-x509-certificate=(en)Is there a X509 Certificate?
+label.authentication-requests-signed=(en)Authentication Requests Signed?
+label.want-assertions-signed=(en)Want Assertions Signed?
+label.x509-certificates=(en)X509 Certificates
+label.certificate-name-display-only=(en)Certificate Name (Display Only)
+label.certificate=(en)Certificate
+label.assertion-consumer-services=(en)Assertion Consumer Services
+label.assertion-consumer-service-locations=(en)Assertion Consumer Service Location
+label.assertion-consumer-service-location-binding=(en)Assertion Consumer Service Binding
+label.relying-party-overrides=(en)Relying Party Overrides
+label.sign-the-assertion=(en)Sign the Assertion?
+label.turn-off-encryption-of-response=(en)Turn off Encryption of Response?
+label.use-sha1-signing-algorithm=(en)Use SHA1 Signing Algorithm?
+label.ignore-any-sp-requested-authentication-method=(en)Ignore any SP-Requested Authentication Method?
+label.omit-not-before-condition=(en)Omit Not Before Condition?
+label.responderid=(en)ResponderID
+label.attribute-release=(en)Attribute Release
+label.true=(en)True
+label.false=(en)False
+label.no=(en)No
+label.new-cert=(en)New Certificate
+label.url=(en)URL
+label.privacy-statement-url=(en)Privacy Statement URL
+label.contact-name=(en)Contact Name
+label.select-contact-type=(en)Select Contact Type
+label.contact-email-address=(en)Contact Email Address
+label.sign-the-assertion=(en)Sign the Assertion
+label.dont-sign-the-response=(en)Don''t Sign the Response
+label.turn-off-encryption-of-response=(en)Turn Off Encryption of Response
+label.use-sha1-signing-algorithm=(en)Use SHA1 Signing Algorithm
+label.nameid-format-to-send=(en)NameID Format to Send
+label.authentication-methods-to-use=(en)Authentication Methods to Use
+label.auth-method-indexed=(en)Authentication Method
+label.ignore-any-sp-requested-authentication-method=(en)Ignore any SP-Requested Authentication Method
+label.omit-not-before-condition=(en)Omit Not Before Condition
+label.responder-id=(en)ResponderID
+label.preview-provider=(en)Preview XML
+label.search-entity-id=(en)Search Entity Id
+label.new-filter=(en)Edit EntityAttributesFilter
+label.min-4-chars=(en)Minimum 4 characters.
+label.new-filter=(en)New Filter - EntityAttributes
+label.service-provider=(en)Metadata Source Name:
+label.created-date=(en)Created Date:
+label.service-entity-id=(en)Metadata Source Entity ID:
+label.service-provider-status=(en)Metadata Source Status:
+label.current-metadata-sources=(en)Current Metadata Sources
+label.current-metadata-providers=(en)Current Metadata Providers
+label.add-a-new-metadata-provider=(en)Add a new metadata provider
+label.name-and-entityid=(en)Name and EntityId
+label.org-info=(en)Organization Information
+label.service-resolver-name-dashboard-display-only=(en)Service Resolver Name (Dashboard Display Only)
+label.service-resolver-entity-id=(en)Service Resolver Entity ID
+label.add-a-new-metadata-source=(en)Add a new metadata source - Finish Summary
+label.name-and-entityid=(en)Name and Entity ID.
+label.finish-summary-validation=(en)Finished!
+label.select-entity-id-to-copy=(en)Select the Entity ID to copy
+label.metadata-source-name-dashboard-display-only=(en)Metadata Source Name (Dashboard Display Only)
+label.service-resolver-entity-id=(en)New Entity ID
+label.sections-to-copy=(en)Sections to Copy?
+label.add-a-new-metadata-resolver=(en)Add a new metadata source
+label.how-are-you-adding-the-metadata-information=(en)How are you adding the metadata information?
+label.upload-url=(en)Upload/URL
+label.or=(en)or
+label.name-and-upload-url=(en)Name and Upload Url
+label.service-resolver-file=(en)Select Resolver Metadata File
+label.service-resolver-metadata-url=(en)Service Resolver Metadata URL
+label.search-criteria-by=(en)Search Criteria by { displayType }
+label.entity-ids-added=(en)Entity Ids Added
+label.ui-mdui-info=(en)User Interface / MDUI Information
+label.sp-sso-descriptor-info=(en)SP SSO Descriptor Information
+label.security-info=(en)Security Information
+label.assertion-consumer-services=(en)Assertion Consumer Service
+label.sp-org-info=(en)SP/Organization Information
+label.finished=(en)Finished!
+label.signing=(en)Signing
+label.encryption=(en)Encryption
+label.both=(en)Both
+label.sp-sso-descriptor-info=(en)Organization Information
+label.security-descriptor-info=(en)Security Descriptor Information
+label.entity-id=(en)Entity ID
+label.service-provider-name=(en)Service Provider Name
+label.organization=(en)Organization
+label.contacts=(en)Contacts
+label.mdui=(en)MDUI Information
+label.service-provider-sso-descriptor=(en)Service Provider Sso Descriptor
+label.service-enabled=(en)Service Enabled
+label.filter-name=(en)Filter Name
+label.filter-enabled=(en)Filter Enabled
+label.filter-target=(en)FilterTarget
+label.value=(en)Value
+label.binding-type=(en)Binding Type
+label.sign-assertion=(en)Sign Assertions
+label.dont-sign-response=(en)Don''t Sign Response
+label.turn-off-encryption=(en)Turn off encryption
+label.use-sha=(en)Use Sha
+label.ignore-authentication-method=(en)Ignore Authentication Method
+label.omit-not-before=(en)Omit Not Before
+label.responder-id=(en)Responder ID
+label.name-id-formats=(en)Name ID Formats
+label.authentication-methods=(en)Authentication Methods
+label.x509-certificate-available=(en)x509 Certificate Available
+label.authentication-requests-signed=(en)Authentication Requests Signed
+label.want-assertions-signed=(en)Want Assertions Signed
+label.x509-certificates=(en)x509 Certificates
+label.protocol-support-enum=(en)Protocol Support Enumeration
+label.binding=(en)Binding
+label.location-url=(en)Location URL
+label.make-default=(en)Make Default
 
-label.my-changes=My Changes
-label.their-changes=Their Changes
+label.metadata-provider-name-dashboard-display-only=(en)Metadata Provider Name (Dashboard Display Only)
 
-label.service-provider-name-dashboard-display-only=Service Provider Name (Dashboard Display Only)
+message.conflict=(en)Conflict
+message.data-version-contention=(en)Data Version Contention
+message.contention-new-version=(en)A newer version of this metadata source has been saved. Below are a list of changes. You can use your changes or their changes.
+message.organization-feedback=(en)These three fields must all be entered if any single field has a value.
+message.valid-email=(en)Must be a valid Email Address
+message.valid-url=(en)Must be a valid URL
+message.must-be-valid-url=(en)Must be a valid URL
+message.must-be-integer=(en)Must be an integer equal to or greater than 0
+message.delete-source-title=(en)Delete Metadata Source?
+message.delete-source-body=(en)You are deleting a metadata source. This cannot be undone. Continue?
+message.incomplete-form=(en)Incomplete Form
+message.delete-filter-title=(en)Delete Metadata Filter?
+message.delete-filter-body=(en)You are deleting a metadata filter. This cannot be undone. Continue?
+message.unsaved-dialog-title=(en)Save your information?
+message.unsaved-editor=(en)You have not saved your changes. If you exit this screen, your changes will be lost.
+message.editor-invalid=(en)All forms must be valid before changes can be saved!
+message.unsaved-source-1=(en)You have not completed the wizard! Do you wish to save this information? You can finish the wizard later by clicking the ''Edit''
+message.unsaved-source-2=(en)icon on the dashboard.
+message.service-resolver-name-required=(en)Service Resolver Name is required
+message.entity-id-required=(en)Entity ID is required
+message.entity-id-must-be-unique=(en)Entity ID must be unique
+message.file-upload-alert=(en)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.
+message.add-new-md-resolver=(en)Add a new metadata source
+message.wizard-status=(en)Step { index } of {{ length }}
+message.entity-id-min-unique=(en)You must add at least one entity id target and they must each be unique.
+message.required-for-scripts=(en)Required for Scripts
+message.required-for-regex=(en)Required for Regex
 
-
-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
+tooltip.service-provider-name-dashboard-display-only=(en)Service Provider Name (Dashboard Display Only) popover
+tooltip.service-provider-entity-id=(en)Service Provider Entity ID popover
+tooltip.organization-name=(en)Organization Name popover
+tooltip.organization-display-name=(en)Organization Display Name popover
+tooltip.organization-url=(en)Organization URL popover
+tooltip.name=(en)Name popover
+tooltip.type=(en)Type popover
+tooltip.email-address=(en)Email Address popover
+tooltip.assertion-consumer-service-location=(en)Assertion Consumer Service Location popover
+tooltip.assertion-consumer-service-location-binding=(en)Assertion Consumer Service Location Binding
+tooltip.mark-as-default=(en)Mark as Default
+tooltip.protocol-support-enumeration=(en)Protocol Support Enumeration popover
+tooltip.nameid-format=(en)Add NameID Format Popover
+tooltip.enable-this-service-upon-saving=(en)Enable this service upon saving popover
+tooltip.authentication-requests-signed=(en)Authentication Requests Signed popover
+tooltip.want-assertions-signed=(en)Want Assertions Signed
+tooltip.certificate-name=(en)Certificate Name Popover
+tooltip.certificate-type=(en)Certificate Type Popover
+tooltip.certificate=(en)Certificate Popover
+tooltip.logout-endpoints-url=(en)Logout Endpoints Url popover
+tooltip.logout-endpoints-binding-type=(en)Logout Endpoints Binding Type popover
+tooltip.mdui-display-name=(en)Typically, the IdP Display Name field will be presented on IdP discovery service interfaces.
+tooltip.mdui-information-url=(en)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.
+tooltip.mdui-description=(en)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.
+tooltip.mdui-privacy-statement-url=(en)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.
+tooltip.mdui-logo-url=(en)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.
+tooltip.mdui-logo-width=(en)The logo should have a minimum width of 100 pixels
+tooltip.mdui-logo-height=(en)The logo should have a minimum height of 75 pixels and a maximum height of 150 pixels (or the application will scale it proportionally)
+tooltip.organization-name=(en)Organization Name Popover
+tooltip.organization-display-name=(en)Organization Display Name Popover
+tooltip.organization-url=(en)Organization Url Popover
+tooltip.contact-name=(en)Contact Name Popover
+tooltip.contact-email=(en)Contact Email Popover
+tooltip.sign-assertion=(en)Sign Assertion popover
+tooltip.dont-sign-response=(en)Don''t Sign Response popover
+tooltip.turn-off-encryption=(en)Turn Off Encryption of Response popover
+tooltip.usa-sha-algorithm=(en)Use SHA1 Signing Algorithm popover
+tooltip.nameid-format=(en)Add NameID Format popover
+tooltip.authentication-methods-to-use=(en)Authentication Methods to Use popover
+tooltip.ignore-auth-method=(en)Ignore any SP-Requested Authentication Method popover
+tooltip.omit-not-before-condition=(en)Omit Not Before Condition popover
+tooltip.responder-id=(en)ResponderId popover
+tooltip.instruction=(en)Information icon - press spacebar to read additional information for this form field
diff --git a/ui/src/app/app.brand.ts b/ui/src/app/app.brand.ts
index a17c34cc0..bc0237204 100644
--- a/ui/src/app/app.brand.ts
+++ b/ui/src/app/app.brand.ts
@@ -3,42 +3,43 @@ import { Brand } from './core/model/brand';
 
 export const brand: Brand = {
     header: {
-        title: 'Source Management'
+        title: 'brand.header.title'
     },
     logo: {
         default: '/assets/shibboleth_logowordmark_color.png',
         small: '/assets/shibboleth_icon_color_130x130.png',
         large: '/assets/shibboleth_logowordmark_color.png',
-        alt: 'Shibboleth Logo - Click to be directed to www.shibboleth.net',
+        alt: 'brand.logo-alt',
         link: {
-            label: 'Shibboleth',
-            url: 'https://www.shibboleth.net/'
+            label: 'brand.logo-link-label', // shibboleth
+            url: 'https://www.shibboleth.net/',
+            description: 'brand.logo.link-description'
         }
     },
     footer: {
         links: [
             {
-                label: 'Home Page',
+                label: 'brand.footer.links-label-1',
                 url: 'https://www.shibboleth.net/',
-                description: 'Shibboleth.net open-source community home page'
+                description: 'brand.footer.links-desc-1'
             },
             {
-                label: 'Wiki',
+                label: 'brand.footer.links-label-2',
                 url: 'https://wiki.shibboleth.net/',
-                description: 'Shibboleth.net open-source community wiki'
+                description: 'brand.footer.links-desc-2'
             },
             {
-                label: 'Issue Tracker',
+                label: 'brand.footer.links-label-3',
                 url: 'https://issues.shibboleth.net/',
-                description: 'Shibboleth.net open-source community issue tracker'
+                description: 'brand.footer.links-desc-3'
             },
             {
-                label: 'Mailing List',
+                label: 'brand.footer.links-label-4',
                 url: 'https://www.shibboleth.net/community/lists/',
-                description: 'Shibboleth.net open-source community mailing list'
+                description: 'brand.footer.links-desc-4'
             }
         ],
-        text: 'Links to Shibboleth resources:'
+        text: 'brand.footer.text'
     },
     ...customBrand
 };
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index c88ee5bee..57c089920 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -1,9 +1,9 @@
 <nav class="navbar navbar-expand-md fixed-top">
-    <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description">
+    <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description | translate">
         <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>
+        <span class="d-lg-inline d-none" [translate]="brand.logo.link.label">{{ brand.logo.link.label }}</span>
     </a>
-    <span class="navbar-text">{{ brand.header.title }}</span>
+    <span class="navbar-text" [translate]="brand.header.title">{{ 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>
@@ -19,39 +19,39 @@
                     aria-expanded="false"
                     ngbDropdownToggle>
                     <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i>
-                    <translate key="action.add-new">Add</translate>
+                    <translate-i18n key="action.add-new">Add New</translate-i18n>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="addNewDropdown">
                     <a class="nav-link"
                         routerLink="/metadata/resolver/new"
                         routerLinkActive="active"
-                        aria-label="Add a new metadata provider"
+                        [attr.aria-label]="'action.add-new-source' | translate"
                         role="button">
                         <i class="fa fa-cube fa-fw" aria-hidden="true"></i>
                         &nbsp;
-                        <translate key="label.metadata-source">Metadata Source</translate>
+                        <translate-i18n key="label.metadata-source">Metadata Source</translate-i18n>
                     </a>
                     <a class="nav-link"
                         routerLink="/metadata/provider/wizard"
                         routerLinkActive="active"
-                        aria-label="Add a new metadata resolver"
+                        [attr.aria-label]="'action.add-new-provider' | translate"
                         role="button">
                         <i class="fa fa-cubes fa-fw" aria-hidden="true"></i>
                         &nbsp;
-                        <translate key="label.metadata-provider">Metadata Provider</translate>
+                        <translate-i18n key="label.metadata-provider">Metadata Provider</translate-i18n>
                     </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>
-                    <translate key="action.dashboard">Dashboard</translate>
+                    <translate-i18n key="action.dashboard">Dashboard</translate-i18n>
                 </a>
             </li>
             <li>
-                <a class="nav-link" href="/logout" target="_self" aria-label="Log out of Shibboleth UI">
+                <a class="nav-link" href="/logout" target="_self" [attr.aria-label]="'action.logout' | translate">
                     <i class="fa fa-sign-out fa-fw" aria-hidden="true"></i>
-                    <translate key="action.logout">Logout</translate>
+                    <translate-i18n key="action.logout">Logout</translate-i18n>
                 </a>
             </li>
         </ul>
@@ -65,10 +65,10 @@
     <div class="row">
         <div class="col-md-8 copyright">
             <ul class="list-inline">
-                <li class="list-inline-item">{{ brand.footer.text }}</li>
-                <li class="list-inline-item" *ngFor="let link of brand.footer.links">
+                <li class="list-inline-item" [translate]="brand.footer.text">{{ brand.footer.text }}</li>
+                <li class="list-inline-item" *ngFor="let link of brand.footer.links; let i = index;">
                     <a [href]="link.url" target="_blank" [attr.aria-label]="link.description" [title]="link.description">
-                        {{ link.label }}
+                        <translate-i18n [key]="link.label">{{ link.label }}</translate-i18n>
                     </a>
                 </li>
             </ul>
@@ -77,7 +77,7 @@
                 {{ formatted$ | async }}
                 &nbsp;|&nbsp;
                 </ng-container>
-                <translate key="label.copyright" [params]="{ year: year }">Copyright &copy; Internet2</translate>
+                <translate-i18n key="label.copyright" [params]="{ year: year }">Copyright &copy; Internet2</translate-i18n>
             </p>
         </div>
         <div class="col-md-4 logo">
diff --git a/ui/src/app/i18n/component/translate.component.spec.ts b/ui/src/app/i18n/component/translate.component.spec.ts
index 703e294ce..a99754153 100644
--- a/ui/src/app/i18n/component/translate.component.spec.ts
+++ b/ui/src/app/i18n/component/translate.component.spec.ts
@@ -11,7 +11,7 @@ import { MockI18nService, MockI18nModule } from '../../../testing/i18n.stub';
 
 @Component({
     template: `
-        <translate [key]="foo">Word</translate>
+        <translate-i18n [key]="foo">Word</translate-i18n>
     `
 })
 class TestHostComponent {
diff --git a/ui/src/app/i18n/component/translate.component.ts b/ui/src/app/i18n/component/translate.component.ts
index 4c1b524db..9eb6f6623 100644
--- a/ui/src/app/i18n/component/translate.component.ts
+++ b/ui/src/app/i18n/component/translate.component.ts
@@ -16,7 +16,7 @@ import { Messages } from '../model/Messages';
 /*tslint:disable:component-selector */
 
 @Component({
-    selector: 'translate',
+    selector: 'translate-i18n',
     template: `<ng-content></ng-content>`
 })
 export class TranslateComponent implements OnDestroy {
diff --git a/ui/src/app/i18n/service/i18n.service.ts b/ui/src/app/i18n/service/i18n.service.ts
index 6b9726180..16a613c1f 100644
--- a/ui/src/app/i18n/service/i18n.service.ts
+++ b/ui/src/app/i18n/service/i18n.service.ts
@@ -38,7 +38,7 @@ export class I18nService {
 
     translate(value: string, interpolated: any, messages: Messages): string {
         interpolated = interpolated || {};
-        let val = messages.hasOwnProperty(value) ? messages[value] : '';
+        let val = messages.hasOwnProperty(value) ? messages[value] : value;
         return this.interpolate(val, interpolated);
     }
 
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 58d940b93..6f4bbb73c 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,18 +5,17 @@
                 <div class="row">
                     <label for="serviceProviderName" class="col-sm-10">
                         <span>
-                            <translate key="label.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</translate>
+                            <translate-i18n key="label.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</translate-i18n>
                             <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>
-                            <translate key="tooltip.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only) popover</translate>
+                            <translate-i18n key="tooltip.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only) popover</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipServiceProviderNameDashboardDisplayOnly"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input type="text"
@@ -30,18 +29,17 @@
                 <div class="row">
                     <label for="entityId" class="col-sm-10">
                         <span>
-                            <translate key="label.service-provider-entity-id">Service Provider Entity ID</translate>
+                            <translate-i18n key="label.service-provider-entity-id">Service Provider Entity ID</translate-i18n>
                             <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>
-                            <translate key="tooltip.service-provider-entity-id">Service Provider Entity ID popover</translate>
+                            <translate-i18n key="tooltip.service-provider-entity-id">Service Provider Entity ID popover</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipServiceProviderEntityID"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input type="text"
@@ -55,7 +53,7 @@
                 <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" for="serviceEnabled" aria-label="Enable this service?">
-                        <translate key="label.enable-this-service">Enable this service?</translate>
+                        <translate-i18n key="label.enable-this-service">Enable this service?</translate-i18n>
                     </label>
                 </div>
             </div>
@@ -64,18 +62,17 @@
                     <div class="row">
                         <label for="name" class="col-sm-10">
                             <span>
-                                <translate key="label.organization-name">Organization Name</translate>
+                                <translate-i18n key="label.organization-name">Organization Name</translate-i18n>
                                 <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>
-                                <translate key="tooltip.organization-name">Organization Name popover</translate>
+                                <translate-i18n key="tooltip.organization-name">Organization Name popover</translate-i18n>
                             </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipOrganizationName"
-                               i18n-aria-label="@@tooltip.instruction"
-                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                         </span>
                     </div>
                     <input type="text"
@@ -89,18 +86,17 @@
                     <div class="row">
                         <label for="displayName" class="col-sm-10">
                             <span>
-                                <translate key="label.organization-display-name">Organization Display Name</translate>
+                                <translate-i18n key="label.organization-display-name">Organization Display Name</translate-i18n>
                                 <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>
-                                <translate translate="tooltip.organization-display-name">Organization Display Name popover</translate>
+                                <translate-i18n key="tooltip.organization-display-name">Organization Display Name popover</translate-i18n>
                             </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipOrganizationDisplayName"
-                               i18n-aria-label="@@tooltip.instruction"
-                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                         </span>
                     </div>
                     <input type="text"
@@ -114,18 +110,17 @@
                     <div class="row">
                         <label for="url" class="col-sm-10">
                             <span>
-                                <translate key="label.organization-url">Organization URL</translate>
+                                <translate-i18n key="label.organization-url">Organization URL</translate-i18n>
                                 <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>
-                                <translate key="tooltip.organization-url">Organization URL popover</translate>
+                                <translate-i18n key="tooltip.organization-url">Organization URL popover</translate-i18n>
                             </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipOrganizationURL"
-                               i18n-aria-label="@@tooltip.instruction"
-                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                         </span>
                     </div>
                     <input type="text"
@@ -136,11 +131,13 @@
                            role="textbox" />
                 </div>
             </div>
-            <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>
+            <p class="text-danger" *ngIf="form.get('organization').hasError('org')">
+                * <translate-i18n key="message.organization-feedback">These three fields must all be entered if any single field has a value.</translate-i18n>
+            </p>
         </fieldset>
         <fieldset class="form-section col">
             <p>
-                <translate key="label.contact-information">Contact Information:</translate>&nbsp;&nbsp;
+                <translate-i18n key="label.contact-information">Contact Information:</translate-i18n>&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>
@@ -175,16 +172,16 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'name-' + i" class="col-sm-9">
-                                                <translate key="label.name">Name</translate>
+                                                <translate-i18n key="label.name">Name</translate-i18n>
                                             </label>
                                             <span class="col-sm-3 text-right">
                                                 <ng-template #tooltipName>
-                                                    <translate key="tooltip.name">Name popover</translate>
+                                                    <translate-i18n key="tooltip.name">Name popover</translate-i18n>
                                                 </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipName"
-                                                   i18n-aria-label="@@tooltip.instruction"
-                                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                                  
+                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </span>
                                         </div>
                                         <input [id]="'name' + i"
@@ -200,16 +197,16 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'type-' + i" class="col-sm-9">
-                                                <translate key="label.type">Type</translate>
+                                                <translate-i18n key="label.type">Type</translate-i18n>
                                             </label>
                                             <span class="col-sm-3 text-right">
                                                 <ng-template #tooltipType>
-                                                    <translate key="tooltip.type">Type popover</translate>
+                                                    <translate-i18n key="tooltip.type">Type popover</translate-i18n>
                                                 </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipType"
-                                                   i18n-aria-label="@@tooltip.instruction"
-                                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                                  
+                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </span>
                                         </div>
                                         <select [id]="'type-' + i" class="form-control" formControlName="type" aria-label="Contact type dropdown" role="listbox">
@@ -225,16 +222,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'email-' + i" class="col-sm-10">
-                                                <translate key="label.email-address">Email Address</translate>
+                                                <translate-i18n key="label.email-address">Email Address</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
                                                 <ng-template #tooltipEmailAddress>
-                                                    <translate translate="tooltip.email-address">Email Address popover</translate>
+                                                    <translate-i18n key="tooltip.email-address">Email Address popover</translate-i18n>
                                                 </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipEmailAddress"
-                                               i18n-aria-label="@@tooltip.instruction"
-                                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </span>
                                         </div>
                                         <input type="email"
@@ -246,7 +242,7 @@
                                                aria-label="Contact email address"
                                                role="textbox" />
                                         <small class="form-text text-danger" *ngIf="contact.get('emailAddress').touched && contact.get('emailAddress').hasError('email')">
-                                            <translate key="message.valid-email">Must be a valid Email Address</translate>
+                                            <translate-i18n key="message.valid-email">Must be a valid Email Address</translate-i18n>
                                         </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 65056ee9e..709c70bd4 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
@@ -3,7 +3,13 @@
         <fieldset class="col col-xl-6 form-section">
             <p>
                 <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>
+                <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,7 +24,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('locationUrl').value">{{ endpoint.get('locationUrl').value }}</ng-container>
-                                        <translate *ngIf="!endpoint.get('locationUrl').value" key="label.new-endpoint">New Endpoint</translate>
+                                        <translate-i18n *ngIf="!endpoint.get('locationUrl').value" key="label.new-endpoint">New Endpoint</translate-i18n>
                                         {{ i }}
                                     </span>
                                     <i class="fa fa-fw fa-check-square fa-lg text-success" aria-hidden="true" *ngIf="endpoint.get('makeDefault').value === true"></i>
@@ -36,21 +42,20 @@
                             <div class="form-group">
                                 <div class="row">
                                     <label [for]="'location-' + i" class="col-sm-10">
-                                        <translate key="label.assertion-consumer-services-location">Assertion Consumer Service Location</translate>
+                                        <translate-i18n key="label.assertion-consumer-services-location">Assertion Consumer Service Location</translate-i18n>
                                     </label>
                                     <span class="col-sm-2 text-right">
                                         <ng-template #tooltipAssertionConsumerServiceLocation>
-                                            <translate key="tooltip.assertion-consumer-service-location">Assertion Consumer Service Location popover</translate>
+                                            <translate-i18n key="tooltip.assertion-consumer-service-location">Assertion Consumer Service Location popover</translate-i18n>
                                         </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipAssertionConsumerServiceLocation"
-                                           i18n-aria-label="@@tooltip.instruction"
-                                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                           [attr.aria-label]="'tooltip.instruction' | translate"></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')">
-                                    <translate key="message.valid-url">Must be a valid URL</translate>
+                                    <translate-i18n key="message.valid-url">Must be a valid URL</translate-i18n>
                                 </small>
                             </div>
                             <div class="row">
@@ -58,16 +63,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'binding-' + i" class="col-sm-10">
-                                                <translate key="label.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate>
+                                                <translate-i18n key="label.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
                                                 <ng-template #tooltipAssertionConsumerServiceLocationBinding>
-                                                    <translate key="tooltip.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate>
+                                                    <translate-i18n key="tooltip.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate-i18n>
                                                 </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipAssertionConsumerServiceLocationBinding"
-                                               i18n-aria-label="@@tooltip.instruction"
-                                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </span>
                                         </div>
                                         <select [id]="'binding-' + i" class="form-control" formControlName="binding" role="listbox" aria-label="Assertion consumer service location binding type">
@@ -82,14 +86,13 @@
                                     <div class="form-check">
                                         <fieldset aria-label="Mark this assertion consumer service endpoint as the default?">
                                             <label class="d-block">
-                                                <translate key="label.mark-as-default">Mark as Default</translate>
+                                                <translate-i18n key="label.mark-as-default">Mark as Default</translate-i18n>
                                                 <ng-template #tooltipMarkAsDefault>
-                                                    <translate key="tooltip.mark-as-default">Mark as Default</translate>
+                                                    <translate-i18n key="tooltip.mark-as-default">Mark as Default</translate-i18n>
                                                 </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipMarkAsDefault"
-                                                   i18n-aria-label="@@tooltip.instruction"
-                                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </label>
                                             <div class="custom-control custom-checkbox custom-control-inline">
                                                 <input type="checkbox"
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 7f53b5bbf..eb8e6fa08 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,16 +4,15 @@
             <div class="form-group">
                 <div class="row">
                     <label for="protocolSupportEnum" class="col-sm-10">
-                        <translate key="label.protocol-support-enumeration">Protocol Support Enumeration</translate>
+                        <translate-i18n key="label.protocol-support-enumeration">Protocol Support Enumeration</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
                         <ng-template #tooltipProtocolSupportEnumeration>
-                            <translate key="tooltip.protocol-support-enumeration">Protocol Support Enumeration popover</translate>
+                            <translate-i18n key="tooltip.protocol-support-enumeration">Protocol Support Enumeration popover</translate-i18n>
                         </ng-template>
                     <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                        [ngbPopover]="tooltipProtocolSupportEnumeration"
-                       i18n-aria-label="@@tooltip.instruction"
-                       aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                       [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <select id="protocolSupportEnum" class="form-control" formControlName="protocolSupportEnum" aria-label="Protocol support enumeration dropdown" role="listbox">
@@ -24,15 +23,14 @@
             <div class="form-group">
                 <div class="row">
                     <span class="col-sm-10">
-                        <translate key="label.nameid-format">NameID Format</translate>&nbsp;
+                        <translate-i18n key="label.nameid-format">NameID Format</translate-i18n>&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 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"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
             </div>
@@ -40,7 +38,7 @@
                 <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">
-                            <translate key="label.nameid-format">NameID Format</translate> {{ i + 1 }}
+                            <translate-i18n key="label.nameid-format">NameID Format</translate-i18n> {{ i + 1 }}
                         </label>
                         <auto-complete
                             [id]="'nameIdFormat-' + 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 44aea8a56..5d9682b8b 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
@@ -12,14 +12,14 @@
                     <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"
+                      
                        role="tooltip"></i>
                 </div>
             </section>
             <section class="entity-section">
                 <h3 class="tag tag-success tag-sm my-4">
                     <span class="index">1</span>
-                    <translate key="label.name-and-entity-id">Name and Entity ID</ng-container>
+                    <translate-i18n key="label.name-and-entity-id">Name and Entity ID</translate-i18n>
                 </h3>
                 <dl>
                     <dt class="text-primary" translate="label.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only)</dt>
@@ -33,7 +33,7 @@ <h3 class="tag tag-success tag-sm my-4">
             <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>
-                    <translate key="label.organization-information">Organization Information</ng-container>
+                    <translate-i18n key="label.organization-information">Organization Information</translate-i18n>
                 </a>
                 <dl *ngIf="resolver.organization">
                     <dt class="text-primary" translate="label.organization-name">Organization Name</dt>
@@ -49,8 +49,8 @@ <h3 class="tag tag-success tag-sm my-4">
                             <thead>
                             <tr class="table-secondary">
                                 <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>
+                                <th scope="col" translate="label.email-address">Email Address</th>
+                                <th scope="col" translate="label.contact-type">Contact Type</th>
                             </tr>
                             </thead>
                             <tbody>
@@ -67,7 +67,7 @@ <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>
-                    <translate key="label.user-interface-mdui-infromation">User Interface / MDUI Information</ng-container>
+                    <translate-i18n key="label.user-interface-mdui-infromation">User Interface / MDUI Information</translate-i18n>
                 </a>
                 <dl *ngIf="resolver.mdui">
                     <dt class="text-primary" translate="label.display-name">Display Name</dt>
@@ -89,7 +89,7 @@ <h3 class="tag tag-success tag-sm my-4">
             <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>
-                    <translate key="label.sp-sso-descriptor-information">SP SSO Descriptor Information</ng-container>
+                    <translate-i18n key="label.sp-sso-descriptor-information">SP SSO Descriptor Information</translate-i18n>
                 </a>
                 <dl *ngIf="resolver.serviceProviderSsoDescriptor">
                     <dt class="text-primary" translate="label.protocol-support-enumeration">Protocol Support Enumeration</dt>
@@ -108,7 +108,7 @@ <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>
-                    <translate key="label.logout-endpoints">Logout Endpoints</ng-container>
+                    <translate-i18n key="label.logout-endpoints">Logout Endpoints</translate-i18n>
                 </a>
                 <p class="text-secondary" *ngIf="!resolver.logoutEndpoints.length">&mdash;</p>
                 <table class="table table-sm table-bordered table-striped"  *ngIf="resolver.logoutEndpoints.length">
@@ -131,7 +131,7 @@ <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>
-                    <translate key="label.security-information">Security Information</ng-container>
+                    <translate-i18n key="label.security-information">Security Information</translate-i18n>
                 </a>
                 <dl *ngIf="resolver.securityInfo">
                     <dt class="text-primary" translate="label.is-there-a-x509-certificate">Is there a X509 Certificate?</dt>
@@ -169,7 +169,7 @@ <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>
-                    <translate key="label.assertion-consumer-services">Assertion Consumer Services</ng-container>
+                    <translate-i18n key="label.assertion-consumer-services">Assertion Consumer Services</translate-i18n>
                 </a>
                 <dl>
                     <dt class="text-primary" translate="label.assertion-consumer-service-endpoints">Assertion Consumer Service Endpoints</dt>
@@ -197,7 +197,7 @@ <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>
-                    <translate key="label.relying-party-overrides">Relying Party Overrides</ng-container>
+                    <translate-i18n key="label.relying-party-overrides">Relying Party Overrides</translate-i18n>
                 </a>
                 <dl *ngIf="resolver.relyingPartyOverrides">
                     <dt class="text-primary" translate="label.sign-the-assertion">Sign the Assertion?</dt>
@@ -237,7 +237,7 @@ <h3 class="tag tag-success tag-sm my-4">
             <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>
-                    <translate key="label.attribute-release">Attribute Release</ng-container>
+                    <translate-i18n key="label.attribute-release">Attribute Release</translate-i18n>
                 </a>
                 <table class="table table-sm table-bordered table-striped" *ngIf="resolver.attributeRelease">
                     <thead>
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 1419817ff..0da342a5f 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,16 +5,15 @@
                 <div class="form-group">
                     <div class="row">
                         <label for="x509CertificateAvailableRadioGroup">
-                            <translate key="label.is-there-a-x509-certificate">Is there a X509 Certificate?</translate>
+                            <translate-i18n key="label.is-there-a-x509-certificate">Is there a X509 Certificate?</translate-i18n>
                         </label>&nbsp;
                         <span>
                             <ng-template #tooltipIsThereAX509Certificate>
-                                <translate key="tooltip.authentication-requests-signed">Is there a X509 Certificate popover</translate>
+                                <translate-i18n key="tooltip.authentication-requests-signed">Is there a X509 Certificate popover</translate-i18n>
                             </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                [ngbPopover]="tooltipIsThereAX509Certificate"
-                               i18n-aria-label="@@tooltip.instruction"
-                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                         </span>
                     </div>
                     <div id="x509CertificateAvailableRadioGroup" role="radiogroup" aria-activedescendant="x509CertificateAvailableNo" tabindex="0">
@@ -35,16 +34,15 @@
                 <fieldset aria-label="Should authentication requests be signed? Radio choice">
                     <div class="row">
                         <label for="authenticationRequestsSignedRadioGroup">
-                            <translate key="label.authentication-requests-signed">Authentication Requests Signed?</translate>
+                            <translate-i18n key="label.authentication-requests-signed">Authentication Requests Signed?</translate-i18n>
                         </label>&nbsp;
                         <span>
                             <ng-template #tooltipAuthenticationRequestsSigned>
-                                <translate key="tooltip.authentication-requests-signed">Authentication Requests Signed popover</translate>
+                                <translate-i18n key="tooltip.authentication-requests-signed">Authentication Requests Signed popover</translate-i18n>
                             </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipAuthenticationRequestsSigned"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                         </span>
                     </div>
                     <div id="authenticationRequestsSignedRadioGroup" role="radiogroup" aria-activedescendant="authenticationRequestsSignedNo" tabindex="0">
@@ -65,16 +63,15 @@
                 <fieldset aria-label="Do you want the assertions signed? Radio choice">
                     <div class="row">
                         <label>
-                            <translate key="label.want-assertions-signed">Want Assertions Signed?</translate>
+                            <translate-i18n key="label.want-assertions-signed">Want Assertions Signed?</translate-i18n>
                         </label>&nbsp;
                         <span>
                             <ng-template #tooltipWantAssertionsSigned>
-                                <translate key="tooltip.want-assertions-signed">Want Assertions Signed</translate>
+                                <translate-i18n key="tooltip.want-assertions-signed">Want Assertions Signed</translate-i18n>
                             </ng-template>
                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                 [ngbPopover]="tooltipWantAssertionsSigned"
-                                i18n-aria-label="@@tooltip.instruction"
-                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                [attr.aria-label]="'tooltip.instruction' | translate"></i>
                         </span>
                     </div>
                     <div id="wantAssertionsSignedRadioGroup" role="radiogroup" aria-activedescendant="wantAssertionsSignedNo" tabindex="0">
@@ -94,7 +91,7 @@
         </div>
         <fieldset class="col form-section">
             <p>
-                <translate key="label.x509-certificates">X509 Certificates: </translate>
+                <translate-i18n key="label.x509-certificates">X509 Certificates: </translate-i18n>
                 <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">
@@ -129,18 +126,18 @@
                                 <div class="row">
                                     <label [for]="'name-' + i" class="col-sm-10">
                                         <span>
-                                             <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>
+                                            <translate-i18n key="label.certificate-name-display-only">Certificate Name (Display Only)</translate-i18n>
+                                            <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>
-                                            <translate key="tooltip.certificate-name">Certificate Name Popover</translate>
+                                            <translate-i18n key="tooltip.certificate-name">Certificate Name Popover</translate-i18n>
                                         </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipCertificateName"
-                                           i18n-aria-label="@@tooltip.instruction"
-                                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                          
+                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                     </span>
                                 </div>
                                 <input [id]="'name-' + i" type="text" class="form-control" placeholder="" formControlName="name" aria-label="x509 certificate name" role="textbox" />
@@ -150,18 +147,17 @@
                                     <div class="row">
                                         <label [for]="'type-' + i" class="col-sm-10">
                                             <span>
-                                                <translate key="label.type">Type</translate>
+                                                <translate-i18n key="label.type">Type</translate-i18n>
                                                 <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>
-                                                <translate key="tooltip.certificate-type">Certificate Type Popover</translate>
+                                                <translate-i18n key="tooltip.certificate-type">Certificate Type Popover</translate-i18n>
                                             </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipCertificateType"
-                                           i18n-aria-label="@@tooltip.instruction"
-                                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                         </span>
                                     </div>
                                     <div id="certTypeRadioGroup" role="radiogroup" tabindex="0">
@@ -179,18 +175,17 @@
                                 <div class="row">
                                     <label [for]="'cert-' + i" class="col-sm-10">
                                         <span>
-                                            <translate key="label.certificate">Certificate</translate>
+                                            <translate-i18n key="label.certificate">Certificate</translate-i18n>
                                             <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>
-                                            <translate key="tooltip.certificate">Certificate Popover</translate>
+                                            <translate-i18n key="tooltip.certificate">Certificate Popover</translate-i18n>
                                         </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipCertificateBody"
-                                               i18n-aria-label="@@tooltip.instruction"
-                                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                     </span>
                                 </div>
                                 <textarea [id]="'cert-' + i" class="form-control" placeholder="" formControlName="value" rows="10" [disableDefaults]="true" role="textbox" aria-multiline="true"></textarea>
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 334fc8c92..38c0ac0a3 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,7 +2,7 @@
     <div class="row">
         <fieldset class="col col-xl-6 form-section">
             <p>
-                <translate key="label.logout-endpoints">Logout Endpoints: </translate>
+                <translate-i18n key="label.logout-endpoints">Logout Endpoints: </translate-i18n>
                 <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">
@@ -33,16 +33,16 @@
                             <div class="form-group">
                                 <div class="row">
                                     <label [for]="'url-' + i" class="col-sm-10">
-                                        <translate key="label.url">URL</translate>
+                                        <translate-i18n key="label.url">URL</translate-i18n>
                                     </label>
                                     <span class="col-sm-2 text-right">
                                         <ng-template #tooltipLogoutEndpointsUrl>
-                                            <translate key="tooltip.logout-endpoints-url">Logout Endpoints Url popover</translate>
+                                            <translate-i18n key="tooltip.logout-endpoints-url">Logout Endpoints Url popover</translate-i18n>
                                         </ng-template>
                                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                            [ngbPopover]="tooltipLogoutEndpointsUrl"
-                                           i18n-aria-label="@@tooltip.instruction"
-                                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                          
+                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                     </span>
                                 </div>
                                 <input [id]="'url-' + i" type="text" class="form-control" placeholder="" formControlName="url" aria-label="Logout endpoint URL" role="textbox" />
@@ -51,16 +51,16 @@
                             <div class="form-group">
                                 <div class="row">
                                     <label [for]="'binding-' + i" class="col-sm-10">
-                                        <translate key="label.binding-types">Binding Type</translate>
+                                        <translate-i18n key="label.binding-types">Binding Type</translate-i18n>
                                     </label>
                                     <span class="col-sm-2 text-right">
                                         <ng-template #tooltipLogoutEndpointsBindingType>
-                                            <translate key="tooltip.logout-endpoints-binding-type">Logout Endpoints Binding Type popover</translate>
+                                            <translate-i18n key="tooltip.logout-endpoints-binding-type">Logout Endpoints Binding Type popover</translate-i18n>
                                         </ng-template>
                                     <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                        [ngbPopover]="tooltipLogoutEndpointsBindingType"
-                                       i18n-aria-label="@@tooltip.instruction"
-                                       aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                      
+                                       [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                     </span>
                                 </div>
                                 <select [id]="'binding-' + i" class="form-control" formControlName="bindingType" aria-label="Logout binding type dropdown" role="listbox">
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 0e835e651..5974ba6ac 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,16 +4,16 @@
             <div class="form-group">
                 <div class="row">
                     <label for="displayName" class="col-sm-10">
-                        <translate key="label.display-name">Display Name</translate>
+                        <translate-i18n key="label.display-name">Display Name</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
                         <ng-template #tooltipMDUIDisplayName>
-                            <translate key="tooltip.mdui-display-name">Typically, the IdP Display Name field will be presented on IdP discovery service interfaces.</translate>
+                            <translate-i18n key="tooltip.mdui-display-name">Typically, the IdP Display Name field will be presented on IdP discovery service interfaces.</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIDisplayName"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                          
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input id="displayName" type="text" class="form-control" placeholder="" formControlName="displayName" role="textbox" />
@@ -21,37 +21,37 @@
             <div class="form-group">
                 <div class="row">
                     <label for="informationUrl" class="col-sm-10">
-                        <translate key="label.information-url">Information URL</translate>
+                        <translate-i18n key="label.information-url">Information URL</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
                         <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>
+                            <translate-i18n 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-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIInformationUrl"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                          
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input id="informationUrl" type="text" class="form-control" placeholder="" formControlName="informationUrl" role="textbox" />
-                <small class="form-text text-danger" *ngIf="form.get('mdui.logoUrl').hasError('pattern')">Must be a valid URL</small>
+                <small class="form-text text-danger" *ngIf="form.get('mdui.logoUrl').hasError('pattern')" translate="message.must-be-valid-url">Must be a valid URL</small>
             </div>
             <div class="form-group">
                 <div class="row">
                     <label for="description" class="col-sm-10">
-                        <translate key="label.description">Description</translate>
+                        <translate-i18n key="label.description">Description</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
                         <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
+                            <translate-i18n 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>
+                            disambiguate duplicate or similar IdP Display Names.</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIDescription"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                          
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <textarea id="description"
@@ -74,56 +74,53 @@
             <div class="form-group">
                 <div class="row">
                     <label for="privacyStatementUrl" class="col-sm-10">
-                        <translate key="label.privacy-statement-url">Privacy Statement URL</translate>
+                        <translate-i18n key="label.privacy-statement-url">Privacy Statement URL</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
                         <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>
+                            <translate-i18n 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-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUIPrivacyStatementUrl"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input id="privacyStatementUrl" type="text" class="form-control" placeholder="" formControlName="privacyStatementUrl" role="textbox" />
-                <small class="form-text text-danger" *ngIf="form.get('mdui.logoUrl').hasError('pattern')">Must be a valid URL</small>
+                <small class="form-text text-danger" *ngIf="form.get('mdui.logoUrl').hasError('pattern')" translate="message.must-be-valid-url">Must be a valid URL</small>
             </div>
             <div class="form-group">
                 <div class="row">
                     <label for="logoUrl" class="col-sm-10">
-                        <translate key="label.logo-url">Logo URL</translate>
+                        <translate-i18n key="label.logo-url">Logo URL</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
                         <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>
+                            <translate-i18n 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-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipMDUILogoUrl"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input id="logoUrl" type="text" class="form-control" placeholder="" formControlName="logoUrl" role="textbox" />
-                <small class="form-text text-danger" *ngIf="form.get('mdui.logoUrl').hasError('pattern')">Must be a valid URL</small>
+                <small class="form-text text-danger" *ngIf="form.get('mdui.logoUrl').hasError('pattern')" translate="message.must-be-valid-url">Must be a valid URL</small>
             </div>
             <div class="row">
                 <div class="col">
                     <div class="form-group">
                         <div class="row">
                             <label for="logoWidth" class="col-sm-10">
-                                <translate key="label.logo-width">Logo Width</translate>
+                                <translate-i18n key="label.logo-width">Logo Width</translate-i18n>
                             </label>
                             <span class="col-sm-2 text-right">
                                 <ng-template #tooltipMDUILogoWidth>
-                                    <translate key="tooltip.mdui-logo-width">The logo should have a minimum width of 100 pixels</translate>
+                                    <translate-i18n key="tooltip.mdui-logo-width">The logo should have a minimum width of 100 pixels</translate-i18n>
                                 </ng-template>
                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                    [ngbPopover]="tooltipMDUILogoUrl"
-                                   i18n-aria-label="@@tooltip.instruction"
-                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
                             </span>
                         </div>
                         <input id="logoWidth" type="number" class="form-control" placeholder="" formControlName="logoWidth" step="1" role="textbox" />
@@ -134,17 +131,16 @@
                     <div class="form-group">
                         <div class="row">
                             <label for="logoHeight" class="col-sm-10">
-                                <translate key="label.logo-height">Logo Height</translate>
+                                <translate-i18n key="label.logo-height">Logo Height</translate-i18n>
                             </label>
                             <span class="col-sm-2 text-right">
                                 <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>
+                                    <translate-i18n 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-i18n>
                                 </ng-template>
                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                    [ngbPopover]="tooltipMDUILogoHeight"
-                                   i18n-aria-label="@@tooltip.instruction"
-                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
                             </span>
                         </div>
                         <input id="logoHeight" type="number" class="form-control" placeholder="" formControlName="logoHeight" step="1" role="textbox" />
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 7827dc798..1364b5577 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,18 +5,17 @@
                 <div class="row">
                     <label for="name" class=col-sm-10>
                         <span>
-                            <translate key="label.organization-name">Organization Name</translate>
+                            <translate-i18n key="label.organization-name">Organization Name</translate-i18n>
                             <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 >
-                            <translate key="tooltip.organization-name">Organization Name Popover</translate>
+                            <translate-i18n key="tooltip.organization-name">Organization Name Popover</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                            [ngbPopover]="tooltipOrganizationName"
-                           i18n-aria-label="@@tooltip.instruction"
-                           aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input id="name" type="text" class="form-control" placeholder="" formControlName="name" role="textbox" />
@@ -25,18 +24,17 @@
                 <div class="row">
                     <label for="displayName" class="col-sm-10">
                         <span>
-                            <translate key="label.organization-display-name">Organization Display Name</translate>
+                            <translate-i18n key="label.organization-display-name">Organization Display Name</translate-i18n>
                             <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>
-                            <translate key="tooltip.organization-display-name">Organization Display Name Popover</translate>
+                            <translate-i18n key="tooltip.organization-display-name">Organization Display Name Popover</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipOrganizationDisplayName"
-                            i18n-aria-label="@@tooltip.instruction"
-                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </div>
                 <input id="displayName" type="text" class="form-control" placeholder="" formControlName="displayName" role="textbox" />
@@ -45,28 +43,29 @@
                 <div class="row">
                     <label for="url" class="col-sm-10">
                         <span>
-                            <translate key="label.organization-url">Organization URL</translate>
+                            <translate-i18n key="label.organization-url">Organization URL</translate-i18n>
                             <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>
-                            <translate key="tooltip.organization-url">Organization Url Popover</translate>
+                            <translate-i18n key="tooltip.organization-url">Organization Url Popover</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipOrganizationUrl"
-                            i18n-aria-label="@@tooltip.instruction"
-                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                            [attr.aria-label]="'tooltip.instruction' | translate"></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')" translate="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-i18n key="message.organization-feedback">These three fields must all be entered if any single field has a value.</translate-i18n>
+            </p>
         </fieldset>
         <fieldset class="form-section col">
             <p>
-                <translate key="label.contact-information">Contact Information: </translate>
+                <translate-i18n key="label.contact-information">Contact Information: </translate-i18n>
                 <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">
@@ -99,16 +98,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'name-' + i" class="col-sm-9">
-                                                <translate key="label.name">Contact Name</translate>
+                                                <translate-i18n key="label.contact-name">Contact Name</translate-i18n>
                                             </label>
                                             <span class="col-sm-3 text-right">
                                                 <ng-template #tooltipContactName>
-                                                    <translate key="tooltip.contact-name">Contact Name Popover</translate>
+                                                    <translate-i18n key="tooltip.contact-name">Contact Name Popover</translate-i18n>
                                                 </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipContactName"
-                                                   i18n-aria-label="@@tooltip.instruction"
-                                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </span>
                                         </div>
                                         <input [id]="'name-' + i" type="text" class="form-control" placeholder="" formControlName="name" aria-label="Contact name" role="textbox" />
@@ -118,16 +116,15 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'type-' + i" class="col-sm-10">
-                                                <translate key="label.type">Contact Type</translate>
+                                                <translate-i18n key="label.contact-type">Contact Type</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
                                                 <ng-template #tooltipContactType>
-                                                    <translate key="tooltip.contact-type">Contact Type Popover</translate>
+                                                    <translate-i18n key="tooltip.contact-type">Contact Type Popover</translate-i18n>
                                                 </ng-template>
                                             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                [ngbPopover]="tooltipContactType"
-                                               i18n-aria-label="@@tooltip.instruction"
-                                               aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
                                             </span>
                                         </div>
                                         <select [id]="'type-' + i" class="form-control" formControlName="type" aria-label="Contact type dropdown" role="listbox">
@@ -144,21 +141,21 @@
                                     <div class="form-group">
                                         <div class="row">
                                             <label [for]="'email-' + i" class="col-sm-10">
-                                                <translate key="label.email-address">Contact Email Address</translate>
+                                                <translate-i18n key="label.contact-email-address">Contact Email Address</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
                                                 <ng-template #tooltipContactEmail>
-                                                    <translate key="tooltip.contact-email">Contact Email Popover</translate>
+                                                    <translate-i18n key="tooltip.contact-email">Contact Email Popover</translate-i18n>
                                                 </ng-template>
                                                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                                                    [ngbPopover]="tooltipContactEmail"
-                                                   i18n-aria-label="@@tooltip.instruction"
-                                                   aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                                  
+                                                   [attr.aria-label]="'tooltip.instruction' | translate"></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')">
-                                            <translate key="message.valid-email">Must be a valid Email Address</translate>
+                                            <translate-i18n key="message.valid-email">Must be a valid Email Address</translate-i18n>
                                         </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 299c647b0..996bc5ae7 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
@@ -8,10 +8,10 @@
                     <label class="custom-control-label" translate="label.sign-the-assertion" for="signAssertion">Sign the Assertion</label>
                 </div>
                 <ng-template #tooltipSignAssertion>
-                    <translate key="tooltip.sign-assertion">Sign Assertion popover</translate>
+                    <translate-i18n key="tooltip.sign-assertion">Sign Assertion popover</translate-i18n>
                 </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>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipSignAssertion"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </fieldset>
         </div>
         <div class="form-group">
@@ -22,10 +22,10 @@
                     <label class="custom-control-label" translate="label.dont-sign-the-response" for="dontSignResponse">Don't Sign the Response</label>
                 </div>
                 <ng-template #tooltipDontSignResponse>
-                    <translate key="tooltip.dont-sign-response">Don't Sign Response popover</translate>
+                    <translate-i18n key="tooltip.dont-sign-response">Don't Sign Response popover</translate-i18n>
                 </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>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipDontSignResponse"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </fieldset>
         </div>
         <div class="form-group">
@@ -36,10 +36,10 @@
                     <label class="custom-control-label" translate="label.turn-off-encryption-of-response" for="turnOffEncryption">Turn Off Encryption of Response</label>
                 </div>
                 <ng-template #tooltipTurnOffEncryption>
-                    <translate key="tooltip.turn-off-encryption">Turn Off Encryption of Response popover</translate>
+                    <translate-i18n key="tooltip.turn-off-encryption">Turn Off Encryption of Response popover</translate-i18n>
                 </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>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipTurnOffEncryption"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </fieldset>
         </div>
         <div class="form-group">
@@ -49,31 +49,33 @@
                         role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.use-sha1-signing-algorithm" for="useSha">Use SHA1 Signing Algorithm</label>
                 </div>
-                <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>
+                <ng-template #tooltipUseShaAlgorithm>
+                    <translate-i18n key="tooltip.usa-sha-algorithm">Use SHA1 Signing Algorithm popover</translate-i18n>
+                </ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipUseShaAlgorithm"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </fieldset>
         </div>
         <div formArrayName="nameIdFormats" class="form-group">
             <div class="row">
                 <span class="col-sm-10">
-                    <translate key="label.nameid-format-to-send">NameID Format to Send</translate>
+                    <translate-i18n key="label.nameid-format-to-send">NameID Format to Send</translate-i18n>
                     &nbsp;
                     <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>
-                        <translate key="tooltip.nameid-format">Add NameID Format popover</translate>
+                        <translate-i18n key="tooltip.nameid-format">Add NameID Format popover</translate-i18n>
                     </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>
+                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipNameIdFormat"
+                        [attr.aria-label]="'tooltip.instruction' | translate"></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">
-                        <translate key="label.nameid-format">NameID Format</translate>
+                        <translate-i18n key="label.nameid-format">NameID Format</translate-i18n>
                         {{ i + 1 }}
                     </label>
                     <auto-complete
@@ -96,23 +98,23 @@
         <div formArrayName="authenticationMethods" class="form-group">
             <div class="row">
                 <span class="col-sm-10">
-                    <translate key="label.authentication-methods-to-use">Authentication Methods to Use</translate>
+                    <translate-i18n key="label.authentication-methods-to-use">Authentication Methods to Use</translate-i18n>
                      &nbsp;
                     <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>
-                        <translate key="tooltip.authentication-methods-to-use">Authentication Methods to Use popover</translate>
+                        <translate-i18n key="tooltip.authentication-methods-to-use">Authentication Methods to Use popover</translate-i18n>
                     </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>
+                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipAuthMethod"
+                        [attr.aria-label]="'tooltip.instruction' | translate"></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">
-                        <translate key="label.auth-method-indexed">Authentication Method</translate> {{ i + 1 }}
+                        <translate-i18n key="label.auth-method-indexed">Authentication Method</translate-i18n> {{ i + 1 }}
                     </label>
                     <auto-complete
                         class="col-sm-11"
@@ -139,10 +141,10 @@
                     <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>
-                    <translate key="tooltip.ignore-auth-method">Ignore any SP-Requested Authentication Method popover</translate>
+                    <translate-i18n key="tooltip.ignore-auth-method">Ignore any SP-Requested Authentication Method popover</translate-i18n>
                 </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>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipIgnoreAuthMethod"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </fieldset>
         </div>
         <div class="form-group">
@@ -152,22 +154,24 @@
                         id="omitNotBefore" role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.omit-not-before-condition" for="omitNotBefore">Omit Not Before Condition</label>
                 </div>
-                <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>
+                <ng-template #tooltipOmitNotBeforeCondition>
+                    <translate-i18n key="tooltip.omit-not-before-condition">Omit Not Before Condition popover</translate-i18n>
+                </ng-template>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipOmitNotBeforeCondition"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </fieldset>
         </div>
         <div class="form-group">
             <div class="row">
                 <label for="responderId" class="col-sm-10">
-                    <translate key="label.responder-id">ResponderID</translate>
+                    <translate-i18n key="label.responder-id">ResponderID</translate-i18n>
                 </label>
                 <span class="col-sm-2 text-right">
                     <ng-template #tooltipResponderId>
-                        <translate key="tooltip.responder-id">ResponderId popover</translate>
+                        <translate-i18n key="tooltip.responder-id">ResponderId popover</translate-i18n>
                     </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>
+                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipResponderId"
+                        [attr.aria-label]="'tooltip.instruction' | translate"></i>
                 </span>
             </div>
             <input id="responderId" class="form-control" type="text" formControlName="responderId" role="textbox">
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 a8fc698d8..71b460d93 100644
--- a/ui/src/app/metadata/domain/component/preview-dialog.component.html
+++ b/ui/src/app/metadata/domain/component/preview-dialog.component.html
@@ -10,7 +10,7 @@ <h4 class="modal-title" translate="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>
-        <translate key="action.download-file">Download File</translate>
+        <translate-i18n key="action.download-file">Download File</translate-i18n>
     </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/filter/component/search-dialog.component.html b/ui/src/app/metadata/filter/component/search-dialog.component.html
index 7b6697f37..bdc42728c 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">
-            <translate key="label.search-entity-id">Search Entity Id</translate>
+            <translate-i18n key="label.search-entity-id">Search Entity Id</translate-i18n>
              ({{ source }})
         </h4>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close modal" (click)="activeModal.dismiss()">
@@ -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>
-                        <translate key="action.search">Search</translate>
+                        <translate-i18n key="action.search">Search</translate-i18n>
                     </button>
                 </div>
             </div>
@@ -47,7 +47,7 @@ <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>
-            <translate key="action.select-id">Select ID</translate>
+            <translate-i18n key="action.select-id">Select ID</translate-i18n>
         </button>
         <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" translate="action.cancel">Cancel</button>
     </div>
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 249018795..60790fdff 100644
--- a/ui/src/app/metadata/filter/container/edit-filter.component.html
+++ b/ui/src/app/metadata/filter/container/edit-filter.component.html
@@ -4,8 +4,8 @@
             <div class="row justify-content-between">
                 <div class="col-md-12">
                     <span class="display-6">
-                        <i class="fa fa-fw fa-gears"></i>
-                        <translate key="label.new-filter">&nbsp; Edit EntityAttributesFilter</translate>
+                        <i class="fa fa-fw fa-gears"></i>&nbsp;&nbsp;
+                        <translate-i18n key="label.new-filter">Edit EntityAttributesFilter</translate-i18n>
                     </span>
                 </div>
             </div>
@@ -18,11 +18,11 @@
                         'fa-spinner': (isSaving$ | async),
                         'fa-pulse': (isSaving$ | async)
                     }"></i>
-                    <translate key="action.save">Save</translate>
+                    <translate-i18n key="action.save">Save</translate-i18n>
                 </button>
                 &nbsp;
                 <button (click)="this.cancel()" type="reset" class="btn btn-secondary" [disabled]="isSaving$ | async">
-                    <translate key="action.cancel">Cancel</translate>
+                    <translate-i18n key="action.cancel">Cancel</translate-i18n>
                 </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 9cedaa2a4..1b0d62945 100644
--- a/ui/src/app/metadata/filter/container/new-filter.component.html
+++ b/ui/src/app/metadata/filter/container/new-filter.component.html
@@ -4,8 +4,8 @@
             <div class="row justify-content-between">
                 <div class="col-md-12">
                     <span class="display-6">
-                        <i class="fa fa-fw fa-gears"></i>
-                        <translate key="label.new-filter">&nbsp; New Filter - EntityAttributes</translate>
+                        <i class="fa fa-fw fa-gears"></i>&nbsp;&nbsp;
+                        <translate-i18n key="label.new-filter">New Filter - EntityAttributes</translate-i18n>
                     </span>
                 </div>
             </div>
@@ -18,11 +18,11 @@
                                         'fa-spinner': (isSaving$ | async),
                                         'fa-pulse': (isSaving$ | async)
                                     }"></i>
-                    <translate key="action.save">Save</translate>
+                    <translate-i18n key="action.save">Save</translate-i18n>
                 </button>
                 &nbsp;
                 <button (click)="this.cancel()" type="reset" class="btn btn-secondary" [disabled]="isSaving$ | async">
-                    <translate key="action.cancel">Cancel</translate>
+                    <translate-i18n key="action.cancel">Cancel</translate-i18n>
                 </button>
             </div>
             <sf-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 6c5ae2afe..7154e1d7a 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" translate="warning.incomplete-form" aria-label="Warning Badge: Incomplete Form">Incomplete Form</span>
+                    <span *ngIf="entity.isDraft()" class="badge badge-warning" translate="message.incomplete-form" aria-label="Warning Badge: Incomplete Form">Incomplete Form</span>
                     <small class="d-block">{{ entity.getDisplayId() }}</small>
                 </div>
             </div>
@@ -61,7 +61,7 @@
                             <span *ngIf="!entity.enabled" translate="value.disabled">Disabled</span>
                         </div>
                         <div class="col" *ngIf="entity.isDraft()">
-                            <span class="badge badge-warning" translate="warning.incomplete-form">Incomplete Form</span>
+                            <span class="badge badge-warning" translate="message.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 f12b2a925..b0f47ee04 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" translate="label.current-metadata-sources">Current Metadata Providers</span>
+                    <span class="lead" translate="label.current-metadata-providers">Current Metadata Providers</span>
                 </div>
             </div>
         </div>
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 2983901e8..97ce05ca8 100644
--- a/ui/src/app/metadata/provider/component/delete-filter.component.html
+++ b/ui/src/app/metadata/provider/component/delete-filter.component.html
@@ -1,8 +1,8 @@
 <div class="modal-header">
-    <h4 class="modal-title" translate="message.delete-source-title">Delete Metadata Filter?</h4>
+    <h4 class="modal-title" translate="message.delete-filter-title">Delete Metadata Filter?</h4>
 </div>
 <div class="modal-body">
-    <p translate="message.delete-source-body">You are deleting a metadata filter. This cannot be undone. Continue?</p>
+    <p translate="message.delete-filter-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()" translate="action.delete">Delete</button>
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 db835c649..1775b8c92 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>
-                    <translate key="action.save">Save</ng-container>
+                    <translate-i18n key="action.save">Save</translate-i18n>
                 </button>
                 &nbsp;
                 <button class="btn btn-secondary"
                     (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
                     role="button">
-                    <translate key="action.cancel">Cancel</ng-container>
+                    <translate-i18n key="action.cancel">Cancel</translate-i18n>
                 </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>
+                    <translate-i18n key="message.editor-invalid">All forms must be valid before changes can be saved!</translate-i18n>
                 </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 50ab3827f..650a2ed82 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" translate="label.add-a-new-metadata-resolver">Add a new metadata provider</span>
+                <span class="display-6" translate="label.add-a-new-metadata-provider">Add a new metadata provider</span>
             </div>
         </div>
     </div>
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 091b7f4b7..94327908a 100644
--- a/ui/src/app/metadata/resolver/component/unsaved-dialog.component.html
+++ b/ui/src/app/metadata/resolver/component/unsaved-dialog.component.html
@@ -4,10 +4,10 @@
             <h4 class="modal-title" translate="message.unsaved-dialog-title">Save your information?</h4>
         </div>
         <div class="modal-body">
-            <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 *ngSwitchDefault>
+                <translate-i18n key="message.unsaved-source-1">You have not completed the wizard! Do you wish to save this information? You can finish the wizard later by clicking the "Edit"</translate-i18n>
+                <i class="fa fa-fw fa-edit"></i>
+                <translate-i18n key="message.unsaved-source-2">icon on the dashboard.</translate-i18n>
             </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>
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 de1cb9386..b17dbbd0e 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>
-                    <translate key="action.back">Back</translate>
+                    <translate-i18n key="action.back">Back</translate-i18n>
                 </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>
-                    <translate key="action.next">Next</translate>
+                    <translate-i18n key="action.next">Next</translate-i18n>
                 </span>
             </button>
         </li>
@@ -48,7 +48,7 @@ <h3 class="tag tag-primary">
                             'fa-spinner': (wizardIsSaving$ | async),
                             'fa-pulse': (wizardIsSaving$ | async)
                         }"></i>
-                    <translate key="action.save">Save</translate>
+                    <translate-i18n key="action.save">Save</translate-i18n>
                 </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 dd9ff6af1..5229f61f1 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>
-                        <translate key="label.name-and-entityid">1. Name and EntityId</translate>
+                        1. <translate-i18n key="label.name-and-entityid">Name and EntityId</translate-i18n>
                     </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.
-                            <translate key="label.org-info">Organization Information</translate>
+                            <translate-i18n key="label.org-info">Organization Information</translate-i18n>
                         </span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                            <translate key="action.next">Next</translate>
+                            <translate-i18n key="action.next">Next</translate-i18n>
                         </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">
-                        <translate key="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</translate>
+                        <translate-i18n key="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</translate-i18n>
                         <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')">
-                            <translate key="message.service-resolver-name-required">Service Resolver Name is required</translate>
+                            <translate-i18n key="message.service-resolver-name-required">Service Resolver Name is required</translate-i18n>
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
                     <label for="entityId">
-                        <translate key="label.service-resolver-entity-id">Service Resolver Entity ID</translate>
+                        <translate-i18n key="label.service-resolver-entity-id">Service Resolver Entity ID</translate-i18n>
                         <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')">
-                            <translate key="message.entity-id-required">Entity ID is required</translate>
+                            <translate-i18n key="message.entity-id-required">Entity ID is required</translate-i18n>
                         </small>
                     </ng-container>
                     <small class="form-text text-danger" *ngIf="providerForm.get('entityId').hasError('unique')">
-                        <translate key="message.entity-id-must-be-unique">Entity ID must be unique</translate>
+                        <translate-i18n key="message.entity-id-must-be-unique">Entity ID must be unique</translate-i18n>
                     </small>
                 </div>
                 <button type="submit" class="btn btn-primary sr-only" [disabled]="providerForm.invalid">
-                    <translate key="action.next">Next</translate>
+                    <translate-i18n key="action.next">Next</translate-i18n>
                     <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 8e5fb9d34..c9df7b998 100644
--- a/ui/src/app/metadata/resolver/container/confirm-copy.component.html
+++ b/ui/src/app/metadata/resolver/container/confirm-copy.component.html
@@ -13,7 +13,7 @@
                     <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>
-                            <translate key="action.back">Back</translate>
+                            <translate-i18n key="action.back">Back</translate-i18n>
                         </span>
                         <span class="label pull-right" translate="label.name-and-entityid">
                             Name and Entity ID.
@@ -23,7 +23,7 @@
                 <li class="nav-item">
                     <h3 class="tag tag-primary">
                         <span class="index"><i class="fa fa-fw fa-check"></i></span>
-                        <translate key="label.finish-summary-validation">Finished!</translate>
+                        <translate-i18n key="label.finish-summary-validation">Finished!</translate-i18n>
                     </h3>
                 </li>
                 <li class="nav-item">
@@ -35,7 +35,7 @@ <h3 class="tag tag-primary">
                                     'fa-save': !(saving$ | async),
                                     'fa-spinner fa-pulse': (saving$ | async)
                                 }"></i>
-                            <translate key="action.save">Save</translate>
+                            <translate-i18n key="action.save">Save</translate-i18n>
                         </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 4e0d2e445..acbbd1908 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>
-                        <translate key="label.name-and-entityid">1. Name and EntityId</translate>
+                        1. <translate-i18n key="label.name-and-entityid">Name and EntityId</translate-i18n>
                     </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" translate="label.finish-validate">
+                        <span class="label pull-left" translate="label.finish-summary-validation">
                             Finished!
                         </span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                            <translate key="action.next">Next</translate>
+                            <translate-i18n key="action.next">Next</translate-i18n>
                         </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">
-                        <translate key="label.select-entity-id-to-copy">Select the Entity ID to copy</translate>
+                        <translate-i18n key="label.select-entity-id-to-copy">Select the Entity ID to copy</translate-i18n>
                         <i class="fa fa-fw fa-asterisk text-danger" aria-hidden="true"></i>
                     </label>
                     <auto-complete
@@ -38,39 +38,39 @@ <h3 class="tag tag-primary">
                     </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')">
-                            <translate key="message.service-resolver-name-required"></translate>
+                            <translate-i18n key="message.service-resolver-name-required">Service Resolver Name is Required</translate-i18n>
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
                     <label for="serviceProviderName">
-                        <translate key="label.metadata-source-name-dashboard-display-only">Metadata Source Name (Dashboard Display Only)</translate>
+                        <translate-i18n key="label.metadata-source-name-dashboard-display-only">Metadata Source Name (Dashboard Display Only)</translate-i18n>
                         <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')">
-                            <translate key="message.service-resolver-name-required">Service Resolver Name is required</translate>
+                            <translate-i18n key="message.service-resolver-name-required">Service Resolver Name is required</translate-i18n>
                         </small>
                     </ng-container>
                 </div>
                 <div class="form-group">
                     <label for="entityId">
-                        <translate key="label.service-resolver-entity-id">New Entity ID</translate>
+                        <translate-i18n key="label.service-resolver-entity-id">New Entity ID</translate-i18n>
                         <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')">
-                            <translate key="message.entity-id-required">Entity ID is required</translate>
+                            <translate-i18n key="message.entity-id-required">Entity ID is required</translate-i18n>
                         </small>
                     </ng-container>
                     <small class="form-text text-danger" *ngIf="providerForm.get('entityId').hasError('unique')">
-                        <translate key="message.entity-id-must-be-unique">Entity ID must be unique</translate>
+                        <translate-i18n key="message.entity-id-must-be-unique">Entity ID must be unique</translate-i18n>
                     </small>
                 </div>
                 <button type="submit" class="btn btn-primary sr-only" [disabled]="providerForm.invalid">
-                    <translate key="action.next">Next</translate>
+                    <translate-i18n key="action.next">Next</translate-i18n>
                     <i class="fa fa-fw fa-arrow-circle-right fa-lg"></i>
                 </button>
             </fieldset>
diff --git a/ui/src/app/metadata/resolver/container/editor.component.html b/ui/src/app/metadata/resolver/container/editor.component.html
index 910f028d0..1957f2031 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>
-                        <translate key="action.save">Save</translate>
+                        <translate-i18n key="action.save">Save</translate-i18n>
                     </button>
                     &nbsp;
                     <button class="btn btn-secondary"
                         (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
                         role="button">
-                        <translate key="action.cancel">Cancel</translate>
+                        <translate-i18n key="action.cancel">Cancel</translate-i18n>
                     </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>
-                        <translate key="message.editor-invalid">All forms must be valid before changes can be saved!</translate>
+                        <translate-i18n key="message.editor-invalid">All forms must be valid before changes can be saved!</translate-i18n>
                     </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 37285c7a6..668eca546 100644
--- a/ui/src/app/metadata/resolver/container/new-resolver.component.html
+++ b/ui/src/app/metadata/resolver/container/new-resolver.component.html
@@ -20,12 +20,12 @@ <h3 translate="label.how-are-you-adding-the-metadata-information">How are you ad
                                 role="button"
                                 routerLink="upload"
                                 routerLinkActive="btn-success">
-                                <translate key="label.upload-url">Upload/URL</translate>
+                                <translate-i18n key="label.upload-url">Upload/URL</translate-i18n>
                                 <i class="fa fa-link fa-2x d-block"></i>
                             </button>
                         </div>
                         <div class="">
-                            <span class="subheading-1">&nbsp;<translate key="label.or">or</translate>&nbsp;</span>
+                            <span class="subheading-1">&nbsp;<translate-i18n key="label.or">or</translate-i18n>&nbsp;</span>
                         </div>
                         <div class="resolver-nav-option">
                             <button type="button"
@@ -34,12 +34,12 @@ <h3 translate="label.how-are-you-adding-the-metadata-information">How are you ad
                                 role="button"
                                 routerLink="blank"
                                 routerLinkActive="btn-info">
-                                <translate key="action.create">Create</translate>
+                                <translate-i18n key="action.create">Create</translate-i18n>
                                 <i class="fa fa-plus-square fa-2x d-block"></i>
                             </button>
                         </div>
                         <div class="">
-                            <span class="subheading-1">&nbsp;<translate key="label.or">or</translate>&nbsp;</span>
+                            <span class="subheading-1">&nbsp;<translate-i18n key="label.or">or</translate-i18n>&nbsp;</span>
                         </div>
                         <div class="resolver-nav-option">
                             <button type="button"
@@ -48,7 +48,7 @@ <h3 translate="label.how-are-you-adding-the-metadata-information">How are you ad
                                 role="button"
                                 routerLink="copy"
                                 routerLinkActive="btn-warning">
-                                <translate key="action.copy">Copy</translate>
+                                <translate-i18n key="action.copy">Copy</translate-i18n>
                                 <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 b52f5abdd..ebc62dd51 100644
--- a/ui/src/app/metadata/resolver/container/upload-resolver.component.html
+++ b/ui/src/app/metadata/resolver/container/upload-resolver.component.html
@@ -5,7 +5,7 @@
                 <li class="nav-item">
                     <h3 class="tag tag-primary">
                         <span class="index">1</span>
-                        <translate key="label.name-and-upload-url">1. Name and Upload Url</translate>
+                        1. <translate-i18n key="label.name-and-upload-url">Name and Upload Url</translate-i18n>
                     </h3>
                 </li>
                 <li class="nav-item">
@@ -15,7 +15,7 @@ <h3 class="tag tag-primary">
                         </span>
                         <span class="direction pull-right">
                             <i class="fa fa-fw fa-save d-block fa-2x"></i>
-                            <translate key="action.save">Save</translate>
+                            <translate-i18n key="action.save">Save</translate-i18n>
                         </span>
                     </button>
                 </li>
@@ -23,7 +23,7 @@ <h3 class="tag tag-primary">
             <fieldset class="bg-light border rounded p-4">
                 <div class="form-group">
                     <label for="serviceProviderName">
-                        <translate key="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</translate>
+                        <translate-i18n key="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</translate-i18n>
                         <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" />
@@ -41,13 +41,13 @@ <h3 class="tag tag-primary">
                         <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" 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>
+                            <span *ngIf="providerForm.get('file').value" class="custom-file-control">{{ providerForm.get('file').value }}</span>
                         </label>
                     </div>
                 </div>
                 <div class="text-center">
                     &mdash;
-                    <translate key="label.or">OR</translate>
+                    <translate-i18n key="label.or">OR</translate-i18n>
                     &mdash;
                 </div>
                 <div class="form-group">
@@ -55,7 +55,7 @@ <h3 class="tag tag-primary">
                     <input id="url" type="text" class="form-control" placeholder="" formControlName="url" />
                 </div>
                 <div class="alert alert-danger" role="alert">
-                    <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>
+                    <span translate="message.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 1776a1db2..0810c2e3b 100644
--- a/ui/src/app/metadata/resolver/container/wizard.component.html
+++ b/ui/src/app/metadata/resolver/container/wizard.component.html
@@ -5,10 +5,12 @@
                 <div class="col-md-12">
                     <span class="display-6" role="heading" aria-level="1">
                         <i class="fa fa-fw fa-plus-square"></i>
-                        <translate key="message.add-new-md-resolver">Add a new metadata source</translate>
+                        <translate-i18n key="message.add-new-md-resolver">Add a new metadata source</translate-i18n>
                         &ndash; {{ (currentPage$ | async).label }} ({{ (resolver$ | async).serviceProviderName }})
                         <span class="pull-right">
-                            (<translate key="message.wizard-status">Step {{ wizardIndex$ | async }} of {{ wizard.length + 1 }}</translate>)
+                            (<translate-i18n key="message.wizard-status" params="{ index: wizardIndex$ | async, length: wizardLength }">
+                                Step {{ wizardIndex }} of {{ wizard.length + 1 }}
+                            </translate-i18n>)
                         </span>
                     </span>
                 </div>
diff --git a/ui/src/app/metadata/resolver/container/wizard.component.ts b/ui/src/app/metadata/resolver/container/wizard.component.ts
index cdb75652b..e8efa06c3 100644
--- a/ui/src/app/metadata/resolver/container/wizard.component.ts
+++ b/ui/src/app/metadata/resolver/container/wizard.component.ts
@@ -46,6 +46,7 @@ export class WizardComponent implements OnInit, OnDestroy, CanComponentDeactivat
     latest: MetadataResolver;
 
     wizardIndex$: Observable<number>;
+    wizardIndex: number;
     currentPage$: Observable<any>;
     wizard$: Observable<any[]>;
     wizard: EditorFlowDefinition[];
@@ -70,6 +71,8 @@ export class WizardComponent implements OnInit, OnDestroy, CanComponentDeactivat
         this.currentPage$ = this.wizardIndex$.pipe(map(index => WizardDef.find(r => r.index === index)));
         this.wizard = WizardDef;
 
+        this.wizardIndex$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(i => this.wizardIndex = i);
+
         this.saved$ = this.store.select(fromEditor.getEditorIsSaved);
 
         this.store.select(fromEditor.getEditorIsSaving).pipe(takeUntil(this.ngUnsubscribe)).subscribe(saving => this.saving = saving);
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 0f5c453d2..dd6068077 100644
--- a/ui/src/app/schema-form/widget/array/array.component.html
+++ b/ui/src/app/schema-form/widget/array/array.component.html
@@ -5,16 +5,16 @@
         </label>
         &nbsp;
         <button (click)="addItem()" class="btn btn-success btn-sm array-add-button">
-            <translate key="action.add">Add</translate> &nbsp;
+            <translate-i18n key="action.add">Add</translate-i18n> &nbsp;
             <i class="fa fa-plus" aria-hidden="true"></i>
         </button>
         &nbsp;
         <span class="text-right" *ngIf="schema.description">
             <ng-template #tooltip>
-                <translate [key]="schema.description"></translate>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
-            <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>
+            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip"
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </div>
     <div *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex" class="mt-2">
@@ -29,6 +29,6 @@
         </div>
     </div>
     <span *ngIf="schema.description" class="sr-only">
-        <translate [key]="schema.description"></translate>
+        <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
     </span>
 </div>
\ No newline at end of file
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 b6c261cd8..478fd0555 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
@@ -3,12 +3,12 @@
         <span [translate]="schema.title">{{ schema.title }}</span>
         <span *ngIf="schema.description">
             <ng-template #tooltip translate="tooltip.description">
-                <translate [key]="schema.description">{{ schema.description }}</translate>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <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>
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
@@ -21,7 +21,7 @@
                 [value]="option.enum[0]"
                 type="radio"
                 [attr.disabled]="schema.readOnly">
-            <translate [key]="option.description">{{ option.description }}</translate>
+            <translate-i18n [key]="option.description">{{ option.description }}</translate-i18n>
         </label>
     </div>
     <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
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 793f794a5..e33c122b6 100644
--- a/ui/src/app/schema-form/widget/check/checkbox.component.html
+++ b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -16,10 +16,10 @@
             </div>
             <div>
                 <ng-template #tooltip>
-                    <translate [key]="schema.description">{{ schema.description }}</translate>
+                    <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
                 </ng-template>
-                <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>
+                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip"
+                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
             </div>
         </div>
     </ng-container>
@@ -32,7 +32,7 @@
                     [attr.disabled]="schema.readOnly?true:null"
                     (change)="onCheck($event.target)"
                     [attr.checked]="checked[option.enum[0]] ? true : null">
-                <translate [key]="option.description">{{ option.description }}</translate>
+                <translate-i18n [key]="option.description">{{ option.description }}</translate-i18n>
             </label>
         </div>
     </ng-container>
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 3cd151b6b..2100a8dd7 100644
--- a/ui/src/app/schema-form/widget/datalist/datalist.component.html
+++ b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -6,12 +6,12 @@
         </span>
         <span *ngIf="schema.description">
             <ng-template #tooltip>
-                <translate key="tooltip.description">{{ schema.description }}</translate>
+                <translate-i18n key="tooltip.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <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>
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
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 26e3481b5..c4bf4cae9 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
@@ -4,15 +4,15 @@
             <div>
                 <label [attr.for]="id" class="d-flex justify-content-start control-label">
                     <span>
-                        <translate key="action.search-by">Search By</translate> <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
+                        <translate-i18n key="action.search-by">Search By</translate-i18n> <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
                     <span>
                         <ng-template #tooltipBy translate="tooltip.description">
-                            <translate key="action.search-by">Search By</translate>
+                            <translate-i18n key="action.search-by">Search By</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipBy"
-                            i18n-aria-label="@@tooltip.instruction"
-                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           
+                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </label>
                 <div ngbDropdown>
@@ -40,19 +40,19 @@
             <div>
                 <label for="targetInput" class="d-flex justify-content-start control-label">
                     <span>
-                        <translate key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate>
+                        <translate-i18n key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate-i18n>
                         <i class="fa fa-asterisk text-danger"
                             aria-hidden="true"
                             *ngIf="entityAttributesFilterTargetType !== 'ENTITY'"></i>
                     </span>
                     <span>
                         <ng-template #tooltipCriteria>
-                            <translate key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate>
+                            <translate-i18n key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipCriteria"
-                            i18n-aria-label="@@tooltip.instruction"
-                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                           
+                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </label>
                 <div class="d-flex justify-content-between">
@@ -74,7 +74,7 @@
                             <p id="targetInput" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
                             <small id="script-help" class="text-danger">
                                 <ng-container *ngIf="script.invalid && script.touched">
-                                    <translate key="message.required-for-scripts">Required for Scripts</translate>
+                                    <translate-i18n key="message.required-for-scripts">Required for Scripts</translate-i18n>
                                 </ng-container>
                                 &nbsp;
                             </small>
@@ -82,7 +82,7 @@
                         <ng-container *ngSwitchCase="'REGEX'">
                             <input id="targetInput" class="form-control" type="text" [formControl]="script" name="script" />
                             <small id="regex-help" class="text-danger">
-                                <translate key="message.required-for-regex">Required for Regex</translate>
+                                <translate-i18n key="message.required-for-regex">Required for Regex</translate-i18n>
                                 &nbsp;
                             </small>
                         </ng-container>
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 a83c51849..27a73fa09 100644
--- a/ui/src/app/schema-form/widget/number/number.component.html
+++ b/ui/src/app/schema-form/widget/number/number.component.html
@@ -3,12 +3,12 @@
         <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
             <ng-template #tooltip translate="tooltip.description">
-                <translate [key]="schema.description">{{ schema.description }}</translate>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <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>
+               
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </label>
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
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 3ac2e4070..4bfa50f25 100644
--- a/ui/src/app/schema-form/widget/select/select.component.html
+++ b/ui/src/app/schema-form/widget/select/select.component.html
@@ -1,17 +1,17 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="horizontal control-label" *ngIf="schema.title">
         <span>
-            <translate [key]="schema.title">{{ schema.title }}</translate>
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
             <ng-template #tooltip translate="tooltip.description">
-                <translate [key]="schema.description">{{ schema.description }}</translate>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <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>
+               
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">
@@ -23,8 +23,8 @@
         class="form-control"
         [attr.aria-label]="schema.title">
         <option disabled selected>
-            <translate *ngIf="schema.placeholder">{{ schema.placeholder }}</translate>
-            <translate *ngIf="!schema.placeholder">{{ schema.title }}</translate>
+            <translate-i18n *ngIf="schema.placeholder">{{ schema.placeholder }}</translate-i18n>
+            <translate-i18n *ngIf="!schema.placeholder">{{ schema.title }}</translate-i18n>
         </option>
         <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
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 d82019f6e..6095ac375 100644
--- a/ui/src/app/schema-form/widget/string/string.component.html
+++ b/ui/src/app/schema-form/widget/string/string.component.html
@@ -1,14 +1,14 @@
 <div class="widget form-group" [class.d-none]="this.getInputType() === 'hidden'">
     <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>
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n> <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
             <ng-template #tooltip translate="tooltip.description">
-                <translate [key]="schema.description">{{ schema.description }}</translate>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <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>
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
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 f8ec75ebe..f2721ed54 100644
--- a/ui/src/app/schema-form/widget/textarea/textarea.component.html
+++ b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -1,20 +1,20 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
         <span>
-            <translate [key]="schema.title">{{ schema.title }}</translate>
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
             <ng-template #tooltip translate="tooltip.description">
-                <translate [key]="schema.description">{{ schema.description }}</translate>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <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>
+               
+                [attr.aria-label]="'tooltip.instruction' | translate"></i>
         </span>
     </label>
-    <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{schema.description}}</span>
+    <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <textarea [attr.readonly]="schema.readOnly?true:null"
         [name]="name"
         class="text-widget textarea-widget form-control"
diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html
index 9921f2ade..9628313bf 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>
-                    <translate key="action.back">Back</ng-container>
+                    <translate-i18n key="action.back">Back</translate-i18n>
                 </span>
                 <span class="label pull-right">
                     <ng-container *ngIf="(previous$ | async).index">{{ (previous$ | async).index }}. </ng-container>
@@ -36,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>
-                    <translate key="action.next">Next</ng-container>
+                    <translate-i18n key="action.next">Next</translate-i18n>
                 </span>
             </button>
         </li>
@@ -56,7 +56,7 @@ <h3 class="tag tag-primary">
                             'fa-spinner': (disabled$ | async),
                             'fa-pulse': (disabled$ | async)
                         }"></i>
-                    <translate key="action.save">Save</ng-container>
+                    <translate-i18n key="action.save">Save</translate-i18n>
                 </span>
             </button>
         </li>
diff --git a/ui/src/app/wizard/wizard.module.ts b/ui/src/app/wizard/wizard.module.ts
index 8612649b6..a02decbb8 100644
--- a/ui/src/app/wizard/wizard.module.ts
+++ b/ui/src/app/wizard/wizard.module.ts
@@ -5,6 +5,7 @@ import { EffectsModule } from '@ngrx/effects';
 
 import { WizardComponent } from './component/wizard.component';
 import { reducers } from './reducer';
+import { I18nModule } from '../i18n/i18n.module';
 
 @NgModule({
     declarations: [
@@ -12,7 +13,8 @@ import { reducers } from './reducer';
     ],
     entryComponents: [],
     imports: [
-        CommonModule
+        CommonModule,
+        I18nModule
     ],
     exports: [
         WizardComponent
diff --git a/ui/src/assets/schema/provider/metadata-provider.schema.json b/ui/src/assets/schema/provider/metadata-provider.schema.json
index e11a3cc30..c0dd6b77c 100644
--- a/ui/src/assets/schema/provider/metadata-provider.schema.json
+++ b/ui/src/assets/schema/provider/metadata-provider.schema.json
@@ -6,7 +6,7 @@
     },
     "properties": {
         "name": {
-            "title": "Metadata Provider Name (Dashboard Display Only)",
+            "title": "label.metadata-provider-name-dashboard-display-only",
             "description": "Metadata Provider Name",
             "type": "string",
             "widget": {