Check out how to build a side navigation that fits perfectly into an admin layout or any dashboard page. We are going to create a simple collapsible sidenav that can be easily integrated into any Angular project that uses Bootstrap.
Providing pagination for displaying large set of data will improve user experience and reduce the response time. Spring Boot comes with out-of-the-box solution for handling pagination, so let’s check how to implement it in an example application.
Fetching entities with complex relationships can consume a lot of resources during calls to your API. To minimize the size of the requested json string, you can use the LAZY fetch type. This will result in accessing only the serialized object and its properties – without considering its relations. But often you need to obtain the identifiers of the associated objects as well. Check out how to fetch an entity with an id of a related object while preserving proper serialization and deserialization.
Angular supports the decomposition of components by allowing you to include one into another. To test a component that contains other elements you have to declare them in the test configuration. Don’t forget about any @Input property of an aggregated component or running the test suite will result with the following error: Template parse errors: Can’t bind to property since it isn’t a known property of component
An Angular app is served by a different host than a Spring Boot API, so reaching for data via REST API will result in the following error: “Failed to load http://localhost:8080/api: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.” Read this post to learn how to configure Cross-origin resource sharing (CORS) to enable the cross-domain communication on a development environment.
In a multi module application Spring Boot should surrender routing control to Angular, otherwise trying to access any route other than the root page will result in a Whitelabel Error Page: “There was an unexpected error (type=Not Found, status=404)”
Check out the example of a multi-layout Angular application templates complemented with Bootstrap styles.
In case of complex projects it is often expected to provide different layouts adapted to the needs of users – the logged-in user requires different UI elements than the guest. We have to customise the appearance of applications time and again taking into account many various aspects. Angular allows you to organise the presentation layer to easily handle multiple layouts.
With Angular CLI you can bootstrap a new project effortlessly. Let’s create a new Angular 6 application complemented with Bootstrap 4 and Sass preprocessor.
If you use git to secure the outcome of your work frequently, the code responsible for one functionality may be scattered across many commits within a feature branch. You can still commit a unit of work as a whole even if you pushed it to the origin in several stages.