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.