Content projection using ng-content in Angular

Content projection using ng-content in Angular 2+

Objective:

To project HTML content in component using <ng-cotent>.

To project multiple content by using selector like css and html tag.

Lets design the component where we want to project our content:

Component selector name: app-ngcontentprojector

<div>

      <p>Guidelines</p>

      <ng-content></ng-content>

</div>

Let's use this component where we pass our content:

<app-ngcontentprojector>

       <h1>Here are new guidelines</h1>

</app-ngcontentprojector>

Multiple pieces ng-content componet:

Component selector name: app-multiplengcontentprojector

<div>

      <ng-content class=".header"></ng-content>

      <p> Projected content in header and footer. </p>

      <ng-content class=".footer"></ng-content>

</div>

Let's use this component where we pass our content:

<app-multiplengcontentprojector>

         <span class="header">Header Text</span>

         <div class="footer">Footer Text</div>

</app-multiplengcontentprojector>

Access custom data attributes value in Angular 4

For accessing custom data attribute, I'll take the example of Dropdown HTML Element:

HTML Code:

<select (change)="onChangeDays($event.target.selectedOptions[0].attributes.data.value)">
      <option value="0" data="0">Select</option>
      <option value="1" data="10">10 Days</option>
      <option value="2" data="20">20 Days</option>
      <option value="3" data="30">30 Days</option>
</select>

Angular Code:

public onChangeDays(dataValue: any) {
         console.log(dataValue);
}

Here whatever option is selected respectively w'll get the data attribute value. Like if we select 10 Days then we get 10.

Union and Intersection in Javascript Array in ES6

By using Set in ES6 easily we can achieve

public union(setA, setB) {

let _union = new Set(setA);

for (var elem of setB) {

_union.add(elem);

}

return _union;

}

public intersection(setA, setB) {

let _intersection = new Set();

for (let elem of setB) {

if (setA.has(elem)) {

_intersection.add(elem);

}

}

return _intersection;

}

Remove duplicate record from Javascript Array in ES6

There are many way's to implement it but ES6 make it so cool.

Let see how: 

let arr = [1, 2, 2, 3, 4];

let distinctArray = new Set(arr);

Tuple data type in Typescript

// Declare a tuple type
let tuple: [string, number, boolean ];
// Initialize it
tuple = ["hello", 10, false]; // OK
// Initialize it incorrectly
tuple = [10, "hello", false]; // Error

console.log(tuple[0]);  // hello

console.log(tuple[1]);  // 10

Use returned values from super calls as ‘this’ in typescript

class Base{ x: number; constructor() { // return a new object other than `this` return { x: 1, }; } } class Derived extends Base { constructor() { super(); }

public ShowValue(){
this.x;
} }

Call parent class constructor in Typescript

export class BaseClass{
    constructor()
{
console.log('Base Constructor');
}
}

export class ChildClass extends BaseClass
    constructor() {
        super();
console.log('Child Constructor');
    }
}

Result:

Base Constructor
Child Constructor

By using the super keyword we can call base class constructor.
In Child class constructor super should be the very first statement.
If you want to wait till for some operation will be done then child class
constructor call. Then we can use super.

Filter in Redux Observables to Subscribe Data

this._store.select(fromAuthReducer.getUser)
.filter(u => !!u)
.subscribe(u => {
this.user = u;
});

Here we used .filter(u => !!u) because we have to wait till store get filled.

Router - outlet for routing of component

Don't forget to add <router-outlet></router-outlet> if you do routing of parent or child component. Like for tab menu.

Textbox Character Count in Angular 2, 4, 5, 6

	import {
	Directive,
	ElementRef,
	HostListener,
	Input,
	Renderer2,
	AfterViewInit,
	} from '@angular/core';
	/**
	* Define the CharCount Directive.
	*/
	@Directive({
	selector: '[charCount]',
	})
	/**
	* CharCount Class.
	*/
	export class CharCount implements AfterViewInit {
	// Default character limit if none is supplied.
	private _defaultLimit: number = 200;
	// The character limit input variable.
	@Input('charCount') _limit: number;
	/**
	* Class constructor.
	*
	* @param { ElementRef } _elRef
	* An ElementRef object instance.
	* @param { Renderer2 } _renderer2
	* A Renderer object instance.
	*/
	constructor(private _elRef: ElementRef, private _renderer2: Renderer2) { }
	@HostListener('keyup') onKeyUp() {
	// When the field on the host is updated. Update the count display.
	let count: any = this._elRef.nativeElement.value.length;
	this._renderer2.setValue(this._elRef.nativeElement.nextElementSibling.firstChild, String(count) + '/' + this._limit);
	}
	/**
	* Implements the AfterViewInit lifecycle hook.
	*/
	ngAfterViewInit() {
	// If no character limit was supplied via input, then use the default limit.
	this._limit = this._limit || this._defaultLimit;
	// A html nativeElement (small) to display the character count.
	const countElement = this._renderer2.createElement('small');
	const elementValue = this._renderer2.createText( this._elRef.nativeElement.value.length + '/' + String(this._limit) );
	this._renderer2.appendChild(countElement, elementValue);
	this._renderer2.appendChild(this._elRef.nativeElement.parentElement, countElement);
	this._renderer2.addClass(this._elRef.nativeElement.nextElementSibling, 'max-words');
	}
	}