10 Angular and Typescript tricks and tips that will improve your application 

 

Angular


1. Define form parameters before Component definition



status: 'status',
classification: 'classification',
note: 'note'
};

@Component({
selector: 'app-preview',
templateUrl: './preview.component.html',
styleUrls: ['./preview.component.scss']
})

this.form = this.formBuilder.group({
[FORM_PARAMS.status]: [false],
[FORM_PARAMS.classification]: [null],
[FORM_PARAMS.note]: [null, Validators.required]
});

this.form.patchValue({ [FORM_PARAMS.status]: 'status' });


2. Use renderer addClass, removeClass where possible. It will prevent too many change detection checks.


[ngClass]="isRowCollapsed(rowIndex) ? 'arrowDown' : 'arrowRight'"
(click)="collapseRow(rowIndex)">
</div>

collapseRow(rowIndex: number) {
this.setRowCollapsed(rowIndex);
}

// FASTER
<div
(click)="collapseRow($event, rowIndex)"
</div>

collapseRow(event, rowIndex: number) {
this.setRowCollapsed(rowIndex);
this.render.removeClass(event.target, 'arrowDown');
this.render.addClass(event.target, 'arrowRight');
}


3. Try to use get, set on Input() instead ngOnChanges. When you have many Inputs in the ngOnChanges, each “if” has to be checked.


const data: SimpleChange = changes.data;
if (data && data.currentValue) {
this.data = [...data.currentValue];
}
if (configuration && configuration.currentValue) {
this.config = configuration.currentValue;
}
}

// FASTER

public _config: Config;
@Input('configuration')
set configuration(value: Config) {
this._config = value;
}

get configuration(): Config {
return this._config;
}

_data: Data;
@Input('data')
set data(value: Data) {
this._data = [...value];
}

get data(): any[] {
return this._data;
}


4. Use pipe when rendering content in ngFor 

{{ render(row, column) }}
</td>
render(row: any, column: string) {
return YourService.render(row, column);
}

// Faster

<td *ngFor="let column of columns">
{{ row | render:column }}
</td>

@Pipe({
name: 'render',
})
export class RenderPipe implements PipeTransform {
transform(row: any, column: string) {
return YourService.render(row, column);
}
}




5. Add baseUrl and path to your compilerOptions to avoid any inconsistency when importing other files


"compilerOptions": {
"baseUrl": "src",
"paths": {
"@core/*": ["app/*"],
"@assets/*": ["assets/*"]
}
}
}

import { Recruitment } from '@core/domain/recruitment';

instead

import { Recruitment } from '../../../domain/recruitment';


6. Add stylePreprocessorOptions to your angular.json file to avoid inconsistency while importing other files



"project-frontend": {
"root": "",
"sourceRoot": "src",
"projectType": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"stylePreprocessorOptions": { // <--- add this
"includePaths": [
"./src/assets/style/scss"
]
}
}
}
}
}

@import "variables";

instead

@import "../../assets/style/scss/variables";


7. Run npm outdated command or add npm-check once a month to keep your dependencies updated. It will definitely help you keep track of changes. It’s much easier to update Angular 5 to 6 than 4 to 6.

8. Run npm audit command once a month to check if any of the libraries has any vulnerabilities. It will help you keep your app secure.

if [[ $(npm audit | grep Critical -B3 -A10) != '' ]]; then exit 1; fi"

9. Use parent in form validation instead of this.form which may not be initialised while doing/performing custom validation check.



static validateEndDate(fc: FormControl) {
const startDate = fc.parent.get(FORM_PARAMS.startDate);
if (startDate.value) {
const diff = fc.value - startDate.value;
return (diff < 86400) ? { endDateInvalid: true } : null;
}
return null;
}

// Incorrect

static validateEndDate(fc: FormControl) {
const startDate = this.form.get(FORM_PARAMS.startDate);
if (startDate.value) {
const diff = fc.value - startDate.value;
return (diff < 86400) ? { endDateInvalid: true } : null;
}
return null;
}

10. Keep route names as const. It will prevent accidental typos.

public static readonly LOGIN = '/login';
public static readonly RECRUITMENTS = '/recruitments';
public static readonly RECRUITMENT_EDIT = '/recruitments/:id';
}

goToRecruitment($event, id: number) {
$event.preventDefault();
this.router.navigate([ROUTE.RECRUITMENT_EDIT.replace(':id', id)]);
}



Comments

Post a Comment

Popular posts from this blog

Image
How to Use Celery and RabbitMQ with Django Celery is an asynchronous task queue based on distributed message passing. Task queues are used as a strategy to distribute the workload between threads/machines. In this tutorial I will explain how to install and setup Celery + RabbitMQ to execute asynchronous in a Django application. To work with Celery, we also need to install RabbitMQ because Celery requires an external solution to send and receive messages. Those solutions are called message brokers . Currently, Celery supports RabbitMQ, Redis, and Amazon SQS as message broker solutions. Table of Contents Why Should I Use Celery? Installation Installing RabbitMQ on Ubuntu 16.04 Installing RabbitMQ on Mac Installing RabbitMQ on Windows and Other OSs Celery Basic Setup Creating Our First Celery Task Starting The Worker Process Managing The Worker Process in Production with Supervisord Further Reading ...
Read more
ReactJS - State State is the place where the data comes from. We should always try to make our state as simple as possible and minimize the number of stateful components. If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them. Using State The following sample code shows how to create a stateful component using EcmaScript2016 syntax. App.jsx import React from 'react' ; class App extends React . Component { constructor ( props ) { super ( props ); this . state = { header : "Header from state..." , content : "Content from state..." } } render () { return ( <div> <h1> { this . state . header }</ h1 > <h2> { this . state . content }</ h2 > </ div > ); } } export default App ; ...
Read more