[Angular 14] Inject() function

Before v14, we do DI like this:

@Component({
    name: 'app-root',
    template: `<h1>Hello!</h1>`
})
export class AppComponent {
    constructor(private http: HttpClient) {
    }
}

 

In V14, we can do:

@Component({
    name: 'app-root',
    template: `<h1>Hello!</h1>`
})
export class AppComponent {
    http = inject(HttpClient);
    auth = inject(AuthService);
    
    ngOnInit() {
        console.log(this.http);
    }
}

 

You can aslo use InjectionToken:

export cibst AUTH = new InjectionToken('AUTH', {
    providedIn: 'root',
    factory() {
        return inject(AuthService)
    }
})

@Component({
    name: 'app-root',
    template: `<h1>Hello!</h1>`
})
export class AppComponent {
    auth = inject(AUTH);
    
    ngOnInit() {
        console.log(this.auth);
    }
}

 

Use Factory in Providers:

@Injectable()
export class AuthService {
    constructor(http: HttpClient) {}
}

@NgModule({
    ...
    providers: [
        provide: AuthService,
        useFactory: () => {
            return new AuthService(inject(HttpClient))
        }
    ]
})

 

Other usecase:

//  Before 
export class AppComponent {
    constructor(private router: Router) {
        this.router.events.pipe(
            filter(e => e instanceof NavigationEnd)
        ).subscribe()
    }
}

// Now
export function getRouterEvent() {
    return inject(Router).events
        .pipe(
            filter(e => e instanceof NavigationEnd)
        )
}

@Component()
export class AppComponent {
    routerEvents = getRouterEvent();
    constructor() {
        this.routerEvents.subscribe(console.log)
    }
}