Vertical Center content

We all know very well that placing the Vertical Center content was always a pain. Previously, we used to achieve this by following 2 techniques but now we can also achieve the same using display: flex.   First Method (Using Display : inline-block) Second method (Using Display : table) Third Method (Using Display : Flex)   Let’s consider the simple HTML structure:

First Method (Using Display : inline-block) In first method, you can achieve the same using Display : inline-block as following :

Demo Fiddle : See the Pen vertical center content using Inline-block by Techhysahil (@techhysahil) on CodePen. Second …

Continue Reading

Error: Multiple instances of services

When you are working in Angular 2, you might got stuck in a situation where Angular 2 is creating multiple instances of your service. In Angular 2, Service are singleton object which can be used to fetch and push data from multiple components. First of all, try to understand that you only need to add your service once either in @NgModule or AppComponent(Top level component).

If you define your service in both of NgModule & AppComponent provider array than in that case 2 instances of that service will get created. Also Read: execute function inside template – Angular …

Continue Reading

execute function inside template – Angular 2

In Angular 2, You might wanna execute function inside template, that’s what i am gonna help you guy’s quickly. In Angular 2, Simple template interpolation can be done as follow:

Now what if you simply wanna print “NA” if no value corresponding to above interpolation exist. In that case you can either write a function which take above value and return required result as follow:

Now, you can change above template simply as follow:

In above template, i have applied evalDataFields() inside interpolation.  That’s it for this short Q&A… Happy coding…:)    

Continue Reading

How to take wordpress backup and schedule backup

WordPress is one of the most popular CMS for creating blogs and websites. A large number of blogs are published and updated using wordpress CMS. When you have blog, you also would like to think about it’s security. You never want to loose out of the data for your blog irrespective of any reason weather it is crashing of Server, Hacking or by mistake. So you might want to backup your database, template and plugin for your website. So in this article i will tell you about “How to take wordpress backup and schedule backup”.   So let’s get started without …

Continue Reading

Placeholder selector in SCSS

Sass full form is  “Syntatically Awesome Style Sheets” and it is preprocessing CSS library which allows us to use various cool feature like variable, function, nesting, mixins, placeholder etc. I love all of these features because it make my life easy and create style dynamically. Today i will discuss one feature of Sass which is known as “Placeholder selector in Sass”.   Sass Placeholder feature is very useful in cases where you need to extend same class into multiple classes and exclude that class from final css. This will reduce your code little bit. Let’s dive into code: Let’s say you have “icons” class which …

Continue Reading

Deploy Angular 2 project in Subdirectory

Recently i was working on Angular 2 project using Angular-webpack starter template. When i was done developing whole project on my localhost. I build my project using “npm run build”. I tried loading the content of dist directory to one of my subdirectory on my hosting domain. As soon the upload is done, I got index.html at right place but every each link path is wrong like JS, CSS, Images, font-file etc. I Googled little bit but couldn’t able to find right solution at one place. So that’s why i thought of putting solving this riddle for anyone who will stuck …

Continue Reading

Git Tagging in Depth

Git tagging is actually applying marker at a specific point during the software development phase. This can be done either to go back at that particular state of your code or to mark different states of the project development which you can refer later on. In this Git tagging article, we will go through the following basic operations: Types of tag Creating a tag in a git repository List git tags How to tag an older commit Push a tag to a remote repository Checkout a new branch from a particular git tag Rename an existing tag Remove or delete a git tag …

Continue Reading

Cloning Object In JavaScript

Before going to Cloning Object In JavaScript, let’s first understand Object assignment in JavaScript. As we all know, Object assignment does not copy object but it just assign a reference to it.

Above code will output “Upwork” instead of “Media.net”. So both myInfo as well as copyInfo reference to same Object. Whenever you do any modification, it will be reflected for output of both the objects. So the question now is “how to Cloning Object In JavaScript”?. Note: Javascript is always “pass by value”, but when a variable refers to Object (including Array) than the value is just a reference to object. There …

Continue Reading

Search pipe in Angular 2

In Angular 1, we have filter pipe for searching Array element. Most application make heavy use of this filter pipe and had speculation of making app heavy from Angular side. Below is the very simple example of Searching a list in Angular 1.

In above example, list will be searched based on input string in input box. filter pipe do everything for us. Now in Angular 2, there are certain pipes available but there is no filter pipe. In angular docs it is mentioned that filter and sort pipes are removed because of Performance issue. They suggest developer to …

Continue Reading

Angular 2 attribute binding

Like class binding, style binding etc, there is also a concept of Angular 2 attribute binding. By using attribute binding you can add data-attribute to element with value as either string or propertyName. In order to understand attribute binding, let’s consider an very simple example.

Above Template will be evaluated as: <div count=2>content</div> This is direct expression interpolation within attribute binding. Other way is too pass propertyName which will finally leave the value of property as value of attribute name as shown below:

Above template will be evaluated as: <div count=10>content</div>

Continue Reading