angular-interview

For working session while interviewing candidates. This focuses on lazy loading and creating a Reactive Form.

Steps:

Step 1 - Install Bootstrap and Setup app shell

Install Bootstrap

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Run npm install bootstrap@next --save.
Add "../node_modules/bootstrap/dist/css/bootstrap.min.css" to app[0].styles property of file .angular-cli.json.

Setup app shell

In app.component.html:

Remove default code.
Add Bootstrap grid container.
Optional Add a Bootstrap navbar element.

Step 2 - Create lazily-loaded FormComponent

Run angular-cli command ng g m form --routing to generate FormModule and FormRoutingModule.
- Note: Can also generate FormRoutingModule separately if --routing flag not used.
Run angular-cli command ng g c form/form to generate FormComponent.
Add new route definition in form-routing.module.ts: { path: '', component: FormComponent }
Add new route definition in app-routing.module.ts:

{ path: 'form', loadChildren: './form/form.module#FormModule' },
{ path: '**', redirectTo: 'form' }

Verify it works by going to any path and seeing that it redirects to '/form' and Network debugging tool shows a ___.chunk.js.

Step 3 - Adding reactive form to FormComponent - Creating FormGroup

Import ReactiveFormsModule to FormModule.

In FormComponent, create the FormGroup for form (eg login form with username and password):

Method 1: Use FormBuilder to build out FormGroup

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
...
public loginForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.loginForm = this.formBuilder.group({
        username: ['', Validators.required, Validators.minLength(4)],
        password: ['', Validators.required, Validators.minLength(8)]
    });
}

Method 2: Define FormGroup object and explicitly declare each prop as a FormControl.

import { FormControl, FormGroup, Validators } from '@angular/forms';
...
public loginForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.loginForm = new FormGroup({
        username: new FormControl('', [Validators.required, Validators.minLength(4)]),
        password: new FormControl('', [Validators.required, Validators.minLength(8)])
    });
}

Step 4 - Adding reactive form to FormComponent - Hooking template to FormGroup

Create form template and bind the FormGroup to template of FormComponent. Adhere to the following requirements:

Submit button should be disabled if the FormGroup is invalid.
Add basic validation error msg per input that shows if FormControl has been touched and it is invalid.
Don't bind submit event for now.

<form [formGroup]="loginForm">
    <div>
        <label for="username">Username</label>
        <input type="text" id="username" formControlName="username" />
        <div [hidden]="loginForm.get('username').valid || loginForm.get('username').untouched">Username is required</div>
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" formControlName="password" />
        <div [hidden]="loginForm.get('password').valid || loginForm.get('password').untouched">Password is required</div>
    </div>
    <button type="submit" [disabled]="!loginForm.valid">Submit</button>
</form>

Step 5 - Adding submit to FormComponent and subscribe to Observable stream

Add a method onSubmit() to FormComponent class.
Bind the submit event to method in template (submit)="onSubmit()"
Import HttpClientModule to FormModule so we can use HttpClient: import { HttpClientModule } from '@angular/common/http';
- Note: Can also use HttpModule though it's deprecated.

Create a FormService to abstract out handling of Ajax calls:

Run ng g s form/form --module=form to scaffold service
Import HttpClient to make GET request to mock backend server "https://jsonplaceholder.typicode.com/users/1"
Return observable stream that FormComponent will subscribe to

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
...
constructor(private httpClient: HttpClient) { }

public login(username: string, password: string): Observable<any> {
    return this.httpClient.get('https://jsonplaceholder.typicode.com/users/1');
}

Display the data from observable stream in template using async and json pipes:
- Add property user$ of type Observable<any> to FormComponent class.
- In FormComponent's onSubmit() method, set this.user$ to returned value of FormService.login():
```
public onSubmit(): void {
    const username = this.loginForm.get('username').value,
        password = this.loginForm.get('password').value;

    this.user$ = this.formService.login(username, password);
}
```
- In template of FormComponent unwrap result of observable with async and json pipes: <p [hidden]="!user$">{{ user$ | async | json }}</p>

Step 6 - CSS Freestyle on FormComponent's template

CSS freestyling on FormComponent!

Further optimizations:

Component for navbar
CoreModule for navbar, FormService
SharedModule for CommonModule
Maybe make login a promise since login isn't a good example for Observables.
Write unit tests and e2e tests
Etc

AngularInterview

This project was generated with Angular CLI version 1.4.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

chai-jay/angular-interview