DEV Community: Learn Angular

LLM prompts and AI IDE setup

mehdi — Sat, 12 Jul 2025 09:37:12 +0000

LLM prompts and AI IDE setup • Angular

The web development framework for building modern apps.

angular.dev

Angular v20 Developer Event 2025

mehdi — Fri, 11 Jul 2025 17:48:09 +0000

Angular v20 has landed and it is filled with features across performance, security, improved tooling and so much more.

What are you most excited about?

After the show, there's still more to see and do:
Find even more features in the Angular v20 Blog → https://goo.gle/angular-v20-blog
Cast your vote for the Angular Mascot → https://goo.gle/angular-mascot-rfc

Continue the conversation online → https://bsky.app/profile/angular.dev

Building Agentic Apps with Angular and Genkit live!

mehdi — Sun, 20 Apr 2025 10:23:03 +0000

Join Devin from the Angular team, as he live codes an AI-powered app with Angular and Genkit that interactively creates graphic novels. This is going to be a fun one... you won't want to miss it

Get the code - https://github.com/angular/examples/tree/main/genkit-angular-story-generator

Register for #BuildingAgenticApps campaign: https://flutter.dev/events/building-agentic-apps
Learn Angular - https://angular.dev/tutorials
More about Genkit - https://firebase.google.com/docs/genkit

A simpler Angular component inheritance

mehdi — Sat, 05 Apr 2025 04:41:11 +0000

Related to this documentation in Angular website:

https://angular.dev/guide/components/inheritance

Simplifying inheritance by removing the need for:

having a constructor in the parent just for common dependency injection
having a constructor in the child just for common dependency injection
calling super for common dependency injection
calling super for common lifecycle hooks

Stackblitz link:

https://stackblitz.com/edit/stackblitz-starters-tzhggu9s?file=src%2Fmain.ts

Parent component:

@Component({ template: `` })
abstract class Parent {
  protected heroService = inject(HeroService);

  ngOnInit() {
    this.onInit();
  }

  protected abstract onInit(): void;
}

Child component:

@Component({
  selector: 'child',
  template: `Child`,
})
class Child extends Parent {
  override onInit() {
    this.heroService.log();
  }
}

App:

@Component({
  selector: 'app-root',
  template: `<child/>`,
  imports: [Child],
})
class App {}

bootstrapApplication(App);

Common service:

@Injectable({ providedIn: 'root' })
class HeroService {
  log() {
    console.log('heroService');
  }
}

Advice is to have:

{
  "compilerOptions": {
    "noImplicitOverride": true,
  }
}

in tsconfig if not already there.
Goal is to avoid dev to mistakenly write an ngOnInit without knowing they'd be overriding the parent one.

ng-conf 2024: Angular control flow

mehdi — Sun, 26 Jan 2025 09:37:23 +0000

Join Dan Wahlin as he explores Angular's latest advancements, including the game-changing new control flow syntax, which simplifies code and enhances type checking. Discover how this new feature can supercharge your Angular development while also simplifying maintenance.

Source: https://www.youtube.com/watch?v=WoIFriL3k8M

ng conf 2024: GitHub Co-pilot with Angular

mehdi — Sun, 26 Jan 2025 08:28:42 +0000

Experience the game-changing potential of AI paired programming with GitHub Copilot to streamline your development processes. Can’t remember the proper syntax for that logic you need to write? What’s this code doing and who can help explain it to me? How do I create proper unit tests to keep my code operating properly? Ugh! Why isn't anyone around to pair with you who can help you solve this coding problem right away?

You'll learn in this session that you have access to the tools and services to help you deliver to your high demands and standards. Get ready to hit the ground running in this fast-paced, demo-heavy presentation that takes you through some of the best and most effective tips and tricks using GitHub, AI, and VS Code. Learn how to setup your environment fast, collaborate with your AI pair programming partner, and deploy apps using some of the best tools available that you can use today!

Source: https://www.youtube.com/watch?v=bBpHGUn-O5U

NG Conf 2024 Keynote

mehdi — Sun, 26 Jan 2025 06:54:00 +0000

ng-conf 2024 is a two-day double track conference focused on building the Angular community. Meet the Angular Team and some of the biggest names in the community. Learn the latest in Angular, build your network, and grow your skills. Developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.

Source: https://www.youtube.com/watch?v=nIBseTi6RVk