Oleg-Sulzhenko

function isValidIP(ip_str) {if(/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip_str)) {return true;} else return false;}

Oleg-Sulzhenko

  import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
  
  constructor(
    private fb: FormBuilder
  ) {
      this.complexForm = fb.group({
        firstName : [null, Validators.required],
        lastName: [null,  Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
        gender: ['Female'],
        hiking : false,

Oleg-Sulzhenko

switchMap: when you want to ignore the previous emissions when there is a new emission

mergeMap: when you want to concurrently handle all the emissions

concatMap: when you want to handle the emissions one after the other as they are emitted

exhaustMap: when you want to cancel all the new emissions while processing a previous emisssion

Oleg-Sulzhenko

1) trackBy
When an array changes, Angular re-renders the whole DOM tree. But if you use trackBy, 
Angular will know which element has changed and will only make DOM changes for that particular element.

<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>

trackByFn(index, item) {    
   return item.id; // unique id corresponding to the item
}

Oleg-Sulzhenko

  public openModal(jobToEdit: RecurrentJob): void {
    let dialogRef = this.dialog.open(AddEditJobFormComponent, {
      width: '600px',
      data: { exampleDataPassedToDialog: 'some Data' } // you can pass Data here instead of Input()
    });
    dialogRef.componentInstance.jobToEdit = jobToEdit;
    dialogRef.componentInstance.formData.subscribe((formData: RecurrentJob) => {
      this.newJob.next(formData);
    });
    dialogRef.afterClosed().pipe(take(1)).subscribe(() => { dialogRef = null; });

Oleg-Sulzhenko

There are three ways to do this:

1) Put an *ngIf in parent. Only render child when parent's items is ready.
<div *ngIf="items">
   <child [items]="items | async">
</div>

2) Separate your input getter setter in child. Then act whenever the value is set, you can use RxJS BehaviorSubject also.
private _items = new BehaviorSubject<Items[]>([]);
@Input() set items(value: Items[]) { 

Oleg-Sulzhenko

const bannerDe: DebugElement = fixture.debugElement;
const bannerEl: HTMLElement = bannerDe.nativeElement;
  
*ngDocs
Angular relies on the DebugElement abstraction to work safely across all supported platforms. Instead of creating an HTML element tree, 
Angular creates a DebugElement tree that wraps the native elements for the runtime platform. 
The nativeElement property unwraps the DebugElement and returns the platform-specific element object.
** The DebugElement has other methods and properties that are useful in tests, as you'll see elsewhere in this guide.

https://angular.io/guide/testing#bycss 

Oleg-Sulzhenko

    providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true,
    }]

Oleg-Sulzhenko

//This is test suite
describe("Test Suite", function() {
    it("test spec", function() {
        expect( expression ).toEqual(true);
    });
});
-------------------------------------------------------------------------
Matchers

toBe()	passed if the actual value is of the same type and value as that of the expected value. It compares with === operator

Oleg-Sulzhenko

  <ng-container *ngIf="{
    users: users$ | async,
    adminsList: adminsList$ | async
  } as data">
    <div class="ads-table__content">
      <div *ngFor="let user of data.users" class="users__item">
  
        <div>{{user.userName}}</div>
        <div>{{user.email}}</div>