Best Practices when using Angular CLI

Angular is one of the best platforms to create Single Page Applications (SPA). We will go through several practices which will make the application more appreciative.

Make Use of track-By:

When generating a different template for each item from the collection, ngFor is one of the directives which we can use.

<ul>
????<li *ngFor="let item of items;">{{item.id}}</li> 
</ul>         

Let’s look into what is the problem with ngFor. If we need to update the iterative data due to some requirements. In that case, it will be the starting point of the problem as Angular does not keep any record of the data being iterated and is unknowing of the data being added or removed. To resolve this, Angular releases all the DOM elements related to the collection and includes them again. And we all know how costly DOM manipulations can be when dealing with a large collection of data.

To avoid this expensive manipulation, we can use track-By. The use of track-By is one of the best practices in Angular. It gives a special identifier to each item in the collections, and thus the rendering process of the whole DOM can be excluded.

@Component(
? selector: 'demo-app',
? template: `
??? <ul>
????? <li *ngFor="let item of items;trackBy: trackByFunc">{{item.id}}</li>
??? </ul>
??? 
<button (click)="getAllItems()">Click to Refresh</button>
? `,
})
export class DemoApp {
 
??constructor() {
??? this.items = [{id: 10}, {id: 20}, {id: 30}];
? }{
? getAllItems() 
??? this.items = this.getAllItemsFromServer();
? }
? 
??getAllItemsFromServer() {
??? return [{id: 10}, {id: 20}, {id: 30}, {id: 40}];
? }
? 
??trackByFunc(i, item) {
??? return item.id;? // or i
? }
}{        

Try Avoiding the Use of Logic in the Component:

It is necessary but the best way to keep our components separate from our logic. Mixing the components and business logic; making it too complicated and messy to understand. And that’s why it is best to follow angular coding standards and best practices, i.e., logic in a separate service.

Here are several reasons for avoiding the use of logic in the Angular programming standards –

• UI and component testing is handled differently and is rather complicated than logic testing. And that’s why we should have separate services for component and business logic.
• Different services for business logic improve code quality and reusability. When you have your logic in your separate service, you can use that service in multiple components. And this way, the code coverage Angular decreases, and eventually the build size too. You can reuse the code to write less code.
• It truly enhances the code review, readability, neatness of the code, and performance of the high-scale application.

File Naming:

While creating?files, we should keep the following things in mind.

• Names of folders and files should clearly state their intent.
• Names should be compatible with the same pattern in which we mention the file’s feature first and then the type, dot separated.
• For example,?dashboard.component.ts?or?home.component.html?or?auth.service.ts

If we want to add more expressive names to our files, we should use a dash(-) to separate the words in the name: ts-home.component.ts book-ticket.component.ts

Using Sass:

Sass is a style initialization that brings support for fancy things like variables (even though CSS will get variables shortly), functions, mixins... You name it...

Sass is also required to beneficially use the official?Angular Material Components?library with its?costly theming capabilities. It is safe to adopt that using Sass is the default choice for most projects.

To use Sass, we have to create our application using Angular CLI?ng new?command with?the --style sass?flag. This establishes most of the necessary configuration. One thing which is not added by default is?stylePreprocessorOptions?with?include paths,?and we can set it up individually with the mandatory root?"./"?and optional?"./themes" ?values. This helps our editor to find imported symbols and boosts developer experience with code completion of Angular Material variables and utility functions.

Angular Project Structure:

Creating an Angular project structure is again a simple but crucial thing to follow. It helps to have a clear view of the components in the application. If you have not rightly structured your project, then you may be in difficulty managing the whole application.

Angular State Management Best practice: Use Central State Management (Redux/Ngrx):

State management is manageable when you are working with small or medium-sized Angular applications, but as the size of the application extends, the process becomes quite tricky and lengthy. There are so many components that have their own local states, and we need to have smooth communication between these components. It is best to follow Angular State Management's best practice, i.e., use central state management. Now you might be surprised at what central state management is.?

Here is the answer— Central State Management means holding all the states of the components in one place, with no need to split them among many small components unless there’s a requirement for it. As the state of the whole application is managed in one place, it makes communication between components a lot simpler.?

Benefits of Central State Management –

• No need to find the component tree, as the state is managed in one place.
• It makes the transfer of data simple.
• The main problem of communication between the components is solved if our application has a centralized state.
• It makes debugging less time-consuming.