- 35
- 5 909
DevCraft by Balram
Germany
Приєднався 6 гру 2022
Welcome to my channel! I'm Balram, an Architect with 15+ years of experience. Here, you'll find tutorials, tips, and tricks on Angular, JavaScript, Cloud Computing, and more. Whether you're a beginner or experienced developer, this channel is designed to help you learn, build, and grow your skills. Subscribe for practical insights, interview prep, and real-world projects!
Angular 19 resource and rxResource API- With dynamic input Signals
Learn how to use Angular's resource and rxResource to handle dynamic API calls with input signals. In this advanced demo, I show how to pass a dynamic postId from a parent to a child component using input signals, track its changes with effect(), and make efficient API calls with both Promises and Observables. Transform your Angular applications with modern, reactive techniques!
Переглядів: 219
Відео
Angular Signal with OnPush Change Detection Without detectChanges()
Переглядів 9514 днів тому
Discover how to use Angular's input signals to handle reactivity seamlessly in OnPush components-no more manual detectChanges() calls! This video demonstrates a simple yet powerful example of how Angular signals enable reactive updates without Zone.js, making your applications more efficient and modern.
Entity Framework 9 with .NET 9: Database-First Tutorial for API Development
Переглядів 32128 днів тому
Learn how to integrate Entity Framework 9 with .NET 9 using the "Database-first approach" in this step-by-step tutorial. In this video, I guide you through: - Setting up `users` and `todos` tables in the database - Populating test data for seamless API integration - Defining models and configuring the DbContext - Building RESTful API endpoints like `/todos` and `/todos/{userId}` to fetch data e...
.NET 9 OpenAPI with Scalar UI
Переглядів 7928 днів тому
In this video, I explore how .NET 9 provides built-in support for OpenAPI document generation, simplifying API documentation for your projects. I demonstrate how you can move beyond the traditional Swagger UI and integrate modern tools like Scalar for a sleek and user-friendly API interface. Learn how to leverage .NET 9's capabilities to enhance your API's presentation and functionality.
![Using NgxTranslate [v16] in Angular 19: What's New and Changed](http://i.ytimg.com/vi/YTKOXrEr4n0/mqdefault.jpg)
Using NgxTranslate [v16] in Angular 19: What's New and Changed
Переглядів 84Місяць тому
In this video, I demonstrate how to set up the latest version of the ngxTranslate package ([v16]) for translating Angular apps using Angular 19. Discover how the setup process has evolved in the standalone Angular architecture, eliminating the need for `AppModule` and `NgModule`. I’ll walk you through the new APIs and show how `TranslateModule.forRoot()` and `TranslateModule.forChild()` are no ...
Upgrading Angular Version from 14 to 18 with Real-World Challenges
Переглядів 135Місяць тому
In this reuploaded video with improved audio, I demonstrate how to upgrade an Angular project from version 14 to 18. Same project upgrade from version 18 to 19. ua-cam.com/video/YEYH_GTtQYg/v-deo.html Follow along as I update Angular Material and third-party library versions step by step. I also tackle a common real-world scenario where a third-party package doesn’t support Angular 18, showing ...
Angular Dependency Injection: Providing Services - Angular Interview Question
Переглядів 43Місяць тому
In this video from the Angular Architecture series, I explore the impact of service provider placement on instance creation and performance within your Angular app. Through a hands-on example with three components-AppComponent, UsersComponent, and UserDetailsComponent-I demonstrate how providing a service like UsersService at various levels can lead to unintended performance issues. Learn how i...
Angular Architecture: Understanding Component Imports with a C# Analogy
Переглядів 165Місяць тому
This video is part of the Angular Architecture playlist, where I explain why components need to be listed in the `imports` array of a parent component’s `@Component()` decorator. Using a practical example, I draw an analogy with "namespace" resolution in C# to make this concept easier to understand. Watch as I break down how Angular resolves and uses components, reinforcing your knowledge of An...
How Angular Architecture Works - From index.html to Component Tree
Переглядів 91Місяць тому
In this video, I break down the core of Angular's architecture, starting from the index.html file in Angular 19 project. Discover how the browser processes custom elements like `app-root`, and learn how Angular resolves these selectors with their corresponding components, such as `AppComponent`, `app-users`, and `app-user-details`. Watch as I demonstrate the rendering process in the browser and...
GET HTTP Calls in Angular 19 - Signals, Resource API & Fetch Explained
Переглядів 178Місяць тому
This video is part of the CRUD operations playlist in Angular 19, where I demonstrate how to perform GET HTTP API calls using Angular 19's latest features. Watch as I explain how to use the `fetch()` method, the experimental `resource()` API, and `computed()` signals for reactive state management. Learn how these tools simplify API calls and enhance the reactivity of your applications. Perfect ...
Angular Material 19 Setup - Toolbar & Sidenav with Toggle Feature
Переглядів 898Місяць тому
Learn how to seamlessly integrate Angular Material 19 into your Angular 19 project! In this video, I walk you through adding Angular Material, setting up a stylish toolbar, and creating a responsive sidenav menu with a toggle feature. Perfect for modern web applications, this tutorial simplifies the process step by step. Start building beautiful, functional UIs with Angular Material today!
Angular 19 - Model Input Signals - Goodbye @Input() & @Output()
Переглядів 116Місяць тому
Explore Angular's latest "Model Input" Signal feature that streamlines component communication! This video demonstrates how the new approach replaces the traditional `@Input()` and `@Output()` decorators, offering a cleaner and more efficient way to handle data flow. Whether you're upgrading to the latest version or learning Angular, this walkthrough will help you adopt this game-changing featu...
Cracking Dependency Injection: Build Custom DI, inject(), and @Injectable in TypeScript
Переглядів 113Місяць тому
Unlock the power of Dependency Injection with this ultimate guide! 🌟 Dive deep into the fundamentals and learn how to design your very own custom DI system in TypeScript, including `provide()`, `inject()` and `@Injectable` implementations. 📌 Topics Covered: 0:00 - Introduction to Dependency Injection 2:28 - Problem Statement: Tight coupling in HttpClient, UserService, and TodoService 9:58 - Imp...
Angular 19 Calling HTTP API: HttpClient, Signals, and resource() API
Переглядів 797Місяць тому
Discover how HTTP API calls have evolved in Angular 19! In this video, I walk you through: - The traditional approach using HttpClient and RxJS Subscribe() . - How to simplify API calls with AsyncPipe . - Leveraging Angular 17’s Signal APIs , including `computed()` and `toSignal()` for seamless observable-to-signal conversion. - A deep dive into Angular 19’s experimental resource() API , showca...
TypeScript Decorators Explained: Creating a Custom @Component Decorator
Переглядів 54Місяць тому
In this video, I unravel the concept of Decorators in TypeScript and take a deep dive into Class Decorators . Here's what you'll learn: - What are Decorators and why they are powerful in TypeScript? - Step-by-step creation of a simple Class Decorator without parameters. - Building an advanced @Component decorator , inspired by Angular. - Understanding how Angular uses decorators for mapping and...
Master Advanced TypeScript Types: Union, Partial, Map vs. Record Explained
Переглядів 37Місяць тому
Master Advanced TypeScript Types: Union, Partial, Map vs. Record Explained
Angular Basics: Understanding Project Structure and Bootstrapping with Angular 19
Переглядів 83Місяць тому
Angular Basics: Understanding Project Structure and Bootstrapping with Angular 19
Introduction: Your Guide to Angular, TypeScript, and More!
Переглядів 110Місяць тому
Introduction: Your Guide to Angular, TypeScript, and More!
TypeScript Generics: Creating Powerful Generic Classes
Переглядів 39Місяць тому
TypeScript Generics: Creating Powerful Generic Classes
TypeScript Classes Explained: A Complete Beginner's Guide
Переглядів 30Місяць тому
TypeScript Classes Explained: A Complete Beginner's Guide
Getting Started with TypeScript: Basics for Beginners
Переглядів 80Місяць тому
Getting Started with TypeScript: Basics for Beginners
Angular 19 Version Upgrade: Output Signals Migration
Переглядів 80Місяць тому
Angular 19 Version Upgrade: Output Signals Migration
Input Signals in Angular 19: Upgrade from @Input() to Signals
Переглядів 133Місяць тому
Input Signals in Angular 19: Upgrade from @Input() to Signals
Create Minimal APIs in .NET 9: A Step-by-Step Guide Using dotnet CLI
Переглядів 74Місяць тому
Create Minimal APIs in .NET 9: A Step-by-Step Guide Using dotnet CLI
Effortless Migration to Lazy-Loaded Routes in Angular
Переглядів 41Місяць тому
Effortless Migration to Lazy-Loaded Routes in Angular
Automatic Migration to inject() for Angular Dependency Injection
Переглядів 26Місяць тому
Automatic Migration to inject() for Angular Dependency Injection
Angular Control Flow Migrating: *ngIf to @if, *ngFor to @for, *ngSwitch to @switch automatically
Переглядів 49Місяць тому
Angular Control Flow Migrating: *ngIf to @if, *ngFor to @for, *ngSwitch to @switch automatically
Angular Tips & Hacks: Customize Angular's {{ expression }} Syntax to [[ expression ]]
Переглядів 322 місяці тому
Angular Tips & Hacks: Customize Angular's {{ expression }} Syntax to [[ expression ]]
Angular LifeCycle Hook ngOnDestroy for Angular Service
Переглядів 212 місяці тому
Angular LifeCycle Hook ngOnDestroy for Angular Service
Hi, I have an issue regarding proxy- I get an error message ECONN_REFUSED. Can you please tell how to fix this issue?
Good! but I missed of the way to catch the error return in all cases.
thank you
Suppose you want to fetch the ToDo by id, where the id is a signal. How to do this?
Here is the demo of how to do it. ua-cam.com/video/VC4gmxsj09o/v-deo.html
I can barely hear you
sorry.. please check newly uploaded video with better sound quality. ua-cam.com/video/4qHiXRaqTzA/v-deo.html
Great Explanation ❤❤❤❤
Great tutorial, great explanation. Could you provide a crud operation video with Rx resource or resource. And show different way to achieve it as you did in this nice video tutorial? It will be great!!!
Thanks! Yes, it's already on the roadmap and will be released soon. Don't forget to subscribe to get notified.
Can you cover full course???
Yes, that's the plan. Thanks for subscribing.
Very detail explanation , great video ❤❤❤❤
Nice video
Hope you are planning to upload more informative videos as per your expertise level.
Thanks, will keep doing so...
Good explanation balram bhai. Keep it up.
Nice video , understood the importance of providers for services
Thanks!
Hi Balram Chavan Thanks for making this video. I am facing one issue while doing angular upgrade from 14 to 18 The Package.JSON file dependencies are not updating with relative versions in my project.
Hi, Looks like the global configuration is set to `npm install <package_name> --no-save`. Try installing packages with `npm install <package_name> --save` or if it's just dev dependencies, then `npm install <package_name> --save-dev`. This should update package.json and package-lock.json files.