docs: move demo application to standalone (#123)

json-derulo · web-flow · commit df302ecfe5b3 · 2023-08-15T19:34:52.000+02:00
Co-authored-by: Daniel Kimmich &lt;json-derulo@users.noreply.github.com&gt;
diff --git a/projects/angular-intl-demo/src/app/app.component.ts b/projects/angular-intl-demo/src/app/app.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [MatToolbarModule, MatButtonModule, RouterLink, RouterOutlet],
 })
 export class AppComponent {}
diff --git a/projects/angular-intl-demo/src/app/app.module.ts b/projects/angular-intl-demo/src/app/app.module.ts
diff --git a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { MarkdownModule } from 'ngx-markdown';
 
 @Component({
   selector: 'app-getting-started',
   templateUrl: './getting-started.component.html',
   styleUrls: ['./getting-started.component.scss'],
+  standalone: true,
+  imports: [MarkdownModule],
 })
 export class GettingStartedComponent {}
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
@@ -1,11 +1,26 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { IntlCountryPipe } from '../../../../../angular-ecmascript-intl/src/lib/country/intl-country.pipe';
 import { languages } from '../../languages';
 import { countries } from './countries';
 
 @Component({
   selector: 'app-country',
   templateUrl: './country.component.html',
   styleUrls: ['./country.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    NgFor,
+    MatOptionModule,
+    IntlCountryPipe,
+  ],
 })
 export class CountryComponent {
   languages = languages;
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
@@ -1,11 +1,28 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { IntlCurrencyPipe } from '../../../../../angular-ecmascript-intl/src/lib/currency/intl-currency.pipe';
 import { languages } from '../../languages';
 import { currencies } from './currencies';
 
 @Component({
   selector: 'app-currency',
   templateUrl: './currency.component.html',
   styleUrls: ['./currency.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatSelectModule,
+    NgFor,
+    MatOptionModule,
+    IntlCurrencyPipe,
+  ],
 })
 export class CurrencyComponent {
   enteredNumber = '0.24';
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
@@ -1,11 +1,32 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { IntlDatePipe } from '../../../../../angular-ecmascript-intl/src/lib/date/intl-date.pipe';
 import { languages } from '../../languages';
 import { getDateString } from '../date-utils';
 
 @Component({
   selector: 'app-date',
   templateUrl: './date.component.html',
   styleUrls: ['./date.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSelectModule,
+    MatOptionModule,
+    NgFor,
+    IntlDatePipe,
+  ],
 })
 export class DateComponent {
   languages = languages;
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
@@ -1,10 +1,27 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { IntlDecimalPipe } from '../../../../../angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe';
 import { languages } from '../../languages';
 
 @Component({
   selector: 'app-decimal',
   templateUrl: './decimal.component.html',
   styleUrls: ['./decimal.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatSelectModule,
+    MatOptionModule,
+    NgFor,
+    IntlDecimalPipe,
+  ],
 })
 export class DecimalComponent {
   enteredNumber = '1024.4539';
diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
@@ -1,11 +1,28 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
-import { IntlLanguagePipeOptions } from '../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import {
+  IntlLanguagePipe,
+  IntlLanguagePipeOptions,
+} from '../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe';
 import { languages } from '../../languages';
 
 @Component({
   selector: 'app-language',
   templateUrl: './language.component.html',
   styleUrls: ['./language.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    NgFor,
+    MatOptionModule,
+    IntlLanguagePipe,
+  ],
 })
 export class LanguageComponent {
   languages = languages;
diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
@@ -1,12 +1,27 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 import { IntlListPipeOptions } from 'projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe';
+import { IntlListPipe } from '../../../../../angular-ecmascript-intl/src/lib/list/intl-list.pipe';
 import { languages } from '../../languages';
 import { list } from './list';
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    NgFor,
+    MatOptionModule,
+    IntlListPipe,
+  ],
 })
 export class ListComponent {
   languages = languages;
diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
@@ -1,10 +1,27 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { IntlPercentPipe } from '../../../../../angular-ecmascript-intl/src/lib/percent/intl-percent.pipe';
 import { languages } from '../../languages';
 
 @Component({
   selector: 'app-percent',
   templateUrl: './percent.component.html',
   styleUrls: ['./percent.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatSelectModule,
+    MatOptionModule,
+    NgFor,
+    IntlPercentPipe,
+  ],
 })
 export class PercentComponent {
   enteredNumber = '0.24';
diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.component.ts b/projects/angular-intl-demo/src/app/pipes/pipes.component.ts
@@ -1,10 +1,18 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { MatTabsModule } from '@angular/material/tabs';
+import {
+  ActivatedRoute,
+  RouterLink,
+  RouterLinkActive,
+  RouterOutlet,
+} from '@angular/router';
 
 @Component({
   selector: 'app-pipes',
   templateUrl: './pipes.component.html',
   styleUrls: ['./pipes.component.scss'],
+  standalone: true,
+  imports: [MatTabsModule, RouterLink, RouterLinkActive, RouterOutlet],
 })
 export class PipesComponent {
   constructor(readonly route: ActivatedRoute) {}
diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts
@@ -20,18 +20,6 @@ import { RelativeTimeComponent } from './relative-time/relative-time.component';
 import { UnitComponent } from './unit/unit.component';
 
 @NgModule({
-  declarations: [
-    DateComponent,
-    LanguageComponent,
-    DecimalComponent,
-    PercentComponent,
-    CurrencyComponent,
-    PipesComponent,
-    CountryComponent,
-    UnitComponent,
-    ListComponent,
-    RelativeTimeComponent,
-  ],
   imports: [
     CommonModule,
     PipesRoutingModule,
@@ -42,6 +30,16 @@ import { UnitComponent } from './unit/unit.component';
     MatInputModule,
     MatButtonModule,
     MatIconModule,
+    DateComponent,
+    LanguageComponent,
+    DecimalComponent,
+    PercentComponent,
+    CurrencyComponent,
+    PipesComponent,
+    CountryComponent,
+    UnitComponent,
+    ListComponent,
+    RelativeTimeComponent,
   ],
 })
 export class PipesModule {}
diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
@@ -1,12 +1,33 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { IntlRelativeTimePipeOptions } from 'projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe';
+import { IntlRelativeTimePipe } from '../../../../../angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe';
 import { languages } from '../../languages';
 import { getDateString } from '../date-utils';
 
 @Component({
   selector: 'app-relative-time',
   templateUrl: './relative-time.component.html',
   styleUrls: ['./relative-time.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSelectModule,
+    MatOptionModule,
+    NgFor,
+    IntlRelativeTimePipe,
+  ],
 })
 export class RelativeTimeComponent {
   selectedDate = getDateString(new Date(new Date().getTime() - 60000));
diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
@@ -1,11 +1,28 @@
+import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { IntlUnitPipe } from '../../../../../angular-ecmascript-intl/src/lib/unit/intl-unit.pipe';
 import { languages } from '../../languages';
 import { units } from './units';
 
 @Component({
   selector: 'app-unit',
   templateUrl: './unit.component.html',
   styleUrls: ['./unit.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatSelectModule,
+    NgFor,
+    MatOptionModule,
+    IntlUnitPipe,
+  ],
 })
 export class UnitComponent {
   enteredNumber = '1';
diff --git a/projects/angular-intl-demo/src/main.ts b/projects/angular-intl-demo/src/main.ts
