Currently, to provide services in Angular, you include them in an @NgModule
:
@Injectable()
@if (user.isHuman) { | |
<human-profile [data]="user" /> | |
} @else if (user.isRobot) { | |
<!-- robot users are rare, so load their profiles lazily --> | |
@defer { | |
<robot-profile [data]="user" /> | |
} | |
} @else { | |
<p>The profile is unknown! | |
} |
const HERO_API_URL = new InjectionToken<string>('HERO_API_URL'); | |
@Injectable() | |
export class HeroService { | |
// old way, 'string' has to be declared and is not type checked | |
constructor(@Inject(HERO_API_URL) private apiUrl: string) {} | |
// new way, type is automatically correct | |
private apiUrl = inject(HERO_API_URL); | |
} |
function configureStoreWithFeature(feature: ...): Provider[] { | |
return [ | |
{ | |
provide: Store, | |
useFactory: () => { | |
const rootStore = inject(RootStore); | |
for (const feature of inject(STORE_FEATURE, [])) { | |
rootStore.registerFeature(feature); | |
} | |
return rootStore; |
export const ROUTES: Route[] = [ | |
/* ...other routes */ | |
{ | |
path: 'lazy', | |
loadComponent: () => import('./lazy.component').then(mod => mod.LazyPageComponent), | |
}, | |
]; |
// In a separate `lazy.routing.ts` file: | |
@NgModule({ | |
imports: [ | |
LazyPageModule, | |
RouterModule.forChild([ | |
{path: '', pathMatch: 'full', component: LazyPageComponent}, | |
]), | |
], | |
}) | |
export class LazyPageRoutingModule {} |
import * as i0 from './test'; | |
import * as i1 from '@angular/common'; | |
import * as i2 from '@angular/core'; | |
const _ctor1: <T = any, U extends i2.NgIterable<T> = any>(init: Pick<i1.NgForOf<T, U>, "ngForOf" | "ngForTrackBy" | "ngForTemplate">) => i1.NgForOf<T, U> = null!; | |
/*tcb1*/ | |
function _tcb1(ctx: i0.TestCmp) { if (true) { | |
var _t1 /*T:DIR*/ /*165,197*/ = _ctor1({ "ngForOf": (((ctx).users /*190,195*/) /*190,195*/) /*187,195*/, "ngForTrackBy": null as any, "ngForTemplate": null as any }) /*D:ignore*/; | |
_t1.ngForOf /*187,189*/ = (((ctx).users /*190,195*/) /*190,195*/) /*187,195*/; |
<span *ngFor="let user of users">{{user.name}}</span> |
export declare class NgIf<T> { | |
// … | |
static dir: ng.DirectiveDeclaration<NgIf<any>, "[ngIf]", never, { "ngIf": "ngIf"; "ngIfThen": "ngIfThen"; "ngIfElse": "ngIfElse"; }, {}, never>; | |
} |
export declare class CommonModule { | |
static mod: ng.NgModuleDeclaration<CommonModule, [typeof NgClass, typeof NgComponentOutlet, typeof NgForOf, typeof NgIf, typeof NgTemplateOutlet, typeof NgStyle, typeof NgSwitch, typeof NgSwitchCase, typeof NgSwitchDefault, typeof AsyncPipe, ...]>; | |
// … | |
} |