Forem: wlucha

Boost Your Angular Forms with a Powerful Country Picker

wlucha — Sat, 01 Mar 2025 20:07:33 +0000

GitHub: https://github.com/wlucha/ng-country-select
Npmjs: https://www.npmjs.com/package/@wlucha/ng-country-select

In modern web development, creating dynamic and user-friendly applications often requires integrating efficient components. One common need is a country picker for forms. With a lightweight and powerful library like Angular Material Country Autocomplete, developers can implement this feature quickly and effectively.

What is Angular Material Country Autocomplete?

This library provides an elegant and high-performance solution for adding a country selection dropdown to Angular projects. It is fully compatible with the latest Angular versions (16-19) and designed for easy integration and extensive customization.

Key Features

Multilingual Support: Includes languages like English, French, Spanish, Italian, German, Arabic, Chinese, Hindi, Bengali, Portuguese and Russian.
Auto-Generated Flag Emojis: Displays country flags based on ISO codes.
Smart Search: Allows searching by country names, Alpha2/3 codes, or translations.
Material Design Integration: Seamlessly integrates with Angular Material.
Optimized Performance: Features debounce search with RxJS and virtual scrolling.
Standalone Component: Can be easily added to any project.

Why Use This Library?

Using this library saves time and ensures a consistent user experience:

Time-Saving: No need to build a custom country picker from scratch.
Internationalization: Supports multiple languages and localization.
Customizability: Easily styled and configured for specific requirements.

Getting Started: Installation and Basic Setup

Setting up the library is quick and straightforward.

Step 1: Installation

Install the library using the following command:

ng add @wlucha/ng-country-select

Alternatively, manually add the dependencies:

npm install --save @angular/material @angular/cdk @angular/animations @wlucha/ng-country-select

Step 2: Import and Configure

Import the component into your module:

import { CountrySelectComponent } from '@wlucha/ng-country-select';

@NgModule({
  imports: [
    CountrySelectComponent,
    // ... other imports
  ]
})

Step 3: Use in Templates

Add the component to your template:

<ng-country-select
  (ngModel)=“selectedCountry”
  placeholder=”‘Select a country’”>
</ng-country-select>

Advanced Customization

The library offers many customization options:

Styling: Override default styles using CSS classes.
Parameters: Configure behavior such as default language or filters.
Localization: Add translations to support international users.

Real-World Use Cases

E-Commerce Platforms

Allow users to quickly select their shipping destination.

Travel Booking Applications

Provide an intuitive interface for selecting departure or destination countries.

International Registration Forms

Simplify the registration process with a user-friendly country picker.

Supporting the Project

Open-source projects thrive on community support. You can contribute by:

⭐ Starring the project on GitHub
🐛 Reporting bugs
💡 Suggesting features or improvements
📢 Sharing the tool with other developers

This library is a great example of how community-driven development can create valuable tools. Try it out today and enhance your Angular applications!

Happy coding!

GitHub: https://github.com/wlucha/ng-country-select
Npmjs: https://www.npmjs.com/package/@wlucha/ng-country-select

🌍 How to Create a Country Autocomplete in Angular: A Step-by-Step Guide 🌍

wlucha — Fri, 07 Feb 2025 16:35:44 +0000

Empower your Angular apps with an elegant, multilingual country search.✨

1. Introduction

When building any globally targeted Angular application — be it for e-commerce, social platforms, or travel portals — your users often need to select their country. A country dropdown or autocomplete can be surprisingly tricky to build from scratch: You might need to manage large lists of country names, codes, and even flags for a polished user experience. Not to mention supporting multiple languages and different forms of search (e.g., by ISO code, local name, or English name).

In this guide, we’ll explore a simple yet powerful way to implement a country selection feature in your Angular project. We’ll walk you through the entire process, from setting up a brand-new Angular Material project to integrating a robust, ready-made country selection component using @wlucha/ng-country-select. Let’s dive right in! 🌐

2. Why Use a Pre-Built Country Autocomplete?

Before we jump into coding, let’s talk about why you might want to use a pre-built solution. Managing a high-quality country autocomplete can be challenging for several reasons:

Huge List: There are nearly 200 countries worldwide, each with distinct codes (ISO Alpha2, Alpha3) and localized names.
Multilingual Requirements: Your users may need to see country names in different languages.
Flags: Displaying flags as images or emojis can be tricky to handle efficiently.
Search Complexity: Supporting partial matches, synonyms, or codes can increase your data-management overhead.

A specialized library like @wlucha/ng-country-select handles all these complexities for you — complete with Angular Material design, flags rendered via emojis, multi-language support, and efficient searching powered by RxJS. This means you can focus on your application’s core functionality while ensuring a polished and intuitive user experience. ✨

3. Getting Started

3.1. Create (or Open) Your Angular Project

If you haven’t already set up an Angular project, you can do so in a snap using the Angular CLI:

npm install -g @angular/cli
ng new country-demo
cd country-demo

When prompted, you can choose to include Angular routing and select your preferred stylesheet format. Once done, open the project in your favorite code editor (VS Code, WebStorm, etc.).

3.2. Include Angular Material (Optional but Recommended)

Since @wlucha/ng-country-select is built with Angular Material design in mind, you might want to install and configure Angular Material if you haven’t already:

ng add @angular/material

You will be prompted to choose a Material theme, set up gestures, and enable browser animations. Follow the prompts to complete the installation. This step ensures that your app is styled in line with Material Design guidelines.

4. Install the "@wlucha/ng-country-select" Library

Now, let’s add the country autocomplete library to our project. This single command installs all necessary dependencies:

npm install --save @angular/material @angular/cdk @angular/animations @wlucha/ng-country-select

Note: If you’ve already installed Angular Material (@angular/material, @angular/cdk, and @angular/animations), you only need:

npm install --save @wlucha/ng-country-select

5. Configure the Module

In Angular, we need to import the component that we want to use. Head over to your app.module.ts (or any module where you want to use the country select) and add the CountrySelectComponent:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CountrySelectComponent } from '@wlucha/ng-country-select';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Required for Angular Material animations
    CountrySelectComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

With this, the component is ready to be used in your templates.

6. Basic Usage: A Simple Example

Let’s create a straightforward autocomplete in our app.component.html to see how this works:

<h2>Select Your Country 🌏</h2>
<ng-country-select
   [lang]="'en'"
   (countrySelected)="handleSelection($event)"
></ng-country-select>

Then, in app.component.ts:

import { Component } from '@angular/core';
import { Country } from '@wlucha/ng-country-select';

@Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
})
export class AppComponent {
  handleSelection(selectedCountry: Country): void {
    console.log('Selected country:', selectedCountry);
    // Perform any logic based on the chosen country (e.g., storing user profile info)
  }
}

Boom — that’s all you need for a functional country autocomplete! ✅ Users can type to filter the list, and once they choose a country, the (countrySelected) event emits the full Country object.

7. Digging Deeper: Key Features & Customization

@wlucha/ng-country-select offers a host of features that make it easy to tailor the country selection experience to your needs:

7.1. Multi-Language Magic

Out of the box, you can switch the language by using the lang input property:

<ng-country-select [lang]="'de'"></ng-country-select>

This will display country names in German. Supported languages include: English (en), German (de), French (fr), Spanish (es), and Italian (it). You can even search for a country in all available translations with:

<ng-country-select
  [searchAllLanguages]="true"
></ng-country-select>

7.2. Smart Search & Flags

Each country is displayed with an emoji flag (no extra images needed!) and is searchable by local name, English name, and ISO codes (Alpha2 or Alpha3). It makes finding a country super easy.

7.3. Angular Material Integration

Because it uses Angular Material’s MatFormField and MatInput, you get consistent styling and theming out of the box. You can choose 'fill' or 'outline' appearances to match your app’s style, e.g.:

<ng-country-select [appearance]="'outline'"></ng-country-select>

7.4. Performance Optimizations

The library comes with debounce search input to reduce unnecessary lookups. You can configure the delay:

<ng-country-select [debounceTime]="300"></ng-country-select>

This ensures that searches are not fired on every keystroke but only after the user stops typing for 300 ms.

8. Advanced Usage

If you want to bind this component to a FormControl, display alpha codes, or listen to more events (e.g., input changes), take advantage of these additional inputs and outputs:

<ng-country-select
   [lang]="'en'"
   [formControl]="countryControl"
   [searchAllLanguages]="true"
   [showCodes]="true"
   [debounceTime]="200"
   [appearance]="'outline'"
   [placeholder]="'Search country'"
   (countrySelected)="onCountrySelect($event)"
   (inputChanged)="trackSearchTerm($event)"
></ng-country-select>

8.1. Key Inputs

defaultCountry: Preselect a country from the start.
formControl: Two-way binding with Angular Reactive Forms.
lang: Choose the language (en, de, fr, es, it).
searchAllLanguages: Toggle multi-lingual searching on/off.
appearance: 'fill' | 'outline' to control the Material appearance.
placeholder: Override the search box placeholder.
disabled: Disable the entire component if needed.

8.2. Important Outputs

countrySelected: Emits a Country object when a user picks a country.
inputChanged: Emits a string for every typed character, useful for analytics or debugging.
closed: Triggers when the autocomplete panel closes.

9. Putting It All Together

Below is a more comprehensive example to illustrate how you might tie this into a reactive form:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Country } from '@wlucha/ng-country-select';

@Component({
  selector: 'app-root',
  template: `
    <h2>Advanced Country Selection 🌍</h2>
    <form>
      <ng-country-select
        [lang]="'es'"
        [formControl]="countryControl"
        [showCodes]="true"
        [searchAllLanguages]="true"
        [appearance]="'outline'"
        [placeholder]="'Elige tu país...'"
        (countrySelected)="onCountrySelected($event)"
        (inputChanged)="onInputChanged($event)"
      ></ng-country-select>
    </form>
    <p>Selected Country: {{ selectedCountryName }}</p>
    `
})
export class AppComponent implements OnInit {

 countryControl = new FormControl();
 selectedCountryName: string = '';

 ngOnInit(): void {
    // Optional: set default value in reactive form
    // countryControl.setValue({ name: 'Germany', alpha2: 'DE', ... })
  }

  onCountrySelected(country: Country): void {
    this.selectedCountryName = country.name;
    console.log('User selected:', country);
  }

  onInputChanged(term: string): void {
    console.log('User is typing:', term);
  }
}

In this snippet, we:

Instantiate a FormControl to track the country.
Listen for countrySelected to update our component state.
Capture real-time user input from inputChanged.
Display the user’s selection in the template.

10. Where to Go from Here?

10.1. Explore More Features

Check out the GitHub repository for deeper documentation, advanced use cases, and upcoming features like an ng-add schematic, more languages, and possibly richer flag options. Feel free to submit issues or pull requests if you spot a bug or have an idea for a new feature.

10.2. Contribute & Support

If you find this library helpful, show some love:

Star the repo on GitHub ⭐
Report bugs or suggest features
Share with your colleagues or community

Every small contribution helps make open-source tools more robust. 😍

10.3. Integrate in Production

Once satisfied with your setup, you can integrate the country select component wherever you need. It’s perfect for user registration forms, shipping address inputs, or dynamic dashboards that might filter data by region. Pair it with a good backend that handles localized content, and you’ll be serving up an exceptional user experience worldwide. 🌎

11. Conclusion

Implementing a country autocomplete in Angular no longer needs to be a daunting task. By harnessing the power of Angular Material and a specialized library like @wlucha/ng-country-select, you can quickly spin up a multilingual, flag-emoji-enhanced, and highly performant country picker in just a few steps.

Key takeaways:

You can avoid the headache of managing huge country lists and localization quirks.
The library is flexible enough to handle different Angular versions, from 16 to 19.
Searching by partial name, code, or localized name is super smooth — thanks to built-in RxJS support.

Give it a try, customize it to your needs, and watch your users enjoy a swift, intuitive location selection experience! 🎉

Thanks for reading, and happy coding!

Check out more details and the full documentation on the project’s GitHub page: @wlucha/ng-country-select.

🚀 Kickstart Your Angular Projects with the Ultimate Starter Kit! 🚀

wlucha — Sun, 02 Feb 2025 08:57:11 +0000

Have you ever wanted a ready-to-go Angular project that helps you skip the boilerplate setup and jump straight into development? Look no further! Introducing the Angular Starter – a production-ready, enterprise-grade Angular boilerplate packed with modern tools and best practices.

Quick Link: GitHub Repo ⭐

Why You’ll Love It ❤️

Building an Angular app from scratch can be time-consuming, especially if you want to ensure best practices, scalability, and a rock-solid foundation. The Angular Starter project simplifies your workflow so you can focus on what really matters – coding your features.

Highlights 🌟

Angular 19: Always stay on the cutting edge.
Angular Material: Effortless Material Design for a gorgeous UI.
Unit Testing with Jest: Blazing fast tests for your components.
E2E Testing with Cypress: Bulletproof your app from start to finish.
Transloco: Internationalize your app with minimal fuss.
Docker Support: Ship your containerized Angular app effortlessly.
Compodoc & Storybook: Auto-generate docs and showcase components.
Security Audits with AuditJS: Keep your dependencies safe and sound.
Auto-Generated CHANGELOG: Never miss an update in your project's evolution.

Get Started in Minutes ⏱️

# Clone the repository
git clone https://github.com/wlucha/angular-starter
cd angular-starter

# Install dependencies
npm install

# Start the development server
npm run start

# Open your browser at http://localhost:4200

Docker Deployment 🐳

# Build the Docker image
docker build . -t angular-starter

# Run the Docker container
docker run -p 3000:80 angular-starter

Commands You’ll Use All the Time 👨‍💻

Command	Description
`npm run start`	Start the development server.
`npm run lint`	Lint the project for code quality.
`npm run test`	Run unit tests with Jest.
`npm run build`	Build the project for production.
`npm run compodoc`	Generate documentation with Compodoc.
`npm run storybook`	Launch Storybook for component examples.
`npm run audit`	Audit dependencies for security vulnerabilities.
`npm run prettier`	Format the entire project with Prettier.

Demo & Deployment 🖥️

Live Demo: Check it out on StackBlitz
Deploy to Heroku:

Contribute & Make It Even Better ✨

This project thrives on community feedback and contributions. If you spot any improvement or have a cool feature in mind, feel free to open a new issue or submit a pull request.

Support the Project ⭐

If you find this starter helpful, consider giving the repo a star on GitHub! Every star lets us know we're on the right track and motivates us to keep pushing out new features and improvements.

License 📄

Released under the MIT License, meaning you have the freedom to use, modify, and distribute this project in your own workflow.

Ready to build something amazing? Give the project a star, clone the repository, and start your next Angular adventure today! 🚀

"The best time to start was yesterday. The next best time is now." – So why not spin it up and get coding? ⚡

https://github.com/wlucha/angular-starter

🌍 Angular Material Country Autocomplete

wlucha — Sun, 02 Feb 2025 08:28:14 +0000

Hey everyone! I'm super excited to introduce ng-country-select – a high-performance, multilingual country autocomplete built on Angular and Angular Material. If you’ve ever needed a quick and elegant way to select countries in your apps (complete with flags, codes, and translations), look no further!

✨ Why ng-country-select?

🚀 Angular 16+ Ready – Fully compatible with Angular 16, 17, 18, and 19.
🌐 Multi-Language Magic – English, German, French, Spanish and Italian out of the box, and super easy to add more.
🎌 Automatic Flag Emojis – Zero image dependencies! Relying on ISO codes for the magic.
🔍 Intelligent Search – Match by local name, English name, alpha2/3 codes, or any available translation.
🎨 Material Design – Seamless integration with Angular Material for a polished UI.
⚡ Performance – RxJS-based searching with debouncing and optional virtual scrolling.
🧩 Standalone – Import the component directly, no extra boilerplate needed.

📺 Live Demo

Try it out in our Live Demo and see it in action!

🌍 Angular Compatibility

Angular Version	Supported?
	✅ Yes
	✅ Yes
	✅ Yes
	✅ Yes

🛠️ Setup in 60 Seconds

1. Install Dependencies

npm install --save @angular/material @angular/cdk @angular/animations @wlucha/ng-country-select

2. Import Component

import { CountrySelectComponent } from '@wlucha/ng-country-select';

@NgModule({
  imports: [
    CountrySelectComponent,
    // ... other imports
  ]
})

3. Add Basic Usage

<ng-country-select
  [lang]="'en'"
  (countrySelected)="handleSelection($event)"
></ng-country-select>

🎛️ Parameters

🎚️ Inputs

Parameter	Type	Default	Description
`defaultCountry`	`Country \	null`	`null`
`selectedCountry`	`Country \	null`	-
`lang`	`string`	`'en'`	Language for displaying country names (e.g., `en`, `de`, `fr`)
`searchAllLanguages`	`boolean`	`false`	If `true`, searching will match in all available translations
`placeholder`	`string`	`'Search country'`	Placeholder text for the input field
`debounceTime`	`number`	`100`	Debounce time in milliseconds for the search input
`disabled`	`boolean`	`false`	Disables the component if `true`
`appearance`	`'fill' \	'outline'`	`'fill'`
`required`	`boolean`	`false`	Marks the field as required if `true`
`showCodes`	`boolean`	`false`	If `true`, shows alpha2/alpha3 codes in the autocomplete results
`color`	`ThemePalette`	`'primary'`	Angular Material color palette to use (`'primary'`, `'accent'`, `'warn'`)

🚨 Outputs

Event	Output	Description
`countrySelected`	`Country`	Full country object on selection
`inputChanged`	`string`	Live search term updates
`closed`	`void`	When dropdown closes

💻 Power User Setup

<ng-country-select
  [lang]="'en'"
  [searchAllLanguages]="true"
  [showCodes]="true"
  [debounceTime]="200"
  [appearance]="'outline'"
  [placeholder]="'Search country'"
  (countrySelected)="onCountrySelect($event)"
  (inputChanged)="trackSearchTerm($event)"
></ng-country-select>

🌟 Support the Project

Love this component? Here's how you can help:

⭐ Star the repo (you're awesome!)
🐛 Report bugs here
💡 Suggest features
📢 Share with your network

# Your star fuels development! ⭐
# Clone and explore:
git clone https://github.com/wlucha/ng-country-select.git

https://github.com/wlucha/ng-country-select

🚀 Angular 19 + Cypress, Material + Transloco + Jest, EsLint + Docker + Prettier 🚀

wlucha — Sun, 04 Aug 2024 06:53:13 +0000

This is an Angular 19 Starter with Material, Cypress, Transloco, Jest, Compodoc, Docker Support, ESLint & Prettier.

GitHub: https://github.com/wlucha/angular-starter

✅ Angular 19
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with Cypress
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Provide component examples with Storybook
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

Deploy

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

- `npm run start` - Start the app
- `npm run lint` - Lint the project
- `npm run test` - Run unit tests
- `npm run build` - Build the project
- `npm run build:prod` - Build the project in production mode
- `npm run build:prod:stats` - Build the project in product mode with stats
- `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation
- `npm run version` - Generate changelog
- `npm run prettier` - Format the whole project
- `npm run audit` - Audit this application using Sonatype OSS Index

License

MIT License

GitHub: https://github.com/wlucha/angular-starter

The best Angular 19 Starter Project

wlucha — Sun, 04 Aug 2024 06:51:01 +0000

This is an Angular 19 Starter with Material, Cypress, Transloco, Jest, Compodoc, Docker Support, ESLint & Prettier.

GitHub: https://github.com/wlucha/angular-starter

Deploy

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

- `npm run start` - Start the app
- `npm run lint` - Lint the project
- `npm run test` - Run unit tests
- `npm run build` - Build the project
- `npm run build:prod` - Build the project in production mode
- `npm run build:prod:stats` - Build the project in product mode with stats
- `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation
- `npm run version` - Generate changelog
- `npm run prettier` - Format the whole project
- `npm run audit` - Audit this application using Sonatype OSS Index

License

MIT License

GitHub: https://github.com/wlucha/angular-starter

The best Angular 19 Starter Project

wlucha — Sat, 13 Jan 2024 09:04:52 +0000

This is an Angular 19 Starter with Material, Transloco, Jest, Compodoc, Docker Support, ESLint & Prettier.

GitHub: https://github.com/wlucha/angular-starter

✅ Angular 19
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with TestCafé
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Provide component examples with Storybook
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

Deploy

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

- `npm run start` - Start the app
- `npm run lint` - Lint the project
- `npm run test` - Run unit tests
- `npm run build` - Build the project
- `npm run build:prod` - Build the project in production mode
- `npm run build:prod:stats` - Build the project in product mode with stats
- `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation
- `npm run version` - Generate changelog
- `npm run prettier` - Format the whole project
- `npm run audit` - Audit this application using Sonatype OSS Index

License

MIT License

GitHub: https://github.com/wlucha/angular-starter

The best Angular 19 Starter Project

wlucha — Mon, 26 Dec 2022 22:13:09 +0000

This is an Angular 19 Starter with Material, Transloco, Jest, Compodoc, Docker Support, ESLint & Prettier.

GitHub: https://github.com/wlucha/angular-starter

✅ Angular 19
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with [TestCafé](https://testcafe.io/
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Analyse your project with webpack-bundle-analyzer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

Deploy

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

- `npm run start` - Start the app
- `npm run lint` - Lint the project
- `npm run test` - Run unit tests
- `npm run build` - Build the project
- `npm run build:prod` - Build the project in production mode
- `npm run build:prod:stats` - Build the project in product mode with stats
- `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation
- `npm run version` - Generate changelog
- `npm run prettier` - Format the whole project
- `npm run audit` - Audit this application using Sonatype OSS Index

License

MIT License

GitHub: https://github.com/wlucha/angular-starter

🚀 Angular 14 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier 🚀

wlucha — Sat, 15 Oct 2022 06:44:28 +0000

This is THE Angular 14 Starter project you are looking for!

GitHub

https://github.com/wlucha/angular-starter

Features

✅ Angular 14
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with TestCafé
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting

Demo

Setup

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

npm run start - start the app
npm run lint - lint the project
npm run test - run unit tests
npm run build - build the project
npm run build:prod - build the project in production mode
npm run build:prod:stats - build the project in product mode with stats
npm run analyse - analyse bundle with webpack-bundle-analyzer
npm run compodoc - generate compodoc documentation
npm run changelog - generate changelog
npm run prettier - format the whole project

GitHub
https://github.com/wlucha/angular-starter

🚀 Angular 19 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier 🚀

wlucha — Sun, 25 Sep 2022 10:45:25 +0000

This is the Angular 19 Starter project you are looking for!

GitHub

https://github.com/wlucha/angular-starter

Features

✅ Angular 19
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with TestCafé
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting

Demo

Setup

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

npm run start - start the app
npm run lint - lint the project
npm run test - run unit tests
npm run build - build the project
npm run build:prod - build the project in production mode
npm run build:prod:stats - build the project in product mode with stats
npm run analyse - analyse bundle with webpack-bundle-analyzer
npm run compodoc - generate compodoc documentation
npm run changelog - generate changelog
npm run prettier - format the whole project

GitHub
https://github.com/wlucha/angular-starter

🚀 Angular 14 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier 🚀

wlucha — Sun, 03 Jul 2022 18:11:00 +0000

This is the Angular 14 Starter project you are looking for!

GitHub

https://github.com/wlucha/angular-starter

Features

Demo

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

npm run start - start the app
npm run lint - lint the project
npm run test - run unit tests
npm run build - build the project
npm run build:prod - build the project in production mode
npm run build:prod:stats - build the project in product mode with stats
npm run analyse - analyse bundle with webpack-bundle-analyzer
npm run compodoc - generate compodoc documentation
npm run changelog - generate changelog
npm run prettier - format the whole project

GitHub
https://github.com/wlucha/angular-starter

🚀 Angular 13 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier 🚀

wlucha — Sat, 30 Apr 2022 07:29:56 +0000

This is the Angular 13 Starter project you are looking for!

GitHub

https://github.com/wlucha/angular-starter

Features

✅ Angular 13
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with TestCafé
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting

Demo

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

npm run start - start the app
npm run lint - lint the project
npm run test - run unit tests
npm run build - build the project
npm run build:prod - build the project in production mode
npm run build:prod:stats - build the project in product mode with stats
npm run analyse - analyse bundle with webpack-bundle-analyzer
npm run compodoc - generate compodoc documentation
npm run changelog - generate changelog
npm run prettier - format the whole project

GitHub
https://github.com/wlucha/angular-starter