+ +
+ + + + + + + + + - -
- - - - - - - - - - - - {{ title }} demo app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - - - Github repository - - - - - - - - - - - - Library Documentation - - - - - - - - - - - - npm - - - - - - -
- -
- - -

Install

-

run the following command in your favorite terminal to install the library

- - -
- 
ng add @angular-material-extensions/select-country
-
- -
- - - - -

Usage

- -
- - -
- - - -

Default Value

+ {{ title }} demo app is running! + + + + +
+ + +

Resources

+

Here are some links to help you get started:

+ +
+ + + + + + Github repository + + + + + -
- - -
+ + + + + + Library Documentation + + + + + - + + + + + + npm + + + + + +
-

Disabled

+
+ +

Install

+

+ run the following command in your favorite terminal to install the library +

-
- - + +
+ 
ng add @angular-material-extensions/select-country
- - - -

Required

- -
- - +
+ + + + +

Usage

+ +
+ + +
+ + + +

Default Value

+ +
+ + +
+ + + +

Disabled

+ +
+ + +
+ + + +

Required

+ +
+ + +
+ + + +

Loading countries (e.g: Http...)

+ +
+ + +
+ + + +

Show calling code

+ +
+ + +
+ + + +

Reactive Forms and default value

+ +
+
+ + +
+
+ + + +

Usage with predefined countries

+ +
+ + +
+ + + +

Usage changing language

+ +
+
+ + Choose language + + Spanish + English + + + + Choose showCallingCode + + true + false + +
- - - -

Loading countries (e.g: Http...)

- -
- - + + +
+ + + +

Usage mat error

+ +
+ + +
+ +

+ For more info, please read the official readme - see the links above GITHUB + - DOCS - NPM +

+ + + +

Next Steps

+

+ What do you want to do next with your app? Here are some awesome suggested + libraries for you! +

+ + + +
+
+ + + + + ngx-auth-firebaseui
- - -

Show calling code

- -
- - +
+ + + + + password-strength
- - -

Reactive Forms and default value

- -
-
- - -
+
+ + + + + google-maps-autocomplete
- - -

Usage with predefined countries

- -
- - +
+ + + + + pages
- - -

Usage changing language

- -
-
- - Choose language - - Spanish - English - - - - Choose showCallingCode - - true - false - - -
- - +
+ + + + + links-preview
+
+ + +
+ 
ng add ngx-auth-firebaseui
+ 
+ng add @angular-material-extensions/password-strength
+ 
+ng add @angular-material-extensions/google-maps-autocomplete
+ 
ng add @angular-material-extensions/pages
+ 
+ng add @angular-material-extensions/links-preview
+
+ + +
+ + + + + - - -

For more info, please read the official readme - see the links above GITHUB - DOCS - NPM

- - - -

Next Steps

-

What do you want to do next with your app? Here are some awesome suggested libraries for you!

- - - -
-
- - - - - ngx-auth-firebaseui -
- -
- - - - - password-strength -
- -
- - - - - google-maps-autocomplete -
- -
- - - - - pages -
- -
- - - + + + + + - links-preview -
-
+ + + + + - -
- 
ng add ngx-auth-firebaseui
- 
ng add @angular-material-extensions/password-strength
- 
ng add @angular-material-extensions/google-maps-autocomplete
- 
ng add @angular-material-extensions/pages
- 
ng add @angular-material-extensions/links-preview
-
+ + + + + - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
@@ -736,5 +1037,4 @@

Next Steps

- diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5d2a19c..f5c1162 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,61 +1,72 @@ -import { Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; +import { Component, OnInit } from "@angular/core"; +import { + FormControl, + FormGroup, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + Validators, +} from "@angular/forms"; -import { Country } from '@angular-material-extensions/select-country'; -import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'; +import { Country } from "@angular-material-extensions/select-country"; +import { Angulartics2GoogleAnalytics } from "angulartics2/ga"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.scss"], }) export class AppComponent implements OnInit { - title = 'select-country'; + title = "select-country"; countryFormControl = new UntypedFormControl(); - countryRequiredFormControl = new UntypedFormControl(null, [Validators.required]); + countryRequiredFormControl = new UntypedFormControl(null, [ + Validators.required, + ]); countryFormGroup: UntypedFormGroup; - languageSelected = 'es'; - showCallingCode = 'false'; + languageSelected = "es"; + showCallingCode = "false"; defaultValue: Country = { - name: 'Deutschland', - alpha2Code: 'DE', - alpha3Code: 'DEU', - numericCode: '276', - callingCode: '+49' + name: "Deutschland", + alpha2Code: "DE", + alpha3Code: "DEU", + numericCode: "276", + callingCode: "+49", }; + countryMandatoryFormControl = new FormControl(null, [Validators.required]); + predefinedCountries: Country[] = [ { - name: 'Germany', - alpha2Code: 'DE', - alpha3Code: 'DEU', - numericCode: '276', - callingCode: '+49' + name: "Germany", + alpha2Code: "DE", + alpha3Code: "DEU", + numericCode: "276", + callingCode: "+49", }, { - name: 'Greece', - alpha2Code: 'GR', - alpha3Code: 'GRC', - numericCode: '300', - callingCode: '+30' + name: "Greece", + alpha2Code: "GR", + alpha3Code: "GRC", + numericCode: "300", + callingCode: "+30", }, { - name: 'France', - alpha2Code: 'FR', - alpha3Code: 'FRA', - numericCode: '250', - callingCode: '+33' + name: "France", + alpha2Code: "FR", + alpha3Code: "FRA", + numericCode: "250", + callingCode: "+33", }, { - name: 'Belgium', - alpha2Code: 'BE', - alpha3Code: 'BEL', - numericCode: '056', - callingCode: '+32' - } + name: "Belgium", + alpha2Code: "BE", + alpha3Code: "BEL", + numericCode: "056", + callingCode: "+32", + }, ]; constructor( @@ -70,32 +81,39 @@ export class AppComponent implements OnInit { country: [ { value: { - name: 'Deutschland', - alpha2Code: 'DE', - alpha3Code: 'DEU', - numericCode: '276', - callingCode: '+49' + name: "Deutschland", + alpha2Code: "DE", + alpha3Code: "DEU", + numericCode: "276", + callingCode: "+49", }, - disabled: false - } - ] + disabled: false, + }, + ], }); - this.countryFormGroup - .get('country') - .valueChanges.subscribe((country) => + this.countryMandatoryFormControl.valueChanges.subscribe((country) => { console.log( - 'this.countryFormGroup.get(\'country\').valueChanges', + "this.countryMandatoryFormControl.get('country').valueChanges", country - ) - ); + ); + }); + + this.countryFormGroup + .get("country") + .valueChanges.subscribe((country) => + console.log( + "this.countryFormGroup.get('country').valueChanges", + country + ) + ); this.countryFormControl.valueChanges.subscribe((country) => - console.log('this.countryFormControl.valueChanges', country) + console.log("this.countryFormControl.valueChanges", country) ); } onCountrySelected($event: Country): void { - console.log($event); + console.log("onCountrySelected", $event); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f3446f6..c33eb4a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,22 +1,22 @@ -import { NgModule } from '@angular/core'; -import { HttpClientModule } from '@angular/common/http'; -import { ReactiveFormsModule } from '@angular/forms'; -import { MatSelectModule } from '@angular/material/select'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { FlexLayoutModule } from '@angular/flex-layout'; +import { NgModule } from "@angular/core"; +import { HttpClientModule } from "@angular/common/http"; +import { ReactiveFormsModule } from "@angular/forms"; +import { MatSelectModule } from "@angular/material/select"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { FlexLayoutModule } from "@angular/flex-layout"; -import { MatSelectCountryModule } from '@angular-material-extensions/select-country'; -import { MarkdownModule } from 'ngx-markdown'; -import { Angulartics2Module } from 'angulartics2'; +import { MatSelectCountryModule } from "@angular-material-extensions/select-country"; +import { MarkdownModule } from "ngx-markdown"; +import { Angulartics2Module } from "angulartics2"; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; +import { AppRoutingModule } from "./app-routing.module"; +import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [ - BrowserModule.withServerTransition({ appId: 'serverApp' }), + BrowserModule.withServerTransition({ appId: "serverApp" }), BrowserAnimationsModule, HttpClientModule, AppRoutingModule, @@ -25,7 +25,7 @@ import { AppComponent } from './app.component'; MatSelectModule, Angulartics2Module.forRoot(), MarkdownModule.forRoot(), - MatSelectCountryModule.forRoot('de'), + MatSelectCountryModule.forRoot("de"), ], providers: [], bootstrap: [AppComponent],