It's interesting to note that the majority of functions in my Angular 2 application are private. Take a look at this component, which happens to be my largest one - a form with numerous child components.
import {
Component,
ViewChild,
ElementRef,
EventEmitter,
Output,
OnInit
} from '@angular/core';
import {
FormGroup,
FormBuilder,
Validators,
ControlValueAccessor,
FormControl,
AbstractControl,
ReactiveFormsModule
} from '@angular/forms';
import { ResultService } from '../../../services/result.service';
import { Result, FindRequest } from '../../../models/all-models';
import { HighlightDirective } from '../../../directives/highlight.directive';
import { DistanceUnitsComponent } from './distance-units.component';
import { MultiselectComponent } from
'../../../shared/subcomponents/multiselect-find-category.component';
import { MultiselectFindMealTypeComponent } from
'../../../shared/subcomponents/multiselect-find-meal-type.component';
import { NumberPickerComponent } from './number-picker.component';
import { InputComponent } from '../../../shared/subcomponents/input.component';
import { AreaComponent } from
'../../../shared/subcomponents/area-picker.component';
@Component({
selector: 'find-form',
templateUrl: 'app/find-page/subcomponents/find-page/find-form.component.html',
styleUrls: ['app/find-page/subcomponents/find-page/find-form.component.css'],
providers: [ResultService]
})
export class FindFormComponent implements OnInit {
@ViewChild('multiselectFindCategory')
private _multiselectFindCategory: MultiselectComponent;
@ViewChild('multiselectFindMealType')
private _multiselectFindMealType: MultiselectFindMealTypeComponent;
@ViewChild('distanceUnits') private _distanceUnits: DistanceUnitsComponent;
@ViewChild('numberPicker') private _numberPicker: NumberPickerComponent;
@ViewChild('areaInput') private _areaInput: AreaComponent;
@ViewChild('keywordsInput') private _keywordsInput: InputComponent;
@Output() private _onResultsRecieved:
EventEmitter<Object> = new EventEmitter<Object>();
@Output() private _onSubmitted: EventEmitter<boolean> =
new EventEmitter<boolean>
private _categoryError: string = 'hidden';
private _mealTypeError: string = 'hidden';
private _areaError: string = 'hidden';
private _findForm: FormGroup;
private _submitted: boolean = false;
private _findRequest: FindRequest;
private _displayMealCategories: boolean = false;
private _mealSelected: boolean = false;
private _place: google.maps.Place;
constructor(private _resultService: ResultService,
private _formBuilder: FormBuilder) {}
ngOnInit() {
this._findForm = this._formBuilder.group({
categories: [null, Validators.required],
mealTypes: [[], this._mealTypesValidator()],
location: null,
distanceNumber: null,
distanceUnit: 'kilometers',
keywords: null,
});
}
...
I'm aiming for best practices here by keeping everything private. Is it possible that this approach is inherent to Angular 2? Because typically in non-Angular apps, public elements are more prevalent. I'm pondering if my code is just highly decoupled since no other components need access to it. It's perplexing because I know there's significant logic that should be tested.
Am I overusing private methods? Or is it sound practice to keep them private? And should I simply focus on unit testing these private functions?