Angular

This is a very quick run through of one approach to using a UI-Router with Angular 10 to manage the state of the ngx-bootstrap tabs. The basic approach has two parts: The router config that encodes the state in a known way, and A directive that integrates with the tab directive. The UI-router state is setup to take encode the tab identifier as a parameter in the URL. It is also configured to pass the new router value into the component, as opposed to replacing the component which is the default behaviour. This is done using the dynamic property: ...

In Angular 8/9 the default behaviour is to take control of all <form> elements within the view hierarchy. This can be see by looking at the selector for the form directive. @Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]', providers: [formDirectiveProvider], host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'}, outputs: ['ngSubmit'], exportAs: 'ngForm' }) When the Angular Form directive is controlling a <form> element it is not possible to do a generic form POST. For instance, if you want to redirect to a third party payment service, which requires you to POST to the server to setup a session, and then redirect the current browser session. ...

What follows is an explanation of how to resolve an issue that you may hit with Angular if you are using services from modules. In my application I use the pattern of having a service that can be used to display modals, so that other components can show a modal using a method call, and not have to worry about the specifics of the modal implementation. As a mock example, suppose you have a feature module, that has a component, a modal, and a modal service: ...

Out of the box the support for Angular under Storybook is great. However, depending on how customised your setup is, you’ll probably need to harmonise your Angular setup with your Storybook setup. Typescript Paths Because we have customised tsconfig.json roots in order to clean up our import paths, we first need to make sure that Storybook’s Webpack uses the the TsconfigPathsPlugin. const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = async ({ config, mode }) => { config.resolve.plugins = [new TsconfigPathsPlugin({})]; return config }; MapBox and Node core libraries Because we use MapBox we get the following error ...

As mentioned here if you use of from rxjs to implement mock services you can get some unexpected results. In my case, my code always cleans up its subscriptions. But, by default, of executes synchronously, so the following code will fail because sub isn’t set when the closure is called. import { of } from 'rxjs'; const mockService = { get() { return of([]); } } const sub = mockService.get() .subscribe(result => { this.list = result; sub.unsubscribe(); }); In order to get this code to behave like a the real service we need to use a scheduler. ...

I’ve recently been involved in upgrading a AngularJS + UI-Bootstrap + UI Router project to Angular 7 + ngx-bootstrap + UI Router. The reason for the upgrade was that the support for a lot of the other components was fading, and the availability of new components was far better for Angular 7 than AngularJS. Having said that, AngularJS is still going strong for better or worse. The approach was to use the Angular Upgrade module which allowed a component-by-component upgrade, and basically seamless interop between the two versions. This was helped a lot by the use of UI Router which navigates to both AngularJS and Angular 7 container components. ...