Remy's Blog. Dev Insights

Today, I'll share with you an Angular 7 application from where you can start building your own. I've followed as much as possible the best practices available here . You can find the source code at this repository . If you can improve this solution, do not hesitate to tell me. 😀 Let's inspect the different parts: Core Module 1. guards I've incorporated basically 2 guards:  The AuthGuard implements both CanActivate and CanLoad . This guard is responsible for checking if the current user is authenticated and authorized. If not authenticated, the user will be redirected to the login page. If the authenticated user hasn't sufficient permission, he will be redirected to the home page. The NoAuthGuard which implements CanActivate , provides a way to restrict a route when a user is already logged in (e.g. login). 2. interceptors The ErrorInterceptor basically intercepts client errors and server side errors. When it catches a 401 or 403 ...

For a rather large Angular project (7.2.10), I use the Angular Material components as well. As you may probably know this library does not provide out of the box a good layout system, CSS reset and utilities... So why not include these elements from the Bootstrap 4 framework ? I'll show you how you can add parts of the Bootstrap to your Angular project. Add Bootstrap to package.json You first need to include the Bootstrap to your dependencies : npm install bootstrap --save Add Bootstrap parts to the global stylesheet ( src/style.scss ) When adding the Reboot, we have to fix some issues by including : src/_variables.scss src/_reset.scss Thanks...

The Chips component documentation from the angular material website, describes how to use the MatChipInput directive with a chip-list for adding or removing chips. I'll show you how you can implement the same component using Reactive Form. The HTML template: The TS component file:   As you can see, we use the FormBuilder class to simplify the form creation. We define our requirements as a  FormArray within our FormGroup. The requirements will be accessed in our template with this expression inside the *ngFor of <mat-chip></mat-chip> : *ngFor="let requirement of form.get('requirements').controls; let i = index;" In the ChipComponent class, the requirements array is accessed by using this expression: this.form.get('requirements') as FormArray; Thanks