Cacher is the code snippet organizer for pro developers

1. Small trick for make route 'active'
isActive(url): boolean {
    return this.router.url.includes(url);
}
and:
[class.active]="isActive('url')"

2. ANGULAR PIPE
1) Pipes in Angular: A pipe takes in data as input and transforms it to the desired output
https://angular.io/guide/pipes

2) pipe() function in RxJS: You can use pipes to link operators together. Pipes let you combine multiple functions into a single function.

The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.
https://angular.io/guide/rx-library (search for pipes in this URL, you can find the same)

In Angular(2|4|5) Pipes are used to format view as you said. I think you have a basic understanding of pipes in Angular, you can learn more about that from this link - Angular Pipe Doc

The pipe() you have shown in the example is the pipe() method of RxJS 5.5 (RxJS is the default for all Angular apps). In Angular5 all the RxJS operators can be imported using single import and they are now combined using the pipe method.

tap() - RxJS tap operator will look at the Observable value and do something with that value. In other words, after a successful API request, the tap() operator will do any function you want it to perform with the response. In the example, it will just log that string.

catchError() - catchError does exactly the same thing but with error response. If you want to throw an error or want to call some function if you get an error, you can do it here. In the example, it will call handleError() and inside that, it will just log that string.

1. sum the total value of the arry of the objects
var traveler = [{description: 'Senior', Amount: 50},
                {description: 'Senior', Amount: 50},
                {description: 'Adult', Amount: 75},
                {description: 'Child', Amount: 35},
                {description: 'Infant', Amount: 25}];
  traveler.map(item => item.Amount).reduce((prev, next) => prev + next);
  
  2. Style binding => [style.width.px]="currentWidth"
  
  3. Angular deep clone with affect original array =>
    let cloned = source.map(x => Object.assign({}, x));

  userInfo: UserInfoViewModel = <UserInfoViewModel>{};
  subscriptions: GetCSPSubscription[] = [];
  
  let newSubscription = {} as CSPModifySubscriptionViewModel;

  @ViewChild('entry', { read: ViewContainerRef })
  entry: ViewContainerRef;
  

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

ngUnsubscribe: Subject<void> = new Subject<void>();

this.activatedRoute.parent.url.takeUntil(this.ngUnsubscribe).subscribe(url => {
  
  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

this.router.navigate([`${annuity.detailsView}`], {
        relativeTo: this.activatedroute,
        queryParams: {
          annuityId: annuity.annuityId,
          orderNo: annuity.nextOrderNo,
          orderSuffix: annuity.nextOrderSuffix
        },
        skipLocationChange: true
      });