NgRx Signal Store intellisense and type detection isn't working when use in HTML

I am recenbly new to NgRx Signal Store. and I have a question around how (if possible) to enable intellisense and type detection on the signal store class in HTML.

// job.store.ts - here I defined a JobRole Signal Store

import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';


export interface JobRole {
name:string,
levels: string[]
}

type JobRoleState = {
jobRoles: JobRole[];
isLoading: boolean;
error: string | null
};

const initialState: JobRoleState = {
jobRoles: [{name: "Data Scientist", levels: ['1','2']}],
isLoading: false,
error: null
};

export const JobRoleStore = signalStore(
{
providedIn:'root'
},
withState(initialState),
withMethods((store)=> ({
loadAll(){
patchState(store, {jobRoles: [{name: "Full Stack Dev", levels: ['1','2','3']}]})
}
})),
);

What is working:


The following implemention of using signal from previously defined signal store worked fine. Especially the intellisense and type detection is working properly. See screenshot below.

@Component({
imports: [
RouterModule,
JsonPipe,
AsyncPipe,
],
standalone: true,
selector: 'app-root',
template: `
<div>
{{ jobRoles[0].name }}
</div>
`,
styleUrl: './app.component.scss',
})
export class AppComponent {
jobRoles: JobRole[] = []
jobRoleStore = inject(JobRoleStore)
constructor() {
effect(() => {
// assign the emitted jobRoles value from signal store to local variable.
this.jobRoles = this.jobRoleStore.jobRoles()
});
}
}


Example where intellisense and type detection worked fine

What is Not working:


The following implemention of using signal from previously defined signal store worked fine. However, both intellisense and type detection is not working properly. See screenshot below.

@Component({
imports: [
RouterModule,
JsonPipe,
AsyncPipe,
],
standalone: true,
selector: 'app-root',
template: `
<div>
{{ this.jobRoleStore.jobRoles()[0].name }}
</div>
`,
styleUrl: './app.component.scss',
})
export class AppComponent {
jobRoleStore = inject(JobRoleStore)
constructor() {
}
}


Unable to detect jobRoleStore type in html Able to detect jobRoleStore type in typescript Example where intellisense and type detection isn't worked fine

I would like to get some help explain why type detection failed when direct usage of signal store class in html. As well as looking for potential solution to enable type detection of signal store class in html.

Continue reading...