Skip to content

Commit 1d4fb7e

Browse files
AnthonyNahasAnthonyNahas
committed
demo(app): added a configuration component (only input)
1 parent 78f88ca commit 1d4fb7e

File tree

7 files changed

+168
-8
lines changed

7 files changed

+168
-8
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {NgModule} from '@angular/core';
2-
import {FormsModule} from '@angular/forms';
2+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
33
import {BrowserModule} from '@angular/platform-browser';
44
import {TransferHttpCacheModule} from '@nguniversal/common';
55

@@ -39,6 +39,7 @@ const googleMapsParams = {
3939
BrowserAnimationsModule,
4040
FlexLayoutModule,
4141
TransferHttpCacheModule,
42+
ReactiveFormsModule,
4243
FormsModule,
4344
HttpClientModule,
4445
AppRoutingModule,

‎demo/src/app/home/config/config.component.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<mat-card>
2+
<mat-card-header>
3+
<mat-card-title>Configuration</mat-card-title>
4+
<mat-card-subtitle>Adjust the configuration of this extensions on your own way <3</mat-card-subtitle>
5+
</mat-card-header>
6+
<mat-card-content>
7+
<mat-form-field class="full-width" [appearance]="appearance">
8+
<mat-label>addressLabelText</mat-label>
9+
<input matInput [(ngModel)]="addressLabelText" placeholder="addressLabelText">
10+
</mat-form-field>
11+
12+
<mat-form-field class="full-width" [appearance]="appearance">
13+
<mat-label>placeholderText</mat-label>
14+
<input matInput [(ngModel)]="placeholderText" placeholder="placeholderText">
15+
</mat-form-field>
16+
17+
<mat-form-field class="full-width" [appearance]="appearance">
18+
<mat-label>requiredErrorText</mat-label>
19+
<input matInput [(ngModel)]="requiredErrorText" placeholder="requiredErrorText">
20+
</mat-form-field>
21+
22+
<mat-form-field class="full-width" [appearance]="appearance">
23+
<mat-label>invalidErrorText</mat-label>
24+
<input matInput [(ngModel)]="invalidErrorText" placeholder="invalidErrorText">
25+
</mat-form-field>
26+
27+
<mat-card fxHide="true">
28+
<mat-card-header>
29+
<mat-card-title>Google Maps API</mat-card-title>
30+
<mat-card-subtitle>The component need to be re-rendered after changing these properties</mat-card-subtitle>
31+
</mat-card-header>
32+
<mat-card-content>
33+
<mat-form-field class="full-width" [appearance]="appearance">
34+
<mat-label>Enter the desired country code, e.g: en, de, fr ...</mat-label>
35+
<input matInput [(ngModel)]="country" placeholder="Enter the desired country code, e.g: en, de, fr ...">
36+
</mat-form-field>
37+
</mat-card-content>
38+
</mat-card>
39+
40+
<mat-card>
41+
<mat-card-header>
42+
<mat-card-title>Input's appearance style</mat-card-title>
43+
</mat-card-header>
44+
<mat-card-content>
45+
<mat-radio-group fxLayout="column" [(ngModel)]="appearance">
46+
<mat-radio-button *ngFor="let option of appearanceOptions"
47+
[checked]="option === appearance.toString().toLocaleLowerCase()"
48+
[value]="option.toLowerCase()">
49+
{{option}}
50+
</mat-radio-button>
51+
</mat-radio-group>
52+
</mat-card-content>
53+
</mat-card>
54+
55+
</mat-card-content>
56+
</mat-card>

‎demo/src/app/home/config/config.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.full-width {
2+
width: 100%;
3+
}

‎demo/src/app/home/config/config.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 { ConfigComponent } from './config.component';
4+
5+
describe('ConfigComponent', () => {
6+
let component: ConfigComponent;
7+
let fixture: ComponentFixture<ConfigComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ConfigComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ConfigComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, OnInit} from '@angular/core';
2+
import {Appearance} from '@angular-material-extensions/google-maps-autocomplete';
3+
4+
@Component({
5+
selector: 'app-config',
6+
templateUrl: './config.component.html',
7+
styleUrls: ['./config.component.scss']
8+
})
9+
export class ConfigComponent implements OnInit {
10+
11+
addressLabelText = 'Address';
12+
13+
placeholderText = 'Please enter the address';
14+
15+
requiredErrorText = 'The address is required';
16+
17+
invalidErrorText = 'The address is not valid';
18+
19+
country;
20+
21+
appearance = Appearance.OUTLINE;
22+
appearanceOptions = Object.keys(Appearance);
23+
24+
constructor() {
25+
}
26+
27+
ngOnInit() {
28+
}
29+
30+
}

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

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,42 @@ <h1>@angular-material-extensions/google-maps-autocomplete</h1>
7878
class="autocomplete-container"
7979
[ngStyle.xs]="{'min-width.%': 100}"
8080
[ngStyle.sm]="{'width.%': 70}">
81-
<mat-google-maps-autocomplete [appearance]="appearance.STANDARD"
82-
(onAutocompleteSelected)="onAutocompleteSelected($event)"
83-
(onLocationSelected)="onLocationSelected($event)">
81+
<mat-google-maps-autocomplete
82+
[addressLabelText]="config.addressLabelText"
83+
[placeholderText]="config.placeholderText"
84+
[requiredErrorText]="'config.requiredErrorText'"
85+
[invalidErrorText]="config.invalidErrorText"
86+
[country]="config.country"
87+
[appearance]="config.appearance"
88+
(onAutocompleteSelected)="onAutocompleteSelected($event)"
89+
(onLocationSelected)="onLocationSelected($event)">
8490
</mat-google-maps-autocomplete>
8591

92+
<mat-accordion>
93+
<mat-expansion-panel>
94+
<mat-expansion-panel-header>
95+
<mat-panel-title>
96+
@Input()
97+
</mat-panel-title>
98+
<mat-panel-description>
99+
Change the default values
100+
</mat-panel-description>
101+
</mat-expansion-panel-header>
102+
<app-config #config></app-config>
103+
</mat-expansion-panel>
104+
105+
<mat-expansion-panel fxHide="true">
106+
<mat-expansion-panel-header>
107+
<mat-panel-title>
108+
@Output()
109+
</mat-panel-title>
110+
<mat-panel-description>
111+
See the return values of the available events
112+
</mat-panel-description>
113+
</mat-expansion-panel-header>
114+
</mat-expansion-panel>
115+
</mat-accordion>
116+
86117
<!--<mat-google-maps-autocomplete country="us"-->
87118
<!--type="address"-->
88119
<!--(onAddressSelected)="onAutocompleteSelected($event)"-->
@@ -102,7 +133,7 @@ <h1>@angular-material-extensions/google-maps-autocomplete</h1>
102133
<!--tab 3 TS-->
103134
<mat-tab>
104135
<ng-template mat-tab-label>TS</ng-template>
105-
<pre><code highlight [code]="ts"></code></pre>
136+
<pre><code highlight [code]="ts" style="max-height: 700px"></code></pre>
106137
</mat-tab>
107138

108139
<!--tab 4 SCSS-->

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,24 @@ import {HomeComponent} from './home.component';
77
import {FlexLayoutModule} from '@angular/flex-layout';
88
import {AgmCoreModule} from '@agm/core';
99
import {HighlightModule} from 'ngx-highlightjs';
10-
import {MatButtonModule, MatCardModule, MatIconModule, MatTabsModule} from '@angular/material';
10+
import {
11+
MatButtonModule,
12+
MatCardModule,
13+
MatExpansionModule,
14+
MatIconModule,
15+
MatInputModule,
16+
MatRadioModule,
17+
MatTabsModule
18+
} from '@angular/material';
1119
import {MatJumbotronModule} from '@angular-material-extensions/jumbotron';
20+
import { ConfigComponent } from './config/config.component';
21+
import {FormsModule} from '@angular/forms';
1222

1323
@NgModule({
1424
imports: [
1525
CommonModule,
1626
FlexLayoutModule,
27+
FormsModule,
1728
MatGoogleMapsAutocompleteModule,
1829
HighlightModule.forRoot({theme: 'vs2015'}),
1930
HomeRoutingModule,
@@ -22,9 +33,12 @@ import {MatJumbotronModule} from '@angular-material-extensions/jumbotron';
2233
MatButtonModule,
2334
MatCardModule,
2435
MatIconModule,
25-
MatTabsModule
36+
MatTabsModule,
37+
MatExpansionModule,
38+
MatInputModule,
39+
MatRadioModule
2640
],
27-
declarations: [HomeComponent],
41+
declarations: [HomeComponent, ConfigComponent],
2842
})
2943
export class HomeModule {
3044
}

0 commit comments

Comments
 (0)