Johannes Hoppe's Avatar

Johannes Hoppe

@johanneshoppe.de

Google Developer Expert #GDE for #Angular. Follow me for expert Angular insights, tips, and latest updates. πŸ“• Book @angular-buch.com πŸ…°οΈ Trainer https://angular.schule

80
Followers
57
Following
29
Posts
30.05.2025
Joined
Posts Following

Latest posts by Johannes Hoppe @johanneshoppe.de

Preview
a woman wearing sunglasses and a red jacket is pointing up with the words " this " above her ALT: a woman wearing sunglasses and a red jacket is pointing up with the words " this " above her
05.03.2026 06:32 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular-Buch β†’ Barrierefreiheit in Formularen: Daten versenden πŸ“™ Wenn Nutzende ein Formular absenden, das noch Fehler enthΓ€lt, entscheidet die Reaktion der Anwendung ΓΌber die Benutzerfreundlichkeit. Gerade fΓΌr Menschen, die auf Screenreader oder Tastaturnavigatio...

πŸš€ Neuer Blogartikel: A11y in Formularen mit Angular

Wie reagiert eine App auf fehlerhafte Submits – fΓΌr Screenreader & Tastaturnutzer:innen?

➑️ Disabled Button?
➑️ Inline-Fehler mit aria-*
➑️ Fehlerzusammenfassung
➑️ Fokus aufs erste Fehlerfeld

Jetzt lesen:
angular-buch.com/blog/2026-03...

04.03.2026 12:58 πŸ‘ 2 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

But with this approach, you have to implement the final switch in the interceptor. This may violate separation of concerns...

05.03.2026 06:28 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Super highly underrated is `withRequestsMadeViaParent` IMHO! πŸ˜ƒ

export const ADMIN_ROUTES: Routes = [
{
path: '',
component: AdminDashboard,
providers: [
provideHttpClient(
withInterceptors([adminAuthInterceptor]),
withRequestsMadeViaParent()
)
]
}
];

04.03.2026 23:03 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

And then:

http .get('/api/public/status', {
context: new HttpContext().set(NEEDS_AUTH, false)
});

I am currently writing an article (in German) that explores all options. πŸ˜ƒπŸ‘

04.03.2026 23:01 πŸ‘ 1 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0

You mean like this? πŸ˜‡

export const NEEDS_AUTH = new HttpContextToken<boolean>(() => true);

export const authInterceptor: HttpInterceptorFn = (req, next) => {
if (!req.context.get(NEEDS_AUTH)) {
return next(req);
}

// ...
};

04.03.2026 23:00 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Post image

πŸ…°οΈ Angular Tip of the Day: Your app talks to multiple APIs - but your interceptors can't tell them apart!?

Wrap it. Filter it. Done!

04.03.2026 16:00 πŸ‘ 5 πŸ” 2 πŸ’¬ 1 πŸ“Œ 0

This post is 100% AI slop!

25.02.2026 14:28 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Noah Zweben on X: "Announcing a new Claude Code feature: Remote Control. It's rolling out now to Max users in research preview. Try it with /remote-control Start local sessions from the terminal, then continue them from your phone. Take a walk, see the sun, walk your dog without losing your flow. https://t.co/43c4RJCiOS" / X Announcing a new Claude Code feature: Remote Control. It's rolling out now to Max users in research preview. Try it with /remote-control Start local sessions from the terminal, then continue them from your phone. Take a walk, see the sun, walk your dog without losing your flow. https://t.co/43c4RJCiOS

Source: x.com/i/status/202...

25.02.2026 06:07 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

Anthropic just shipped Remote Control for Claude Code: /remote-control

Start local sessions from the terminal, then continue them from your phone. Touch some grass without losing your flow.

This is the first phone ↔ local machine integration from any major AI lab, but for sure not the last.

25.02.2026 06:05 πŸ‘ 2 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0

The Angular CLI. Everything works after installation, and updates are a breeze. πŸ™‚πŸ‘

19.02.2026 06:59 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular.Schule β†’ Claude Code: The AI Agent for Angular Developers (and Those Who Want to Become One) πŸš€ There has never been a better time to build software. AI agents like Claude Code have fundamentally changed my workflow – I write better code in less time. In this article, I will show you how it wo...

I wrote a deep dive to get you started with Claude Code and Angular development! AI first!

β†’ Your first Angular project
β†’ Angular MCP server
β†’ Plan mode & extended thinking
β†’ Git integration
β†’ Docker Sandbox

#Angular #ClaudeCode #AI #WebDevelopment

angular.schule/blog/2026-02...

18.02.2026 15:10 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular.Schule β†’ Claude Code: How to Actually Fix the Endless Scrolling Problem πŸš€ Claude Code has a notorious bug: the terminal scrolls uncontrollably, flickers, or freezes entirely. Since March 2025, GitHub issues have been piling up with thousands of upvotes, and the problem st...

Full technical deep-dive and setup guide: angular.schule/blog/2026-02...

17.02.2026 19:46 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

That flickering. That endless scrolling. Claude Code is great, until your terminal explodes! 🀯🀯

The #1 reported bug for a year. I found the fix. Two commands, done.

17.02.2026 19:46 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Angular.Schule β†’ Agentic Coding: AI Support for Angular πŸš€ Software projects are becoming more complex, and requirements are increasing. AI (Artificial Intelligence) tools can support us in development and provide relief: They help with generating code, exp...

πŸ€– Agentic Coding with πŸ…°οΈ #Angular: AI agents work directly in your project – reading code, writing files, and planning next steps. The MCP server from @angular.dev ensures you get modern, best-practice code. Here's how:

angular.schule/blog/2026-02...

11.02.2026 11:48 πŸ‘ 4 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

πŸ™‚πŸ™

05.02.2026 17:20 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Mein Vorschlag: "Clean Code mit PHP 3" 😁

14.01.2026 08:01 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular.Schule β†’ Angular 21 is here! πŸš€ On November 19, 2025, Angular 21 was released! The most important updates: Signal Forms, zoneless apps, testing with Vitest, the new package @angular/aria, and more support for AI assistants.

πŸ…°οΈ #Angular 21 is here! πŸŽ‰
The highlights:

✨ Zoneless is now the default
πŸ§ͺ Signal Forms (experimental)
⚑ Vitest replaces Karma/Jasmine
βœ… @angular/aria for accessibility
πŸ€– MCP server & AGENTSβ€€md for AI assistants now stable

More details here:
angular.schule/blog/2025-11...

20.11.2025 20:21 πŸ‘ 7 πŸ” 3 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular-Buch β†’ Angular 21 ist da! πŸ“™ Bevor wir uns in den Trubel zum Jahresende stΓΌrzen, gibt es Neuigkeiten aus der Angular-Welt: Am 19. November 2025 wurde Angular 21 verΓΆffentlicht! Die wichtigsten Neuigkeiten: Signal Forms, Zoneles...

πŸ…°οΈ #Angular 21 ist da! πŸŽ‰
Das sind die News:

✨ Zoneless ist jetzt Standard
πŸ§ͺ Signal Forms (experimentell)
⚑ Vitest ersetzt Karma/Jasmine
βœ… @angular/aria fΓΌr Barrierefreiheit
πŸ€– MCP-Server & AGENTSβ€€md fΓΌr AI-Assistenten stabil

Alle Details im Blog:
angular-buch.com/blog/2025-11...

20.11.2025 18:35 πŸ‘ 4 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular.Schule β†’ Vitest in Angular 21: What's new and how to migrate? πŸš€ Angular 21 introduces a significant change to unit testing: Vitest is now the default, replacing the previous standard combination of Karma and Jasmine. When creating a new project with ng new, Angu...

πŸ…°οΈ #Angular 21 introduces a significant change to unit testing: #Vitest is now the default! In this article, I will show you what Vitest means for you, how to migrate existing Angular projects, and what benefits Vitest offers.

angular.schule/blog/2025-11...

20.11.2025 10:13 πŸ‘ 1 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular.Schule β†’ Angular's Resource APIs Are Broken - Let's Fix Them! πŸš€ Angular ships with three Resource APIs for declarative async data loading: resource(), rxResource(), and httpResource(). They&#39;re powerful additions to Angular&#39;s reactive toolkit, but they sh...

Do you want to use rxResource in production? Stop scrolling and read this! The experimental πŸ…°οΈ #Angular Resource APIs have bugs that can break apps. In this article I’ll show fixes so you can ship with confidence.

angular.schule/blog/2025-10...

02.11.2025 07:05 πŸ‘ 4 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image

πŸ…°οΈ #Angular ohne οΉ«Injectable({ providedIn: 'root' })? Johannes zeigt, wie ein οΉ«Service()-Decorator den Code kompakter machen kΓΆnnte.

Aber wΓΌrdest du so etwas in Produktion einsetzen? πŸ€”

Lies selbst: angular.schule/blog/2025-09...

03.10.2025 12:12 πŸ‘ 2 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

FYI @gregonnet.bsky.social , I quoted you in the article! I hope you like it. πŸ™‚πŸ‘

03.10.2025 11:38 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image

I got tired of typing οΉ«Injectable({ providedIn: 'root' }) for every πŸ…°οΈ #Angular service. So I built οΉ«Service() instead.

Good idea or career‑ending move? πŸ˜‚

Full story: angular.schule/blog/2025-09...

03.10.2025 10:41 πŸ‘ 3 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0
Years active in the community - 10+ years
Favourite Angular feature - The Angular CLI is my favorite feature. It empowers developers to get started quickly, optimizes the development workflow, and ensures consistency across teams.
Website - https://angular.schule/blog
Fun fact - I co-wrote the German Angular Book in all its 4 editions, and I still find myself learning new things about Angular every day! Also, my coffee addiction is supercharging my Angular coding sessions.

Years active in the community - 10+ years Favourite Angular feature - The Angular CLI is my favorite feature. It empowers developers to get started quickly, optimizes the development workflow, and ensures consistency across teams. Website - https://angular.schule/blog Fun fact - I co-wrote the German Angular Book in all its 4 editions, and I still find myself learning new things about Angular every day! Also, my coffee addiction is supercharging my Angular coding sessions.

Did you know that Johannes Hoppe, a GDE that has been a part of the community for more than 10 years, maintains angular-cli-ghpages?

This tool makes it incredibly easy to deploy Angular apps to GitHub Pages or CloudFlare Pages directly from the Angular CLI. Give it a try
github.com/angular-schu...

09.07.2025 16:18 πŸ‘ 6 πŸ” 2 πŸ’¬ 1 πŸ“Œ 0
Preview
Angular.Schule β†’ Miss the old angular.io/resources? We brought it back! πŸš€ The old list of valuable resources from angular.io is gone. Here you can find a mirror.

Miss the old angular(dot)io/resources page? That curated list of helpful πŸ…°οΈ #Angular libraries and tools just… vanished. 😱

So we brought it back!

Check it out at: angular.schule/blog/2025-06...

22.06.2025 22:45 πŸ‘ 2 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
Preview
Angular.Schule β†’ Generating Angular API clients with OpenAPI Generator πŸš€ In this article, we&#39;ll show how to use OpenAPI Generator to automatically generate Angular HTTP services from your OpenAPI spec.

New πŸ…°οΈ #Angular article! Tired of writing backend services by hand? Generate fully-typed Angular API clients with OpenAPI generator, fast and reliable!

βœ… Uses the new provideApi() syntax
βœ… Bonus: toSignal() and rxResource() examples

angular.schule/blog/2025-06...
#OpenAPI #Swagger

19.06.2025 08:27 πŸ‘ 3 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

Fixed! πŸ™‚

18.06.2025 10:42 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Thank you very much, I will fix the article! πŸ™‚πŸ‘

18.06.2025 06:43 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Angular.Schule β†’ Angular 20 is here! πŸš€ Everything new comes in May - or at least a new major version of Angular: On May 28, 2025, Angular 20 was released! You can find the release information directly from the Angular team in the officia...

πŸ…°οΈ #Angular 20 is here! πŸš€
All news in the blog:

πŸ› οΈ New coding style guide: No more component suffixes
πŸ‘€ Zoneless Developer Preview
πŸ‘‹ Farewell to *ngIf, *ngFor, *ngSwitch
⚑️ Stable signal APIs: effect(), linkedSignal(), toSignal()
πŸ” New resource API: httpResource()

angular.schule/blog/2025-05...

18.06.2025 05:52 πŸ‘ 5 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0