Convert Figma logo to code with AI

Ismaestro logoangular-example-app

Angular 19 Example App + i18n

2,235
1,233
2,235
0

Top Related Projects

97,258

Deliver web apps with confidence 🚀

Angular, NgRx, Angular CLI & Angular Material Starter Project

Exemplary real world application built with Angular

25,409

Customizable admin dashboard template based on Angular 10+

Angular and TypeScript JumpStart example application

Quick Overview

Ismaestro/angular-example-app is a comprehensive Angular application showcasing best practices and modern development techniques. It serves as a learning resource and reference implementation for developers working with Angular, demonstrating various features and architectural patterns.

Pros

  • Implements a wide range of Angular features and best practices
  • Regularly updated to keep up with the latest Angular versions
  • Includes extensive documentation and comments for easy understanding
  • Demonstrates integration with external services and APIs

Cons

  • May be overwhelming for beginners due to its comprehensive nature
  • Some advanced concepts might require additional learning for full understanding
  • The large scope of the project could make it challenging to navigate for specific examples
  • Occasional delays in updates for the latest Angular versions

Code Examples

Here are a few code examples from the project:

  1. Component with dependency injection:
@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor(
    private heroService: HeroService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }
}
  1. Service with HTTP requests:
@Injectable({
  providedIn: 'root'
})
export class HeroService {
  private heroesUrl = 'api/heroes';

  constructor(
    private http: HttpClient,
    private messageService: MessageService
  ) {}

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        tap(_ => this.log('fetched heroes')),
        catchError(this.handleError<Hero[]>('getHeroes', []))
      );
  }
}
  1. Reactive form example:
@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html'
})
export class HeroFormComponent implements OnInit {
  heroForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.heroForm = this.fb.group({
      name: ['', Validators.required],
      power: ['', Validators.required],
      alterEgo: ''
    });
  }

  onSubmit() {
    if (this.heroForm.valid) {
      console.log(this.heroForm.value);
    }
  }
}

Getting Started

To get started with this project:

  1. Clone the repository:

    git clone https://github.com/Ismaestro/angular-example-app.git
    
  2. Install dependencies:

    cd angular-example-app
    npm install
    
  3. Run the development server:

    ng serve
    
  4. Open your browser and navigate to http://localhost:4200 to view the application.

Competitor Comparisons

97,258

Deliver web apps with confidence 🚀

Pros of angular

  • Official Angular framework repository with comprehensive documentation
  • Larger community support and more frequent updates
  • Contains core Angular libraries and tools for development

Cons of angular

  • More complex and overwhelming for beginners
  • Lacks practical, ready-to-use application examples
  • Steeper learning curve for new developers

Code comparison

angular-example-app:

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

angular:

@Component({
  selector: 'example-component',
  template: `<h1>Hello, {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ExampleComponent  {
  @Input() name: string;

The angular-example-app repository provides a more comprehensive, real-world example of component implementation, while the angular repository showcases a simpler, bare-bones component structure. This difference highlights how angular-example-app is more focused on practical application, whereas angular serves as the foundation for Angular development.

Angular, NgRx, Angular CLI & Angular Material Starter Project

Pros of angular-ngrx-material-starter

  • Implements NgRx for state management, providing a more robust solution for complex applications
  • Includes a wider range of Angular Material components and features
  • Offers more comprehensive documentation and a detailed wiki

Cons of angular-ngrx-material-starter

  • Higher learning curve due to NgRx integration
  • More complex project structure, which may be overwhelming for beginners
  • Less focus on internationalization (i18n) compared to angular-example-app

Code Comparison

angular-ngrx-material-starter:

@Effect()
login = this.actions$.pipe(
  ofType(AuthActionTypes.LOGIN),
  map((action: Login) => action.payload),
  exhaustMap((auth) =>
    this.authService.login(auth).pipe(
      map(user => new LoginSuccess({ user })),
      catchError(error => of(new LoginFailure({ error })))
    )
  )
);

angular-example-app:

login(email: string, password: string): Observable<User> {
  return this.http.post<User>(`${environment.apiUrl}/login`, { email, password })
    .pipe(
      tap(user => this.setSession(user)),
      shareReplay()
    );
}

The code snippets demonstrate the difference in state management approaches. angular-ngrx-material-starter uses NgRx effects for handling authentication, while angular-example-app uses a more straightforward service-based approach.

Exemplary real world application built with Angular

Pros of angular-realworld-example-app

  • Implements a real-world application (Medium clone) with more complex features
  • Follows RealWorld spec, making it easier to compare with other framework implementations
  • Includes authentication and API integration

Cons of angular-realworld-example-app

  • Less focus on Angular-specific best practices and optimizations
  • Fewer examples of advanced Angular features like custom directives or pipes
  • Less comprehensive documentation and comments in the codebase

Code Comparison

angular-realworld-example-app:

export class ArticleListComponent implements OnInit {
  constructor(
    private articlesService: ArticlesService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.route.data.subscribe(
      (data: { articles: Article[] }) => {
        this.articles = data.articles;
      }
    );
  }
}

angular-example-app:

export class HeroesComponent implements OnInit {
  constructor(
    private heroService: HeroService,
    private translateService: TranslateService
  ) {}

  ngOnInit() {
    this.getHeroes();
    this.translateService.onLangChange.subscribe(() => {
      this.getHeroes();
    });
  }
}

The angular-realworld-example-app focuses on implementing a real-world application with API integration, while angular-example-app emphasizes Angular-specific features like internationalization. Both examples demonstrate proper use of dependency injection and component lifecycle hooks.

25,409

Customizable admin dashboard template based on Angular 10+

Pros of ngx-admin

  • More comprehensive UI components and layouts
  • Better suited for large-scale enterprise applications
  • Includes advanced features like authentication and role-based access control

Cons of ngx-admin

  • Steeper learning curve due to its complexity
  • May be overkill for smaller projects or learning purposes
  • Less focus on best practices and clean code structure

Code Comparison

ngx-admin:

@Component({
  selector: 'ngx-dashboard',
  styleUrls: ['./dashboard.component.scss'],
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnDestroy {
  private alive = true;

angular-example-app:

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

ngx-admin uses a more complex component structure with lifecycle hooks and private properties, while angular-example-app focuses on simplicity and readability. The ngx-admin example shows a dashboard component, indicating its focus on admin interfaces, whereas angular-example-app demonstrates a basic heroes component, highlighting its educational nature.

Both repositories serve different purposes: ngx-admin is a feature-rich admin template for building large-scale applications, while angular-example-app is a simpler, more educational project focused on Angular fundamentals and best practices. Choose based on your project requirements and learning goals.

Angular and TypeScript JumpStart example application

Pros of Angular-JumpStart

  • More comprehensive documentation and setup instructions
  • Includes a basic backend server for API simulation
  • Focuses on core Angular concepts without additional libraries

Cons of Angular-JumpStart

  • Less extensive feature set compared to angular-example-app
  • Fewer examples of advanced Angular techniques
  • Simpler UI design, which may be less visually appealing

Code Comparison

Angular-JumpStart:

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html'
})
export class CustomersComponent implements OnInit {
  title: string;
  people: any[] = [];

angular-example-app:

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeroesComponent implements OnInit {
  heroes$: Observable<Hero[]>;

The Angular-JumpStart example shows a simpler component structure, while the angular-example-app demonstrates more advanced techniques like change detection strategy and observables.

Angular-JumpStart is ideal for beginners looking to grasp fundamental Angular concepts, offering a straightforward approach with basic examples. On the other hand, angular-example-app provides a more feature-rich environment, showcasing advanced Angular practices and a polished UI, making it suitable for developers seeking to explore more complex Angular applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Angular Example App

Base project with Angular 19 and i18n

A real-world app made with :heart: and dedication!. Showcasing CRUD operations, advanced patterns, and much more. Dive in and explore!

Demo example

DEMO HERE

Setup

npm i
npm start

Status

Netlify Status

Server

This project is powered by a real application deployed on Fly.io. You can explore the codebase here. The server is built with NestJS, Prisma, and Postgres, ensuring a robust and modern backend architecture.

What's included

  • Strict ESLint Rules: Enforcing clean and consistent code quality.
  • Standalone Components: Modern and modular Angular architecture.
  • Functional Guards: Enhanced route protection with clean and reusable logic.
  • Pokémon Fun!: Interact with Pokémon data via the PokeAPI.
  • Authentication: Secure JWT-based authentication.
  • Internationalization (i18n): Multilingual support with English and Spanish.
  • Lazy Loading: Efficient module loading for improved performance.
  • Logical Directory Structure: Easy-to-navigate, organized codebase.
  • Best Practices: Adheres to the Angular Style Guide.
  • Responsive Design: Built with CSS Grid and Flexbox for layouts.
  • Accessible: Usage of Shoelace, a forward-thinking library of web components.
  • Optimized Images: Leveraging NgOptimizedImage for performance.
  • SASS & BEM Styles: Maintainable and scalable styling.
  • Animations: Smooth and engaging UI interactions using Angular's powerful animations API.
  • Comprehensive Testing: Example tests for Components, Services, Interceptors, Directives, and Guards. [PENDING]
  • End-to-End Testing: Fully configured with Playwright. [PENDING]

Bugs and feature requests

Found a bug or have a feature request? Before submitting, please check the issue guidelines and search through existing and closed issues. If your problem or idea hasn’t been addressed yet, please open a new issue.

If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear your feedback!

Contributors

Tom Gamull
Tom Gamull

🚇
mansyaprime
mansyaprime

💻
codeimmortal
codeimmortal

💻
tomasfse
tomasfse

💻
golu
golu

💻
rancyr
rancyr

💻
codingphasedotcom
codingphasedotcom

💻
Max
Max

💻
Karajan
Karajan

💻
Carl Chan
Carl Chan

💻
Dyeimys Franco Correa
Dyeimys Franco Correa

💻
Anartz Mugika Ledo
Anartz Mugika Ledo

💻

Copyright and license

Code and documentation copyright 2025 to the authors.

Code released under the MIT License.