ng-template, ng-container and ng-content

 Difference between ng-template, ng-container and ng-content

1: <ng-template></ng-template>

As the name suggests the <ng-template> is a template element that Angular uses with structural directives ( *ngIf , *ngFor , [ngSwitch] and custom directives). These template elements only work in the presence of structural directives, which help us to define a template that doesn’t render anything by itself, but conditionally renders them to the DOM. It helps us create dynamic templates that can be customized and configured.

<div>

   <span *ngIf = "isavailable;then condition1 else condition2">

Condition is valid.

   </span>

   <ng-template #condition1>Condition is valid from template</ng-template>

   <ng-template #condition2>Condition is invalid from template</ng-template>

</div>

Is it possible to use two structural directives together in one single element?

No, if we try to do so, we will get the error “Uncaught Error: Template parse errors: Can’t have multiple template bindings on one element.”

So instead of doing this:

<div *ngIf="details" *ngFor="let info of details">

  {{ info.content }}

</div>

We may need to introduce an additional wrapper component, however, this can be avoided by using ng-container:

2) <ng-container></ng-container>

ng-container is an extremely simple directive that allows you to group elements in a template that doesn’t interfere with styles or layout because Angular doesn’t put it in the DOM

This is helpful if you don’t want any extra div on DOM, you can simply use ng-container. 

<ng-container *ngIf="details">

  <div *ngFor="let info of details">

    {{ info.content }}

  </div>

</ng-container>

The advantage here is that we no longer need any additional wrapper(div) elements.

3) <ng-content></ng-content>

ng-content is used to project content into Angular components. You use the <ng-content></ng-content> tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content.

<app-child>

  <div> Child Component Details </div>

</app-child>

If you check on your browser <div>Child Component Details</div> inside

<app-child></app-child> would not be visible. What if we want to show this content?
So this is where the ng-content directive comes into the picture. What we need to do is, just add “ng-content” inside the component template and it will find the content inside the directive tag and add it to that template at that particular place where we added the “ng-content” tag.

Reference: https://vibhas1892.medium.com, https://www.educative.io/

Continue Reading →

Why Multiple inheritance not allowed in C#

C# does not support multiple inheritance , because they reasoned that adding multiple inheritance added too much complexity and ambiguity in situations such as the "diamond problem", where it may be ambiguous as to which parent class a particular feature is inherited from if more than one parent class implements same feature.

The "diamond problem" is an ambiguity that arises when two classes B and C inherit from A, and class D inherits from both B and C. If there is a method in A that B and C have overridden, and D does not override it, then which version of the method does D inherit: that of B, or that of C?

It is called the "diamond problem" because of the shape of the class inheritance diagram in this situation. In this case, class A is at the top, both B and C separately beneath it, and D joins the two together at the bottom to form a diamond shape.

Continue Reading →

Beginner's Guide to ngrx and Angular

 What is RxJS?

RxJS is a JavaScript library for reactive programming that allows you to work with asynchronous or callback-based data streams.

NgRx stands for Angular Reactive Extensions. It is a state management system that is based on the Redux pattern.

RXJS + REDUX= NGRX

RXJS -> Observables

Redux is basically a global state mgmt. library taken from react. it is a storage facility that helps JavaScript applications to manage state.

So, now, we will see the overall concept of Redux and see how's it works. Here, we can see that we have a component, and when a user performs an action, it will change the state of the data within the application.

There are some main concepts of state in an angular application.

1. Store
2. Reducers
3. State
4. Actions
5. Selectors
6. Effects

States of an app in Redux are kept in the store. The states are updated using actions transported to pure functions called reducers. Reducers take in state and action as parameters and performs an immutable action on the state and returns a new state.

Store

A store is basically a JavaScript object that holds data we’ll be using in our application.
A simple store takes the following format:

const state = {

    persons: [

        {

            name: "Wisdom Ekpot",

            age: 10

        }, {

            name: "John Cat",

            age: 40

        },

        {

            name: "James John",

            age: 11

        }

    ],

    bookDescription: {

        name: "Name of book",

        author: "Wisdom Ekpot"

    }

}

Reducer

A reducer is a pure function that accepts two parameters - an action and the previous state with a type and optional data associated with the event. Pure means that the function always returns the same value for the same input. It generates a new state based on an action. 

Sample Reducer 

export function reducer(state = initialState, action: articles.Actions):State {

    switch(action.type) {

        case 'ADD_ARTICLE':

            return { 

                articles: [...state.articles,action.payload]

            }

        default:

            return state;

    }

}

State

Theoretically, application state is the entire memory of the application. In simple terms, application state is composed of data received by API calls, user inputs, presentation UI state, application preferences, etc. A simple, concrete example of an application state would be a list of customers maintained in a CRM application.

Actions

An action is an instruction that you dispatch to the store, optionally with some metadata (payload). Based on the action type, the store decides which operations to execute. payload is an optional attribute that will be used by reducers to modify the state. 

When an action is dispatched, the reducer takes it and applies the payload, depending on the action type, and outputs the new state.

// Action interface

export interface Action {

    type: string,

    payload?: any

}

// Action with payload

dispatch({type: 'ADD_ARTICLE', payload: {link: 'github.com/philipszdavido', points:90}})

// Action without payload

dispatch({type:'LOAD_LINKS'})

Selectors: Selectors are pure functions used for obtaining slices of the store state.

Dispatcher: Dispatchers are simply an entry point for you to dispatch your action. In Ngrx, there is a dispatch method directly on the store.

How it Works

When an event is emitted, for example, a button is clicked, the action is sent to a reducer function to convert the old state into the new state:

{ type: 'DELETE_ITEM', payload: 123 }

Here, you can see that in action, Delete_Item is our action name and 123 is an action data.

References: https://stackabuse.com/,
https://betterprogramming.pub/,
https://dzone.com/,
https://www.youtube.com/

Continue Reading →

Deep and Shallow Copy in Javascript

 Shallow copy

Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Deep copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

Lets take an example

Shallow Copy: It makes a copy of the reference to X into Y. Think about it as a copy of X’s Address. So, the addresses of X and Y will be the same i.e. they will be pointing to the same memory location.

Deep copy: It makes a copy of all the members of X, allocates different memory location for Y and then assigns the copied members to Y to achieve deep copy. In this way, if X vanishes Y is still valid in the memory.

The correct term to use would be cloning, where you know that they both are totally the same, but yet different (i.e. stored as two different locations in the memory space).

Consider this example:

var employeeDetailsOriginal =

        {name: 'Manjula', age: 25, Profession: 'Software Engineer'};

Let’s say you want to create a duplicate of this, so that even if you change the original values, you can always return to the original.

//Shallow copy!

var employeeDetailsDuplicate = employeeDetailsOriginal; 

If we change a value:

employeeDetailsDuplicate.name = 'NameChanged';

This statement will also change name from employeeDetailsOriginal, since we have a shallow copy, or a reference to var employeeDetailsOriginal. This means, you’re losing the original data as well.

But, creating a brand new variable by using the properties from the original employeeDetailsOriginal variable, you can create a deep copy.

//Deep copy!

var employeeDetailsDuplicate = { name: employeeDetailsOriginal.name,

    age: employeeDetailsOriginal.age, 

    Profession: employeeDetailsOriginal.Profession};

Now if you change employeeDetailsDuplicate.name, it will only affect employeeDetailsDuplicate and not employeeDetailsOriginal

Diagramatic example

Reference: https://medium.com/

Continue Reading →