Skip to content

Commit 5f64f1c

Browse files
AnthonyNahasAnthonyNahas
committed
demo(app): added info exmaple component to the demo app
1 parent 94c3b84 commit 5f64f1c

10 files changed

+201
-6
lines changed

‎demo/src/app/app.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Component, Inject, PLATFORM_ID} from '@angular/core';
22
import {Router, NavigationEnd} from '@angular/router';
33
import {isPlatformBrowser} from '@angular/common';
44
import {filter} from 'rxjs/operators';
5+
import {TranslateService} from '@ngx-translate/core';
56

67
@Component({
78
selector: 'app-root',
@@ -10,7 +11,12 @@ import {filter} from 'rxjs/operators';
1011
})
1112
export class AppComponent {
1213

13-
constructor(private router: Router, @Inject(PLATFORM_ID) private platformId: Object) {
14+
constructor(private router: Router,
15+
private translate: TranslateService,
16+
@Inject(PLATFORM_ID) private platformId: Object) {
17+
18+
this.translate.addLangs(['en', 'de', 'fr']);
19+
this.translate.setDefaultLang('de');
1420

1521
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
1622
if (isPlatformBrowser(this.platformId)) {

‎demo/src/app/app.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ export function HttpLoaderFactory(http: HttpClient) {
2020
return new TranslateHttpLoader(http);
2121
}
2222

23+
export function createTranslateLoader(http: HttpClient) {
24+
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
25+
}
2326

2427
@NgModule({
2528
declarations: [
@@ -35,7 +38,7 @@ export function HttpLoaderFactory(http: HttpClient) {
3538
TranslateModule.forRoot({
3639
loader: {
3740
provide: TranslateLoader,
38-
useFactory: HttpLoaderFactory,
41+
useFactory: (createTranslateLoader),
3942
deps: [HttpClient]
4043
}
4144
}),

‎demo/src/app/examples/examples-routing.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import {RouterModule} from '@angular/router';
22
import {NgModule} from '@angular/core';
33
import {ExamplesComponent} from './examples.component';
4+
import {InfoCompExampleComponent} from './info-comp-example/info-comp-example.component';
45

56
@NgModule({
67
imports: [RouterModule.forChild([
7-
{path: '', component: ExamplesComponent}
8+
{path: '', component: ExamplesComponent},
9+
{path: 'mat-password-strength-info', component: InfoCompExampleComponent},
810
])],
911
exports: [RouterModule]
1012
})

‎demo/src/app/examples/examples.component.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ <h1>Explore the library and try these examples <3</h1>
77
<section class="home">
88
<div class="container">
99

10+
<mat-card style="margin-bottom: 2rem">
11+
<mat-card-title>
12+
Check the info component examples here
13+
</mat-card-title>
14+
<mat-card-actions fxLayoutAlign="end">
15+
<button mat-raised-button
16+
routerLink="mat-password-strength-info"
17+
color="accent">
18+
click here
19+
</button>
20+
</mat-card-actions>
21+
</mat-card>
22+
1023
<mat-card>
1124
<mat-card-title>#1</mat-card-title>
1225
<mat-card-subtitle>stand alone password component, digit char is optional</mat-card-subtitle>

‎demo/src/app/examples/examples.module.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,28 @@ import {ExamplesComponent} from './examples.component';
44
import {ExamplesRoutingModule} from './examples-routing.module';
55
import {AppSharedModule} from '../shared';
66
import {MarkdownModule} from 'ngx-markdown';
7+
import {InfoCompExampleComponent} from './info-comp-example/info-comp-example.component';
8+
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
9+
import {MatRadioModule} from '@angular/material';
10+
import {HttpClient} from '@angular/common/http';
11+
import {createTranslateLoader} from '../app.module';
712

813
@NgModule({
914
imports: [
1015
CommonModule,
1116
MarkdownModule.forChild(),
17+
TranslateModule.forChild({
18+
loader: {
19+
provide: TranslateLoader,
20+
useFactory: (createTranslateLoader),
21+
deps: [HttpClient]
22+
}
23+
}),
1224
ExamplesRoutingModule,
13-
AppSharedModule
25+
AppSharedModule,
26+
MatRadioModule
1427
],
15-
declarations: [ExamplesComponent]
28+
declarations: [ExamplesComponent, InfoCompExampleComponent]
1629
})
1730
export class ExamplesModule {
1831
}

‎demo/src/app/examples/info-comp-example/info-comp-example.component.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<div class="jumbotron jumbotron-fluid">
2+
<div class="container">
3+
<h1>Explore the info component</h1>
4+
</div>
5+
</div>
6+
7+
<div class="container">
8+
9+
<mat-card fxLayoutAlign="center center">
10+
<mat-card-content>
11+
<div>
12+
13+
<!--password input filed-->
14+
<mat-form-field appearance="outline" [color]="passwordComponent.color">
15+
<mat-label>Password</mat-label>
16+
<input matInput #password
17+
[type]="inputType"
18+
required
19+
placeholder="Password">
20+
<mat-hint align="end" aria-live="polite">
21+
{{password.value.length}} / 25
22+
</mat-hint>
23+
</mat-form-field>
24+
25+
<!--@angular-material-extensions/password-strength's main component-->
26+
<mat-password-strength #passwordComponent
27+
[password]="password.value">
28+
</mat-password-strength>
29+
30+
<mat-card class="example-info-card">
31+
<mat-card-header>
32+
<mat-card-title>Ex.1 - Default input</mat-card-title>
33+
<mat-card-subtitle>info component with default messages</mat-card-subtitle>
34+
</mat-card-header>
35+
<mat-card-content>
36+
<!--Password's strength info-->
37+
<mat-password-strength-info
38+
[passwordComponent]="passwordComponent">
39+
</mat-password-strength-info>
40+
</mat-card-content>
41+
<mat-card-footer>
42+
<markdown src="assets/md/examples/info/e1.md"></markdown>
43+
</mat-card-footer>
44+
</mat-card>
45+
46+
<mat-card class="example-info-card">
47+
<mat-card-header>
48+
<mat-card-title>Ex.2 - Custom messages</mat-card-title>
49+
<mat-card-subtitle>info component with custom messages</mat-card-subtitle>
50+
</mat-card-header>
51+
<mat-card-content>
52+
<!--Password's strength info-->
53+
<mat-password-strength-info
54+
lowerCaseCriteriaMsg="your best lower case criteria msg"
55+
upperCaseCriteriaMsg="your best upper case criteria msg"
56+
digitsCriteriaMsg="your best digit char criteria msg"
57+
specialCharsCriteriaMsg="your best special char criteria msg"
58+
minCharsCriteriaMsg="your best min char criteria msg"
59+
[passwordComponent]="passwordComponent">
60+
</mat-password-strength-info>
61+
</mat-card-content>
62+
<mat-card-footer>
63+
<markdown src="assets/md/examples/info/e2.md"></markdown>
64+
</mat-card-footer>
65+
</mat-card>
66+
67+
<mat-card class="example-info-card">
68+
<mat-card-header>
69+
<mat-card-title>Ex.3 - Using ngx-translate</mat-card-title>
70+
<mat-card-subtitle>store your msgs in an appropriate i18n json file</mat-card-subtitle>
71+
</mat-card-header>
72+
<mat-card-content>
73+
74+
<mat-radio-group [(ngModel)]="lang" (change)="changeLanguage($event)">
75+
<mat-radio-button value="en">English</mat-radio-button>
76+
<mat-radio-button value="de">German</mat-radio-button>
77+
<mat-radio-button value="fr">French</mat-radio-button>
78+
</mat-radio-group>
79+
80+
<!--Password's strength info-->
81+
<mat-password-strength-info
82+
[lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
83+
[upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG'| translate"
84+
[digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG'| translate"
85+
[specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
86+
[minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate: {value:passwordComponent.min}"
87+
[passwordComponent]="passwordComponent">
88+
</mat-password-strength-info>
89+
</mat-card-content>
90+
<mat-card-footer>
91+
<markdown src="assets/md/examples/info/e3.md"></markdown>
92+
</mat-card-footer>
93+
</mat-card>
94+
95+
</div>
96+
</mat-card-content>
97+
</mat-card>
98+
99+
</div>

‎demo/src/app/examples/info-comp-example/info-comp-example.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
mat-form-field {
2+
width: 100%;
3+
}
4+
5+
.mat-radio-button {
6+
padding-right: 16px;
7+
}
8+
9+
.example-info-card {
10+
margin-bottom: 2rem;
11+
}

‎demo/src/app/examples/info-comp-example/info-comp-example.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { InfoCompExampleComponent } from './info-comp-example.component';
4+
5+
describe('InfoCompExampleComponent', () => {
6+
let component: InfoCompExampleComponent;
7+
let fixture: ComponentFixture<InfoCompExampleComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ InfoCompExampleComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(InfoCompExampleComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎demo/src/app/examples/info-comp-example/info-comp-example.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {Component, Input} from '@angular/core';
2+
import {TranslateService} from '@ngx-translate/core';
3+
import {MatRadioChange} from '@angular/material';
4+
5+
@Component({
6+
selector: 'app-info-comp-example',
7+
templateUrl: './info-comp-example.component.html',
8+
styleUrls: ['./info-comp-example.component.scss']
9+
})
10+
export class InfoCompExampleComponent {
11+
12+
lang: string;
13+
inputType = 'password';
14+
15+
constructor(private translate: TranslateService) {
16+
this.lang = this.translate.currentLang ? this.translate.currentLang : this.translate.getDefaultLang();
17+
}
18+
19+
changeLanguage(event: MatRadioChange) {
20+
this.translate.use(event.value);
21+
}
22+
23+
}

‎demo/src/app/shared/shared.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export function hljsLanguages() {
6666
MatListModule
6767
],
6868
exports: [
69+
TranslateModule,
6970
HeaderComponent,
7071
FooterComponent,
7172
ContentWrapperComponent,
@@ -88,7 +89,6 @@ export function hljsLanguages() {
8889
MatToolbarModule,
8990
MatTabsModule,
9091
MatListModule,
91-
TranslateModule
9292
],
9393
declarations: [HeaderComponent, FooterComponent, ContentWrapperComponent],
9494
providers: [],

0 commit comments

Comments
 (0)