import { Component } from '@angular/core';

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

export class AppComponent {
	title = 'my-dogs-training';
}

export class SampleComponent {
	@Input() value: any/string/object/…;
	...
}

@Output() myEvent: EventEmitter<MyModel> = new EventEmitter();
onRemoved(item: MyModel) {
	this.myEvent.emit(item);
}

@ViewChild(NumberComponent)
private numberComponent: NumberComponent;
increase() {
this.numberComponent.increaseByOne(); //method from child component
}
decrease() {
this.numberComponent.decreaseByOne();  //method from child component
}

@ViewChild('myElement') myElement: ElementRef

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

RouterModule.forRoot(appRoutes)

imports: [
   RouterModule.forRoot(
     routes,
     {enableTracing: true}
    )
],

//Navigate from code
this.router.navigate(['/heroes']);

// with parameters													
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

// Receive parameters without Observable
let id = this.route.snapshot.paramMap.get('id');										

class AlwaysAuthGuard implements CanActivate {	
	canActivate() {
		return true;
	}
}

 {
    path: 'artist/:artistId',
    component: ArtistComponent,
    canActivate: [AlwaysAuthGuard], 
    children: [
      {path: '', redirectTo: 'tracks'},
      {path: 'tracks', component: ArtistTrackListComponent},
      {path: 'albums', component: ArtistAlbumListComponent},
    ]
  }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
	declarations: [AppComponent], // components, pipes, directives
	imports: [BrowserModule, AppRoutingModule], // other modules
	providers: [], // services
	bootstrap: [AppComponent] // top component
})
export class AppModule { }

@Injectable()
export class MyService {
	public items: Item[];
	constructor() { }
	
	getSth() {
		// some implementation
	}
}

constructor(private dogListService: MyService) 

providers: [MyService]

import { HttpClientModule} from "@angular/common/http";

import {HttpClient} from '@angular/common/http';

...

// GET
public getData(): Observable<MyResponseModel> {
	return this.http.get<MyResponseModel>('api/users/2');
}

// POST
public send(val1: any, val2: any): Observable<any> {
	const object = new SendModel(val1, val2);
	const options = {headers: new HttpHeaders({'Content-type': 'application/json'})};
	return this.http.post<string>(environment.apiUrl + 'api/login', object, options);
}

@Injectable({
	providedIn: 'root',
})
export class SomeService {}

import {InjectionToken} from '@angular/core';
export const CONTROLS_GLOBAL_CONFIG = new InjectionToken<ControlsConfig>('global-values');
export interface ControlsConfig {firstGlobalValue: string;}

providers: [{provide: CONTROLS_GLOBAL_CONFIG, useValue: {firstGlobalValue : 'Some value' }},

constructor(@Optional() @Inject(CONTROLS_GLOBAL_CONFIG) globalVlues: ControlsConfig) {

@Pipe({name: 'uselessPipe'})
export class uselessPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;
  @Input('otherPar') otherPar: any;     //it will be taken from other attribute named [otherPar]

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

  animations: [
      trigger('openClose', [
        state('open', style({
          height: '400px',
          opacity: 1.5,
        })),
        state('closed', style({
          height: '100px',
          opacity: 0.5,
        })),
        transition('open => closed', [
          animate('1s')
        ]),
        transition('closed => open', [
          animate('1s')
        ])
      ])
    ]

@ViewChild("f") form: any;
firstName: string = "";
langs: string[] = ["English", "French", "German"];

onSubmit() {
	if (this.form.valid) {
		console.log("Form Submitted!");
		this.form.reset();
	}
}

registerForm: FormGroup;
submitted = false;

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
	this.registerForm = this.formBuilder.group({
		firstName: [{{here default value}}, Validators.required],
		lastName: ['', Validators.required],
		email: ['', [Validators.required, Validators.email]],
		password: ['', [Validators.required, Validators.minLength(6)]]
	});
}

// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }

 onSubmit() {
	 this.submitted = true;

	// stop here if form is invalid
	if (this.registerForm.invalid) {
		return;
	}

	alert('SUCCESS!! :-)')
}

validateUrl(control: AbstractControl) {
    if (!control.value || control.value.includes('.png') || control.value.includes('.jpg')) {
      return null;
    }
    return { validUrl: true };
  }

this.secondFormGroup = this._formBuilder.group({
      imageCtrl: ['', [Validators.required, this.validateUrl]]
});

validateNameShire(group: FormGroup) {
    if (group) {
      if (group.get('isShireCtrl').value && !group.get('nameCtrl').value.toString().toLowerCase().includes('shire')) {
	return { nameShire : true };
      }
    }
    return null;
 }

this.firstFormGroup.setValidators(this.validateNameShire);

@Directive({
	selector: '[CustomValidator]',
	providers: [{provide: NG_VALIDATORS, useExisting: CustomValidator, multi:true}]						
})

@Directive({
	selector: '[customValidation]',
	providers: [{provide: NG_VALIDATORS, useExisting: 	EmailValidationDirective, multi: true}]
})
export class CustomValidation implements Validator {
	constructor() { }
	validate(control: AbstractControl): ValidationErrors {
	return (control.value && control.value.length <= 300) ? 
		{myValue : true } : null;
	}
}

validate(formGroup: FormGroup): ValidationErrors {
	const passwordControl = formGroup.controls["password"];
	const emailControl = formGroup.controls["login"];
	if (!passwordControl || !emailControl || !passwordControl.value || !emailControl.value) {
		return null;
	}

	if (passwordControl.value.length > emailControl.value.length) {
		passwordControl.setErrors({ tooLong: true });
	} else {
		passwordControl.setErrors(null);
	}
	return formGroup;
}

providers: [
	{
		provide: NG_VALUE_ACCESSOR,
		useExisting: forwardRef(() => TextAreaComponent),
		multi: true
	}
]

interface ControlValueAccessor {
	writeValue(obj: any): void
	registerOnChange(fn: any): void
	registerOnTouched(fn: any): void
	setDisabledState(isDisabled: boolean)?: void
}

@Component({
  selector: 'app-text-area',
  templateUrl: './text-area.component.html',
  styleUrls: ['./text-area.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TextAreaComponent),
      multi: true
    }
  ]
})
export class TextAreaComponent implements ControlValueAccessor, OnInit {
  @Input() value: string;

  private _onChange = (data: any) => { console.log('changed: ' + data); };
  private _onTouched = (data?: any) => {console.log('touched: ' + data); };

  ngOnInit(): void {
    const self = this;
  }

  constructor() {}

  writeValue(obj: any): void {
    this.value = obj;
  }

  registerOnChange(fn) {
    this._onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this._onTouched = fn;
  }
}

describe('MyService', () => {
	let service: MyService;
	beforeEach(() => service = new MyService();
	it('#fetch should update data', () => {
		service.fetchData();
		expect(service.data.length).toBe(4);
		expect(service.data[0].id).toBe(1);
	});
});

it('#fetch should update data', (done: DoneFn) => {    
	// some code
	done();  // we need 'done' to avoid test finishing before date was received
	// some code
});

it('http client works', (done: DoneFn) => {
    service.getUser().subscribe((data) => {
      expect(data).toBe('test');
      done();
    });
 });

// create spied object by copy getDataAsync from HttpService
const valueServiceSpy =
jasmine.createSpyObj('HttpService', ['getDataAsync']);

const stubValue = of('StubValue');
valueServiceSpy.getDataAsync.and.returnValue(stubValue);

beforeEach(() => {
	let httpClientMock = TestBed.configureTestingModule({ providers: [{ provide: MyService, useValue: new MyService(httpClientMock)}] });
});

service = TestBed.get(MyService);

@Injectable()
export class MyInterceptor implements HttpInterceptor {

	constructor() { }

	intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
		// do sth (like check and throw error)
		return next.handle(request); //if want continue
	}
}

{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },

export function sampleFactory() {
  return new Service1();
}

export class Service1 {}

@Injectable({
  providedIn: 'root',
  useFactory: xyzFactory
})
export class Service2 {}

 @Inject(CONTROLS_GLOBAL_CONFIG) globalVlues: ControlsConfig

@Injectable()
class UserResolver implements Resolve<User> {
  constructor(private service: MySampleService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    return this.service.fetchData(route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'user/:id',
        component: UserComponent,
        resolve: {
          userData: UserResolver
        }
      }
    ])
  ],
  providers: [UserResolver]
})

this.formCtrlSub = this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);

const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UserModule)
  }

declarations: [AppComponent], // components, pipes, directives
imports: [BrowserModule, AppRoutingModule], // other modules
providers: [], // services

export class SthComponent  { 
	@ViewChild('msg')
	private testTempRef : TemplateRef<any>
}

ngOnChanges(values) {
  // logic here
}

@Input() set name(value) {
  // some logic here
}