rajaramtt

//--------------- ElementRef----------------------


@ViewChild('foo', {static: false}) foo: ElementRef;



@Component({
    selector: 'sample',
    template: `

rajaramtt

Combination Operators
---------------------------------
combineAll
combineLatest :star:
concat :star:
concatAll
forkJoin
merge :star:
mergeAll
pairwise

rajaramtt

Observable: Subscribe to it to get the values
Subject: Same but you also have control of the values that you want to emit into it (can subscribe to it but also emit)

ReplaySubject:
Same as subject but will keep track of the N latest emitted values and every time you subscribe to it, 
it'll emit those N values

BehaviorSubject:
Subject where you have to set a default value, 
if you subscribe to it before anything has been emitted you'll get the default value

rajaramtt

Observables
Observables are lazy collections of multiple values over time.

Observables are lazy. Observables are lazy in the sense that they only execute values when something subscribes to it


When the data is produced by the Observable itself, we call it a cold Observable.
When the data is produced outside the Observable, we call it a hot Observable.

Cold Observables

rajaramtt

import { Injectable } from '@angular/core';
import { HnService } from './hn.service';

import { Resolve } from '@angular/router';

import { ActivatedRouteSnapshot } from '@angular/router';

@Injectable()
export class HnResolver implements Resolve<any> {
  constructor(private hnService: HnService) {}

rajaramtt

<!-- attention, we have the c_highlight class -->
<!-- c_highlight is the selector property value of the directive -->

<p class="c_highlight">
    Some text.
</p>

rajaramtt

The Renderer is a class that is a partial abstraction over the DOM. Using the Renderer for manipulating the DOM doesn't break server-side rendering or Web Workers (where direct access to the DOM would break).

ElementRef is a class that can hold a reference to a DOM element. This is again an abstraction to not break in environments where the browsers DOM isn't actually available.

If ElementRef is injected to a component, the injected instance is a reference to the host element of the current component.

There are other ways to acquire an ElementRef instance like @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren(). In this case ElementRef is a reference to the matching element(s) in the template or children.

Renderer and ElementRef are not "either this or that", but instead they have to be used together to get full platform abstraction.

rajaramtt

ngOnChanges Called after a bound input property changes
ngOnInit Called once the component is initialized
ngDoCheck  Called during every change detection run
ngAfterContentInit  Called after content (ng-content) has been projected into view
ngAfterContentChecked Called every time the projected content has been checked
ngAfterViewInit Called after the component’s view (and child views) has been initialized
ngAfterViewChecked Called every time the view (and child views) have been checked
ngOnDestroy Called once the component is about to be destroyed

rajaramtt

               


<ng-content select="router-outlet"></ng-content>
                
               
  <router-outlet></router-outlet>

rajaramtt

	// <input type="text" class="form-control" trim #giftName />


import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

export class UserComponent implements OnInit {
	userNickName: String = '';
 
	..