fix(table): change sorted arial label and move myintl to docs (#1188)

projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.ts

@@ -1,9 +1,5 @@
-import { Component, Injectable } from '@angular/core';
-import {
-    NxSortHeaderIntl,
-    SortDirection,
-    SortEvent,
-} from '@aposin/ng-aquila/table';
+import { Component } from '@angular/core';
+import { SortDirection, SortEvent } from '@aposin/ng-aquila/table';
 
 interface Contract {
     product: string;
@@ -15,22 +11,13 @@ interface Contract {
     statusText: string;
 }
 
-@Injectable()
-export class MyIntl extends NxSortHeaderIntl {
-    sortAscendingAriaLabel = 'click to sort ascending';
-    sortDescendingAriaLabel = 'click to sort descending';
-    sortedAscendingAriaLabel = 'sorted ascending by';
-    sortedDescendingAriaLabel = 'sorted descending by';
-}
-
 /**
  * @title Sorting example
  */
 @Component({
     selector: 'table-sorting-example',
     templateUrl: './table-sorting-example.html',
     styleUrls: ['table-sorting-example.css'],
-    providers: [{ provide: NxSortHeaderIntl, useClass: MyIntl }],
 })
 export class TableSortingExampleComponent {
     tableElements: Contract[] = [

projects/ng-aquila/src/table/sort-header/sort-header-intl.ts

@@ -14,7 +14,7 @@ export class NxSortHeaderIntl {
     /** The aria label for a header that can be clicked to sort descending. */
     sortDescendingAriaLabel = 'click to sort descending';
     /** The aria label for a column that is sorted ascending. */
-    sortedAscendingAriaLabel = 'sorted ascending by';
+    sortedAscendingAriaLabel = 'sorted ascending';
     /** The aria label for a column that is sorted descending. */
-    sortedDescendingAriaLabel = 'sorted descending by';
+    sortedDescendingAriaLabel = 'sorted descending';
 }

projects/ng-aquila/src/table/table.md

@@ -58,12 +58,33 @@ Application developers can implement custom column behavior, such as column hidi
 Additionally, if you need to truncate text when the column is resized and the content overflows, you can use the `nxTableCellClip` directive.
  <!-- example(table-column-resize) -->
 
+### Localization
+For **localization** please use the provider `NxHeaderSortIntl` which contains some labels for screen reader users. By default the labels are in english.
+
+```ts
+@Injectable()
+export class MyIntl extends NxSortHeaderIntl {
+    sortAscendingAriaLabel = 'klick, um absteigend zu sortieren';
+    sortDescendingAriaLabel = 'klick, um absteigend zu sortieren';
+    sortedAscendingAriaLabel = 'aufsteigend sortiert nach';
+    sortedDescendingAriaLabel = 'absteigend sortiert nach';
+}
+
+@Component({
+    ...
+    providers: [
+        { 
+            provide: NxSortHeaderIntl, 
+            useClass: MyIntl 
+        }
+    ],
+})
+```
+
 ### Sorting header
 
 This example shows how you can implement a basic sorting functionality for a table with `nxSort` and `nxSortHeaderCell`. As we don't know how your data looks like, you can implement the actual sorting function by yourself and call the function every time an `(sortChange)` event is outputted.
 
-For **localization** please use the provider `NxHeaderSortIntl` which contains some labels for screen reader users. By default the labels are in english. This is also shown in the following example.
-
 <!-- example(table-sorting) -->
 
 ### Advanced example: Combine sorting, filtering and pagination
@@ -105,4 +126,4 @@ Form elements can also be added to the table:
 
 <!-- example(table-form-elements) -->
 
-</div>
+</div>