Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
The ui-select directive to a select and multi-select control with a search feature, I have to say is a control very useful. You can use it with a static list or dynamically getting data from a server.
In this post, I want to show you how to configure and to use ui-select directive to add a paging behavior (NOTA: by default the ui-select directive have no paging functionality).
For this post, I assume you already have knowledge about ngrx (a reactive state management framework for Angular), and you are working with reducers, actions, effects, and selector components. You can find information in ngrx. Today, I want to show you how to work with state inside of the effect component.
xxxxxxxxxx
@Injectable()
export class AppEffects {
constructor(private actions: Actions, private service: yourService) {}
infoEffect =
createEffect(() =>
this.actions.pipe(
ofType(getInfoAction),
mergeMap(() =>
this.service.getInfo()
.pipe(
map(resp => getInfoSuccessfulAction({info: resp,}))
)
)
)
);
}
This is a very simple example of an effect. It's defined by the getInfoAction action, and there is a call to service getInfo. Then, it's fired the action, getInfoSuccessfulAction. At this point, everything is straightforward, but what if you need to get some value from @ngrx/store. Well, the good news is you can do it; let me show you how to.