\n```\n\n# Angular Forms\n\n## Template driven forms\nForm logic (validation, properties) are kept in template\n\n**sample html**\n```html\n
\n```\n\n**sample component**\n```ts\n@ViewChild(\"f\") form: any;\nfirstName: string = \"\";\nlangs: string[] = [\"English\", \"French\", \"German\"];\n\nonSubmit() {\n\tif (this.form.valid) {\n\t\tconsole.log(\"Form Submitted!\");\n\t\tthis.form.reset();\n\t}\n}\n```\n\n## Reactive forms\nForm logic (validation, properties) are kept in component\n\n**sample html**\n```html\n
\n```\n\n**sample component**\n```ts\nregisterForm: FormGroup;\nsubmitted = false;\n\nconstructor(private formBuilder: FormBuilder) { }\n\nngOnInit() {\n\tthis.registerForm = this.formBuilder.group({\n\t\tfirstName: [{{here default value}}, Validators.required],\n\t\tlastName: ['', Validators.required],\n\t\temail: ['', [Validators.required, Validators.email]],\n\t\tpassword: ['', [Validators.required, Validators.minLength(6)]]\n\t});\n}\n\n// convenience getter for easy access to form fields\nget f() { return this.registerForm.controls; }\n\n onSubmit() {\n\t this.submitted = true;\n\n\t// stop here if form is invalid\n\tif (this.registerForm.invalid) {\n\t\treturn;\n\t}\n\n\talert('SUCCESS!! :-)')\n}\n```\n\n## Custom Validator for Reactive forms\n\n**Function**\n```ts\nvalidateUrl(control: AbstractControl) {\n if (!control.value || control.value.includes('.png') || control.value.includes('.jpg')) {\n return null;\n }\n return { validUrl: true };\n }\n```\n\n**Usage**\n```ts\nthis.secondFormGroup = this._formBuilder.group({\n imageCtrl: ['', [Validators.required, this.validateUrl]]\n});\n```\n\n**Multi-field validation**\n```ts\nvalidateNameShire(group: FormGroup) {\n if (group) {\n if (group.get('isShireCtrl').value && !group.get('nameCtrl').value.toString().toLowerCase().includes('shire')) {\n\treturn { nameShire : true };\n }\n }\n return null;\n }\n```\n\n**Multi-field validation usage***\n```ts\nthis.firstFormGroup.setValidators(this.validateNameShire);\n```\n\n**Error handling**\n```html\n
Name is too long
\t\t\t\t\n
Shire dogs should have \"shire\" in name
\n```\n\n## Custom Validator Directive for Template driven forms\nTo register our custom validation directive to NG_VALIDATORS service we have to do it like this:\n(thanks to multi parameter we won't override NG_VALIDATORS but just add CustomValidator to NG_VALIDATORS)\n\n```ts\n@Directive({\n\tselector: '[CustomValidator]',\n\tproviders: [{provide: NG_VALIDATORS, useExisting: CustomValidator, multi:true}]\t\t\t\t\t\t\n})\n```\n\nExample:\n```ts\n@Directive({\n\tselector: '[customValidation]',\n\tproviders: [{provide: NG_VALIDATORS, useExisting: \tEmailValidationDirective, multi: true}]\n})\nexport class CustomValidation implements Validator {\n\tconstructor() { }\n\tvalidate(control: AbstractControl): ValidationErrors {\n\treturn (control.value && control.value.length <= 300) ? \n\t\t{myValue : true } : null;\n\t}\n}\n```\n\nFor multiple fields:\n```ts\nvalidate(formGroup: FormGroup): ValidationErrors {\n\tconst passwordControl = formGroup.controls[\"password\"];\n\tconst emailControl = formGroup.controls[\"login\"];\n\tif (!passwordControl || !emailControl || !passwordControl.value || !emailControl.value) {\n\t\treturn null;\n\t}\n\n\tif (passwordControl.value.length > emailControl.value.length) {\n\t\tpasswordControl.setErrors({ tooLong: true });\n\t} else {\n\t\tpasswordControl.setErrors(null);\n\t}\n\treturn formGroup;\n}\n\n```\n\n## ngModel in custom component\n\n1. Add to module:\n```ts\nproviders: [\n\t{\n\t\tprovide: NG_VALUE_ACCESSOR,\n\t\tuseExisting: forwardRef(() => TextAreaComponent),\n\t\tmulti: true\n\t}\n]\n```\n\n2. Implement ControlValueAccessor interface\n```ts\ninterface ControlValueAccessor {\n\twriteValue(obj: any): void\n\tregisterOnChange(fn: any): void\n\tregisterOnTouched(fn: any): void\n\tsetDisabledState(isDisabled: boolean)?: void\n}\n```\n\n\n| Function | Description |\n| ------------- | ------------- |\n| registerOnChange | Register a function to tell Angular when the value of the input changes |\n| registerOnTouched | Register a function to tell Angular when the value was touched |\n| writeValue | tell Angular how to Write a value to the input |\n\nSample implementation:\n```ts\n\n@Component({\n selector: 'app-text-area',\n templateUrl: './text-area.component.html',\n styleUrls: ['./text-area.component.less'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TextAreaComponent),\n multi: true\n }\n ]\n})\nexport class TextAreaComponent implements ControlValueAccessor, OnInit {\n @Input() value: string;\n\n private _onChange = (data: any) => { console.log('changed: ' + data); };\n private _onTouched = (data?: any) => {console.log('touched: ' + data); };\n\n ngOnInit(): void {\n const self = this;\n }\n\n constructor() {}\n\n writeValue(obj: any): void {\n this.value = obj;\n }\n\n registerOnChange(fn) {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n}\n\n```\n\n# Tests\n\n## Unit tests\n\n**Service**\n```ts\ndescribe('MyService', () => {\n\tlet service: MyService;\n\tbeforeEach(() => service = new MyService();\n\tit('#fetch should update data', () => {\n\t\tservice.fetchData();\n\t\texpect(service.data.length).toBe(4);\n\t\texpect(service.data[0].id).toBe(1);\n\t});\n});\n```\n\nFor async functions\n\n```ts\nit('#fetch should update data', (done: DoneFn) => { \n\t// some code\n\tdone(); // we need 'done' to avoid test finishing before date was received\n\t// some code\n});\n```\n\nexample async test: \n```ts\nit('http client works', (done: DoneFn) => {\n service.getUser().subscribe((data) => {\n expect(data).toBe('test');\n done();\n });\n });\n```\n\n**Spy and stub**\n\nSpy:\n```ts\n// create spied object by copy getDataAsync from HttpService\nconst valueServiceSpy =\njasmine.createSpyObj('HttpService', ['getDataAsync']);\n```\nStub:\n```ts\nconst stubValue = of('StubValue');\nvalueServiceSpy.getDataAsync.and.returnValue(stubValue);\n```\n\n**TestBed**\nMock whole module/environment for unit tests\n\n```ts\nbeforeEach(() => {\n\tlet httpClientMock = TestBed.configureTestingModule({ providers: [{ provide: MyService, useValue: new MyService(httpClientMock)}] });\n});\n```\n\nThen use tested object (for example service) like this:\n\n```ts\nservice = TestBed.get(MyService);\n```\nwe can add schemas: [NO_ERRORS_SCHEMA]. This means that we don’t have to mock children component dependencies of this component as Angular won’t yell at us anymore for our lack of doing so.\n\n\n# Others\n\n## Http interceptor\nIntercepts and handles an HttpRequest or HttpResponse.\n\nClass:\n```ts\n@Injectable()\nexport class MyInterceptor implements HttpInterceptor {\n\n\tconstructor() { }\n\n\tintercept(request: HttpRequest
, next: HttpHandler): Observable> {\n\t\t// do sth (like check and throw error)\n\t\treturn next.handle(request); //if want continue\n\t}\n}\n\n```\n\nModule:\n```ts\n{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },\n```\n\n## host\nRefer to host element/component\n\n\n| Value | Description |\n| ------------- | ------------- |\n| :host(selector) { ... } | to match attributes, classes on the host element and add styling to it |\n| :host-context(selector) { ... } | to match elements, classes on parent components and add styling to it |\n| :host ::ng-deep | styling will be applied also to all child components |\n\n\n# Interview questions\n\n**When would you use the useFactory provider method?**\n\nWith useFactory we can use a factory at runtime to decide which kind of service we want to return if it got requested by any other class in our application or you need to parameterize the construction of a service\n\n```ts\nexport function sampleFactory() {\n return new Service1();\n}\n\nexport class Service1 {}\n\n@Injectable({\n providedIn: 'root',\n useFactory: xyzFactory\n})\nexport class Service2 {}\n```\n\nService1 will be injected into another class\n\n**What is router-outlet**\n\nActs as a placeholder that Angular dynamically fills based on the current router state. Generally in place of your main app component will be generated\n\t\n**How to declare global value?**\n\nUse InjectionToken\n\n**Which decorator lets you inject a service registered with an Injection Token?**\n\n@Inject\n\nfor example\n```ts\n @Inject(CONTROLS_GLOBAL_CONFIG) globalVlues: ControlsConfig\n```\n\n**How to mimick environment for components/services in tests?**\n\nUse TestBed. See [Unit tests](https://github.com/delprzemo/angular-cheatsheet#unit-tests \"Unit tests\") \n\n**What is Resolve interface?**\n\nInterface that classes can implement to be a data provider for component while routing.\n\nexample:\n\n```ts\n@Injectable()\nclass UserResolver implements Resolve {\n constructor(private service: MySampleService) {}\n\n resolve(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable {\n return this.service.fetchData(route.params.id);\n }\n}\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'user/:id',\n component: UserComponent,\n resolve: {\n userData: UserResolver\n }\n }\n ])\n ],\n providers: [UserResolver]\n})\n```\n\nWe can use it to pre-load data for a component before the component is displayed\n\n**How to begin validation after the user will enter a value and pause?**\n\nUse debounceTime, for example\n\n```ts\nthis.formCtrlSub = this.firstNameControl.valueChanges\n .debounceTime(1000)\n .subscribe(newValue => this.firstName = newValue);\n```\n\n**What is valueChanges in form control?**\n\nTo catch value changes and implement some logic in observable result. See example above\n\n**How to execute canActivate if any of child routes will change?**\n\nUse canActivateChild\n\n**What are compilation types in Angular?**\n\n| Type | Description |\n| ------------- | ------------- |\n| AoT | Ahead of time - compile full application / module when application was opened. Used mainly on production |\n| JiT | Just in time - compile specific element when it has been opened. Used mainly while programming |\n| Ivy | Since Angular 8 - engine based on concept Incremental DOM |\n\n\n**What is ng-content in Angular?**\n\nSee [ng-content](https://github.com/delprzemo/angular-cheatsheet/blob/master/README.md#content-projection \"ng-content\") \n\n**How to create application with cutom prefix?**\n\n```\nng new app-name --prefix my-cutom-prefix\n```\n\n**What is module lazy loading?**\n\nInstead of loading all modules while app starts we can load particular module when needed.\n\n```ts\nconst routes: Routes = [\n {\n path: 'users',\n loadChildren: () => import('./users/users.module').then(m => m.UserModule)\n }\n```\n\nThis is usually used for big apps in order to improve performance\n\n**Why should we consider using ngIf instead of ngClass/ngStyle for hiding element?**\n\nngIf won't generate element when condition result is fale, so html will be lighter. ngClass/ngStyle will just hide element but it will be still existing in DOM\n\n**What is Done() function in tests?**\n\nWe need 'done' to avoid test finishing before date was received\nSee [done](https://github.com/delprzemo/angular-cheatsheet#unit-tests \"done\") \n\n**What \"import\", \"providers\" and \"declarations\" stand for in NgModule?**\n\n```ts\ndeclarations: [AppComponent], // components, pipes, directives\nimports: [BrowserModule, AppRoutingModule], // other modules\nproviders: [], // services\n```\nSee [Sample module](https://github.com/delprzemo/angular-cheatsheet#sample-module-with-comments \"Sample module\") \n\n**Explain the difference between Constructor and ngOnInit**\n\nConstructor is a method assigned to a class, so it is called when class object was initialized.\nngOnInit is part of Component life cycle and it is dependent on the current state of view initialization.\nConstructor is called before ngOnInit\n\n**What is a difference between ElementRef and TemplateRef?**\n\nElementRef is reference to particular element while TemplateRef can refer to whole ng-template\n\n```html\n\n Test\n\n```\n\n```ts\nexport class SthComponent { \n\t@ViewChild('msg')\n\tprivate testTempRef : TemplateRef\n}\n```\n\n**Point all data biding ways for element**\n\n| Bindint type | Example |\n| ------------- | ------------- |\n| Property binding | [src]=\"this.src\" |\n| Event binding | (click)=\"this.doSth()\" |\n| Two way data bidning | [(ngModel)]=\"this.form.userName\" |\n\n**How to handle ngModel property in custom component?**\n\nImplement ControlValueAccessor interface.\nSee [ngModel](https://github.com/delprzemo/angular-cheatsheet#ngmodel-in-custom-component \"ngModel\") \n\n**What is differenct between default and onPush change detector?**\n\ndefault change detector will check bidnings in whole application component tree after event\nOnPush change detector informs Angular that our component biding is depend on input parameters. Moreover it won't check bindings in whole application but only in subtree where our component belongs. \n\n**Why is it better to use pure pipes instead of some functions in template view?**\n\nIf we want to calculate for example user age and show it on template then we can do it with function:\n\n```html\n{{this.getUserAge(user.birthDate)}}\n```\n\nBut it will be calculated every time when change detector is run, so it can affect on performance. \nInstead we can use pipe for that:\n\n```html\n{{user.birthDate | calculateAge}}\n```\n\nNow age calculation won't be performed so many times. \n\n**How to detect change for any @Input property?**\n\nUse ngOnChanges hook\n\n```ts\nngOnChanges(values) {\n // logic here\n}\n```\n\n**How to detect change for specific @Input in component?**\n\nUse 'set' accessor\n\n```ts\n@Input() set name(value) {\n // some logic here\n}\n```\n"
}
]