Daily hand-picked #angular resources. Open notification for informing firstly. 🔈
- Tweets 131
- Following 684
- Followers 3,426
- Likes 263
ALT Tutorial de Angular 17 desde cero
ALT Say hello {{again}} to Angular on November 6th at 10am Pacific: goo.gle/angular-event
![@Directive({
selector: "[ngSignalModel][ngModel]",
exportAs: "ngSignalModel",
providers: [
{
provide: NgControl,
useExisting: forwardRef(() => NgSignalModel)
}
]
})
export class NgSignalModel<T = any> implements OnChanges, OnInit {
@Input("ngSignalModel") signal: SettableSignal<T>;
#ngModel = inject(NgModel);
ngOnInit() {
this.#ngModel.valueAccessor.registerOnChange((value: T) => {
this.signal.set(value);
});
}
ngOnChanges(changes: SimpleChanges) {
const value = changes.signal.currentValue();
this.#ngModel.model = value;
const model = new SimpleChange(undefined, value, true);
this.#ngModel.ngOnChanges({ model });
}
}
@NgModule({
exports: [NgSignalModel, FormsModule],
declarations: [NgSignalModel],
imports: [FormsModule]
})
export class SignalFormsModule {}](https://venexa.site/media/Fqx32zVWYAMuGUC.jpg)
ALT @Directive({ selector: "[ngSignalModel][ngModel]", exportAs: "ngSignalModel", providers: [ { provide: NgControl, useExisting: forwardRef(() => NgSignalModel) } ] }) export class NgSignalModel<T = any> implements OnChanges, OnInit { @Input("ngSignalModel") signal: SettableSignal<T>; #ngModel = inject(NgModel); ngOnInit() { this.#ngModel.valueAccessor.registerOnChange((value: T) => { this.signal.set(value); }); } ngOnChanges(changes: SimpleChanges) { const value = changes.signal.currentValue(); this.#ngModel.model = value; const model = new SimpleChange(undefined, value, true); this.#ngModel.ngOnChanges({ model }); } } @NgModule({ exports: [NgSignalModel, FormsModule], declarations: [NgSignalModel], imports: [FormsModule] }) export class SignalFormsModule {}
![<!-- mySignal is a signal -->
<input [ngSignalModel]="mySignal" ngModel>](https://venexa.site/media/Fqx36_gWIAEkkHq.jpg)
ALT <!-- mySignal is a signal --> <input [ngSignalModel]="mySignal" ngModel>
![import { HttpClient, HttpContext, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IS_JSON_PLACEHOLDER } from './http-contexts';
@Injectable({
providedIn: 'root',
})
export class JsonPlaceholderClient extends HttpClient {
override request(
first: string | HttpRequest<any>,
url?: string,
options: RequestOptions = {}
): Observable<any> {
if (typeof first === 'string') {
this.#setPlaceholderContext(options);
return super.request(first, url, options);
}
this.#setPlaceholderContext(first);
return super.request(first);
}
#setPlaceholderContext(optionsOrRequest: { context?: HttpContext }) {
optionsOrRequest.context ??= new HttpContext();
optionsOrRequest.context.set(IS_JSON_PLACEHOLDER, true);
}
}
type RequestOptions = Parameters<HttpClient['request']>[2];](https://venexa.site/media/FmXDAxFagAAn6eG.jpg)
ALT import { HttpClient, HttpContext, HttpRequest } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { IS_JSON_PLACEHOLDER } from './http-contexts'; @Injectable({ providedIn: 'root', }) export class JsonPlaceholderClient extends HttpClient { override request( first: string | HttpRequest<any>, url?: string, options: RequestOptions = {} ): Observable<any> { if (typeof first === 'string') { this.#setPlaceholderContext(options); return super.request(first, url, options); } this.#setPlaceholderContext(first); return super.request(first); } #setPlaceholderContext(optionsOrRequest: { context?: HttpContext }) { optionsOrRequest.context ??= new HttpContext(); optionsOrRequest.context.set(IS_JSON_PLACEHOLDER, true); } } type RequestOptions = Parameters<HttpClient['request']>[2];
ALT import { HttpRequest, HttpHandlerFn } from '@angular/common/http'; import { IS_JSON_PLACEHOLDER } from './http-contexts'; export const interceptJsonPlaceholder = ( req: HttpRequest<unknown>, next: HttpHandlerFn ) => { if (!req.context.get(IS_JSON_PLACEHOLDER)) return next(req); const cloneReq = req.clone({ url: 'https://jsonplaceholder.typicode.com' req.url, }); return next(cloneReq); };
![import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { JsonPlaceholderClient } from './json-placeholder.client';
@Component({
selector: 'app-root',
standalone: true,
imports: [AsyncPipe, JsonPipe],
template: ` <div class="container p-3">{{ todo$ | async | json }}</div> `,
})
export class AppComponent {
todo$ = inject(JsonPlaceholderClient).get('/todos/1');
}](https://venexa.site/media/FmXDAw1aYAIsZof.jpg)
ALT import { AsyncPipe, JsonPipe } from '@angular/common'; import { Component, inject } from '@angular/core'; import { JsonPlaceholderClient } from './json-placeholder.client'; @Component({ selector: 'app-root', standalone: true, imports: [AsyncPipe, JsonPipe], template: ` <div class="container p-3">{{ todo$ | async | json }}</div> `, }) export class AppComponent { todo$ = inject(JsonPlaceholderClient).get('/todos/1'); }
ALT Code snippet showcasing the implementation of Functional Router Guards in Angular v15.
ALT Code from https://stackblitz.com/edit/ng-for-await?file=src/for-await-of.directive.ts
ALT Code from https://stackblitz.com/edit/ng-for-await?file=src/app.ts
