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] |
| }); |
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
| ||||||||||||||||||||||
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 |
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 |
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