AngularUniv's profile picture. High-quality Angular Courses. Learn and keep up with the Angular Ecosystem. Helpdesk: helpdesk@angular-university.io

Angular University ๐Ÿ…ฐ๏ธ

@AngularUniv

High-quality Angular Courses. Learn and keep up with the Angular Ecosystem. Helpdesk: [email protected]

๊ณ ์ •๋œ ํŠธ์œ—

Check out my brand new Modern Angular With Signals Course: learn how to build modern Angular applications in reactive style with almost no RxJs. ๐Ÿ”— angular-university.io/course/angularโ€ฆ

AngularUniv's tweet image. Check out my brand new Modern Angular With Signals Course: learn how to build modern Angular applications in reactive style with almost no RxJs. 
๐Ÿ”— angular-university.io/course/angularโ€ฆ

Besides video courses and exercises, nothing locks in better with your newly acquired knowledge than getting yourself a certification. The brand-new Angular Certification Programโ€”๐ซ๐ž๐ฏ๐ข๐ž๐ฐ๐ž๐ ๐›๐ฒ ๐†๐จ๐จ๐ ๐ฅ๐ž ๐ƒ๐ž๐ฏ๐ž๐ฅ๐จ๐ฉ๐ž๐ซ ๐„๐ฑ๐ฉ๐ž๐ซ๐ญ๐ฌโ€” is now live: Propel Yourโ€ฆ

AngularUniv's tweet image. Besides video courses and exercises, nothing locks in better with your newly acquired knowledge than getting yourself a certification.

The brand-new Angular Certification Programโ€”๐ซ๐ž๐ฏ๐ข๐ž๐ฐ๐ž๐ ๐›๐ฒ ๐†๐จ๐จ๐ ๐ฅ๐ž ๐ƒ๐ž๐ฏ๐ž๐ฅ๐จ๐ฉ๐ž๐ซ ๐„๐ฑ๐ฉ๐ž๐ซ๐ญ๐ฌโ€” is now live:

Propel Yourโ€ฆ

๐Ÿš€ Angular 19's Linked Signal: A Writable Computed? The new linkedSignal API is a game-changer for managing derived state. It acts like computed, but writable, making it perfect for cases where values must be reset dynamically based on another signal. ๐Ÿ”ฅ Don't overuseโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular 19's Linked Signal: A Writable Computed?

The new linkedSignal API is a game-changer for managing derived state. 

It acts like computed, but writable, making it perfect for cases where values must be reset dynamically based on another signal. ๐Ÿ”ฅ

Don't overuseโ€ฆ

๐Ÿš€ Learn Angular for FREE! ๐ŸŽ“๐Ÿ”ฅ Kickstart your journey with this beginner-friendly course (2h 45m)! Master key Angular concepts: โœ… Components, Pipes, Services โœ… @if, @for, @switch directives โœ… HTTP Client (GET, POST, PUT, DELETE) ๐Ÿ‘‰ Enroll now: angular-university.io/course/gettingโ€ฆโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Learn Angular for FREE! ๐ŸŽ“๐Ÿ”ฅ

Kickstart your journey with this beginner-friendly course (2h 45m)! Master key Angular concepts:

 โœ… Components, Pipes, Services

 โœ… @if, @for, @switch directives

 โœ… HTTP Client (GET, POST, PUT, DELETE)

๐Ÿ‘‰ Enroll now: angular-university.io/course/gettingโ€ฆโ€ฆ

๐Ÿš€ Angular 19's resource() API is here! Handle async requests declaratively with: โœ… Reactive data fetching via signals โœ… Seamless loading states โœ… Automatic request cancellation (no RxJS needed!) ๐Ÿ’ก Type in a search boxโ€”only the final query hits the backend. No wastedโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular 19's resource() API is here!

Handle async requests declaratively with:

 โœ… Reactive data fetching via signals
 โœ… Seamless loading states
 โœ… Automatic request cancellation (no RxJS needed!)

๐Ÿ’ก Type in a search boxโ€”only the final query hits the backend. No wastedโ€ฆ

Swap traditional decorators like @ViewChild with new functions: Instead of: @ViewChild('title') title!: ElementRef; ngAfterViewInit() { console.log(this.title.nativeElement); } Use: title = viewChild<ElementRef>('title'); effect(() =>โ€ฆ

AngularUniv's tweet image. Swap traditional decorators like @ViewChild with new functions:

Instead of:

@ViewChild(&apos;title&apos;) title!: ElementRef;
ngAfterViewInit() { console.log(this.title.nativeElement); }

Use:

title = viewChild&amp;lt;ElementRef&amp;gt;(&apos;title&apos;);
effect(() =&amp;gt;โ€ฆ

๐Ÿš€ A cleaner alternative to *ngIf: the @if syntax! It's more intuitive, supports else if, and requires no imports. Example: @Component({ template: ` @if (showHello) { <h2>Hello</h2> } @else { <h2>Goodbye</h2> } `, }) class Test { showHello = true; } Why is this better + whatโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ A cleaner alternative to *ngIf: the @if syntax!
It&apos;s more intuitive, supports else if, and requires no imports.

Example:

@Component({
template: `
@if (showHello) {
&amp;lt;h2&amp;gt;Hello&amp;lt;/h2&amp;gt;
} @else {
&amp;lt;h2&amp;gt;Goodbye&amp;lt;/h2&amp;gt;
}
`,
})
class Test {
showHello = true;
}

Why is this better + whatโ€ฆ

๐Ÿš€ Angular has a cleaner way to manage template conditions with the @switch syntax! ๐ŸŽ‰ It's an intuitive alternative to ngSwitch for rendering template sections based on an expression's value. Here's a quick example: @switch (color) { @case ("red") { <div>Red</div> } @caseโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular has a cleaner way to manage template conditions with the @switch syntax! 

๐ŸŽ‰ It&apos;s an intuitive alternative to ngSwitch for rendering template sections based on an expression&apos;s value.

Here&apos;s a quick example:

@switch (color) {
@case (&quot;red&quot;) {
&amp;lt;div&amp;gt;Red&amp;lt;/div&amp;gt;
}
@caseโ€ฆ

Angular's @defer syntax is a performance game-changer! ๐Ÿš€ Load components only when needed with fine-grained control: @defer (on viewport) { <heavy-component /> } @placeholder { <loading-spinner /> } Separate bundles, custom triggers, and smart prefetching. Your apps just gotโ€ฆ

AngularUniv's tweet image. Angular&apos;s @defer syntax is a performance game-changer! ๐Ÿš€

Load components only when needed with fine-grained control:

@defer (on viewport) {
&amp;lt;heavy-component /&amp;gt;
} @placeholder {
&amp;lt;loading-spinner /&amp;gt;
}

Separate bundles, custom triggers, and smart prefetching. Your apps just gotโ€ฆ

๐Ÿš€ Angular's @Input just got a whole lot more powerful. You can now transform values on the fly without getters/setters using transform: @Input({ transform: (value: string) => value.toUpperCase(), }) name: string; Clean. Declarative. ๐Ÿ”ฅ More tricks ๐Ÿ‘‰โ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular&apos;s @Input just got a whole lot more powerful.

You can now transform values on the fly without getters/setters using transform:

@Input({
transform: (value: string) =&amp;gt; value.toUpperCase(),
})
name: string;

Clean. Declarative. ๐Ÿ”ฅ

More tricks ๐Ÿ‘‰โ€ฆ

๐Ÿš€ Understanding Angularโ€™s @Output is key to clean parent-child communication. Hereโ€™s a simple, powerful example: // child.component.ts @Output() myEvent = new EventEmitter<string>(); emitEvent() { this.myEvent.emit("Hello World!"); } // parent.component.html <app-childโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Understanding Angularโ€™s @Output is key to clean parent-child communication.

Hereโ€™s a simple, powerful example:

// child.component.ts
@Output() myEvent = new EventEmitter&amp;lt;string&amp;gt;();

emitEvent() {
this.myEvent.emit(&quot;Hello World!&quot;);
}

// parent.component.html
&amp;lt;app-childโ€ฆ

๐Ÿš€ Want to create a global loading indicator in Angular? Here's a quick guide: ๐Ÿ”น Build a LoadingService to control the spinner globally ๐Ÿ”น Use an HTTP interceptor to auto-toggle the spinner for backend requests ๐Ÿ”น Integrate with the router for seamless route transitionโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Want to create a global loading indicator in Angular? Here&apos;s a quick guide:

๐Ÿ”น Build a LoadingService to control the spinner globally
 ๐Ÿ”น Use an HTTP interceptor to auto-toggle the spinner for backend requests
 ๐Ÿ”น Integrate with the router for seamless route transitionโ€ฆ

๐Ÿš€ Angular Signal Inputs vs @Input: The future of reactivity in Angular! ๐ŸŒ Signal inputs, introduced in Angular 17.1, are a game-changer! They simplify reactivity and replace the need for OnChanges. No more manual updates when your input changes. Hereโ€™s how to refactorโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular Signal Inputs vs @Input: The future of reactivity in Angular! ๐ŸŒ

Signal inputs, introduced in Angular 17.1, are a game-changer! They simplify reactivity and replace the need for OnChanges. 

No more manual updates when your input changes.

Hereโ€™s how to refactorโ€ฆ

๐Ÿš€ Boost Your Angular Appโ€™s Speed! ๐Ÿš€ Is your app slow? Optimize bundle size with these steps: ๐Ÿ” Find the problem: npm install -g source-map-explorer ng build --configuration production --source-map && source-map-explorer dist/browser/*.js โšก Lazy-load everything:โ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Boost Your Angular Appโ€™s Speed! ๐Ÿš€

Is your app slow? Optimize bundle size with these steps:

๐Ÿ” Find the problem:

npm install -g source-map-explorer
ng build --configuration production --source-map &amp;amp;&amp;amp; source-map-explorer dist/browser/*.js

โšก Lazy-load everything:โ€ฆ

๐Ÿš€ Angular's Signal Components API โ€“ A Game-Changer! Angular 17.3+ introduces a cleaner, more reactive way to define components: โœ… input() โ†’ Replaces @Input() โœ… output() โ†’ Type-safe alternative to @Output() โœ… model() โ†’ Simplifies two-way binding No more OnChanges,โ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular&apos;s Signal Components API โ€“ A Game-Changer!

Angular 17.3+ introduces a cleaner, more reactive way to define components:

โœ… input() โ†’ Replaces @Input()

โœ… output() โ†’ Type-safe alternative to @Output()

โœ… model() โ†’ Simplifies two-way binding

No more OnChanges,โ€ฆ

๐Ÿš€ Master Angular's NEW signal-based queries! Say goodbye to lifecycle hooks & decoratorsโ€”use viewChild(), contentChild(), viewChildren(), & contentChildren() for a cleaner, reactive approach! ๐ŸšจQuery plain HTML: title = viewChild<ElementRef>("title");โ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Master Angular&apos;s NEW signal-based queries!

Say goodbye to lifecycle hooks &amp;amp; decoratorsโ€”use viewChild(), contentChild(), viewChildren(), &amp;amp; contentChildren() for a cleaner, reactive approach!

๐ŸšจQuery plain HTML:

title = viewChild&amp;lt;ElementRef&amp;gt;(&quot;title&quot;);โ€ฆ

๐Ÿš€ Angularโ€™s linkedSignal() โ€“ The Missing Link in Signal-Based Reactivity! ๐Ÿ”น Writable like a signal ๐Ÿ”น Reactive like computed ๐Ÿ”น Perfect for scenarios like form resets & state management No more awkward effect() workarounds! Check out how it works: ๐Ÿ‘‡ const quantity =โ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angularโ€™s linkedSignal() โ€“ The Missing Link in Signal-Based Reactivity!

๐Ÿ”น Writable like a signal
๐Ÿ”น Reactive like computed
๐Ÿ”น Perfect for scenarios like form resets &amp;amp; state management

No more awkward effect() workarounds! Check out how it works: ๐Ÿ‘‡

const quantity =โ€ฆ

๐Ÿš€ Want to master Angular? 25% of this in-depth Angular Core Deep Dive course is free! ๐Ÿ”น Learn @Input, @Output, Observables, Pipes, HTTP Client & more ๐Ÿ”น Covers both Signals & decorators ๐Ÿ”น Starts from basics, but dives into advanced topics Get a solid foundation inโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Want to master Angular? 25% of this in-depth Angular Core Deep Dive course is free!

๐Ÿ”น Learn @Input, @Output, Observables, Pipes, HTTP Client &amp;amp; more

 ๐Ÿ”น Covers both Signals &amp;amp; decorators

 ๐Ÿ”น Starts from basics, but dives into advanced topics

Get a solid foundation inโ€ฆ

๐Ÿš€ Angular Devs, did you know? toObservable() in Angular only emits the last signal value from a change detection cycle. Even if you set multiple values before subscribing, you'll only see the final one! Want to see why? Check out this deep dive by @AngularUniv ๐Ÿ‘‡โ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Angular Devs, did you know?

toObservable() in Angular only emits the last signal value from a change detection cycle. 

Even if you set multiple values before subscribing, you&apos;ll only see the final one!

Want to see why? Check out this deep dive by 

@AngularUniv ๐Ÿ‘‡โ€ฆ

๐Ÿš€ Slow Angular app? Don't guess, profile it! โœ… Generate a bundle report โœ… Identify heavy dependencies โœ… Use lazy loading & @defer for huge gains Learn how to optimize your appโ€™s performance step by step! โšก๐Ÿ‘‡ ๐Ÿ”—blog.angular-university.io/angular-perforโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ Slow Angular app? Don&apos;t guess, profile it!

โœ… Generate a bundle report

โœ… Identify heavy dependencies

โœ… Use lazy loading &amp;amp; @defer for huge gains

Learn how to optimize your appโ€™s performance step by step! โšก๐Ÿ‘‡

๐Ÿ”—blog.angular-university.io/angular-perforโ€ฆ

๐Ÿš€ ๐‚๐ฎ๐ซ๐ข๐จ๐ฎ๐ฌ ๐š๐›๐จ๐ฎ๐ญ ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐’๐ข๐ ๐ง๐š๐ฅ๐ฌ? This course breaks down how to build Angular apps using Signals with minimal RxJs. Learn change detection, CRUD, authentication & more, all in a modern signal-based approach. ๐ŸŽฏ โœ… 25% of lessons FREE! Start learningโ€ฆ

AngularUniv's tweet image. ๐Ÿš€ ๐‚๐ฎ๐ซ๐ข๐จ๐ฎ๐ฌ ๐š๐›๐จ๐ฎ๐ญ ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐’๐ข๐ ๐ง๐š๐ฅ๐ฌ?

This course breaks down how to build Angular apps using Signals with minimal RxJs.

Learn change detection, CRUD, authentication &amp;amp; more, all in a modern signal-based approach. ๐ŸŽฏ

โœ… 25% of lessons FREE! Start learningโ€ฆ

Loading...

Something went wrong.


Something went wrong.