Check if object properties exist

var pets = { 
  "cats": { 
    "persian": {
      "black": 1,
      "white": 2,
    }, 
    "sphynx": {
      "blue": 2,
      "white": 2,
    }
  },
  "dogs": {
    "pug": {
      "black": 1,
      "brown": 2,
      "white": 1,
    },
    "bulldog": {
      "brown": 1,
      "white": 1,
    }
  }
}
if(pets.persian.black){
  //This might throw an exception if persian does not exist. Error: black of undefined
}

 

Solution with lodash:

_.get(pets, ‘persian.black’)

Clone a nested Object

When we assign a nested object to a new property, the properties nested inside the object will remain linked. In some cases we can use the spread operator to create a whole new object but this will only work with 1 level of nested objects. In order to have a complete new instance of the object with no reference to the original object, we can use lodash _.cloneDeep() method.

Requirements: lodash

Examples:

var test = {
  user: {
    name: 'Roch',
    surname: 'Cassar',
    education: {
      primary: {},
      secondary: {},
      tertiary: {}
    }
  }
};

I can use the spread operator to get a new instance of user as follows:

var newUser = {...test.user};

The problem is that education will not be cloned but will still be referenced. To Avoid this, we can use cloneDeep by lodash.

var newUser = _.cloneDeep(test.user);

 

 

 

 

Description Summary using Ellipsis …

CSS

.ellipsis {
overflow: hidden;
position: relative;
height: 120px;
line-height: 20px;
}

.ellipsis:before {
content:"";
float: left;
width: 5px; height: 120px; }

.ellipsis> *:first-child {
float: right;
width: 100%;
margin-left: -5px; }

.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -20px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
}

.ellipsis a {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
overflow: hidden; text-indent: -9999px;
}

.ellipsis i, .ellipsis:after {
font-style: normal;
}

HTML

 <div className="ellipsis"><div>Your multi lined text here<i></i></div></div>

Error Importing BrowserAnimationsModule

Seems like migrating to Angular 4 throws errors for animation module, mainly 404 not found.

I have tried so many ways to fix it and looked all over google until I finally found the correct answer.

In systemsjs.config.js add the following map settings:

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js'

In app.module.js (or whatever your module is named) add the following:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
NgModule({
  imports:      [
    BrowserAnimationsModule
  ]
})

Please not that some people mentioned that using BrowserModule and BrowserAnimationsModule will not work so you will need to replace one with the other. Please know this is incorrect and if BrowserModule is removed from your app.module.js you may get a lot of errors especially for ng properties.

Responsive Tables

When you have a wide table and need it to be responsive just add a class tbl-responsive to the table element and add an attribute  data-title in every td in order to be used as title on small screens.

Example:

<table class=”tbl-responsive”>
<thead>
<tr>
<th> Full Name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title=”Full Name”>John Smith</td>
</tr>
</tbody>
</table>

Finally paste the below in your css file. You might need to change some sizes/colors according to your design/table.

 

/************************************
Responsive Table
************************************/

table.tbl-responsive td, table.tbl-responsive td a {
padding: 0 5px;
}

table.tbl-responsive td a:hover, table.tbl-responsive td a:focus{ color: #fff; }
@media only screen and (max-width: 800px),
only screen and (max-device-width: 800px) {
table.tbl-responsive,
.tbl-responsive thead,
.tbl-responsive tbody,
.tbl-responsive th,
.tbl-responsive td,
.tbl-responsive tr {
display: block !important;
position: relative;
}

.tbl-responsive thead tr {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}

.tbl-responsive tr { border: 1px solid #ccc !important; }

.tbl-responsive td {
border: none !important;
border-bottom: 1px solid #eee !important;
position: relative !important;
padding-left: 30% !important;
white-space: normal !important;
text-align:left !important;
width: auto !important;
}

table.tbl-responsive td, table.tbl-responsive td a {
padding: 3px 5px;
}

.tbl-responsive td:hover a{
color: white !important;
}

.tbl-responsive td:before {
position: absolute !important;
top: 4px !important;
left: 6px !important;
width: 65% !important;
padding-right: 10px !important;
white-space: nowrap !important;
text-align:left !important;
font-weight: bold !important;

}

/*
Label the data
*/
.tbl-responsive td:before { content: attr(data-title); }

.dataTables_wrapper .form-control { width: auto !important; }
.dataTables_length { display: none; }
div.dataTables_length, div.dataTables_filter, div.dataTables_info, div.dataTables_paginate { text-align: right !important; }
}
@media only screen and (max-width: 450px),
only screen and (max-device-width: 450px)
{
.tbl-responsive td {
padding-left: 140px !important;
}
}

Calculate Age in JavaScript

HTML:

<input type="date" id="DOB" name="DOB" />

 

 JAVASCRIPT in SCRIPT tags:

//Since new Date() created a date in the format mm/dd/yyyy, we need to format our dob to match the same format
var dob_formatted = switchMonthDate(document.getElementById(“DOB”).value);

//Calculate Age
//Subtract dob from today's date and divide by total milliseconds in a year
var age = Math.floor((new Date() - dob_formatted)/ 31536000000);


if(age >= 18)
{

console.log("adult");

}


function switchMonthDate(dateFirst)
{


if(dateFirst.indexOf("/") !== -1)
dateFirst=dateFirst.split("/");
else if(dateFirst.indexOf("-") !== -1)
dateFirst=dateFirst.split("-");
else if(dateFirst.indexOf(".") !== -1)
dateFirst=dateFirst.split(".");
var monthFirst=dateFirst[1]+"/"+dateFirst[0]+"/"+dateFirst[2];


return new Date(monthFirst);


}

 

 

Change iFrame Height according to iFrame content (no jQuery required)

In the Parent page (which references the iframe), include the following in a script tag within your head section of your html:

if (window.addEventListener) {
addEventListener(“message”, messageListener, false)
} else if (window.attachEvent) {
attachEvent(“onmessage”, messageListener)
}
function messageListener(event) {
var originSecure = event.origin === “http://myiframe.com ” ;
if (!originSecure)
return;

if (parseInt(event.data) > 0)
document.getElementById(“test”).style.height = event.data + “px”;
}

 

Meanwhile, in your iframe include the following post message in your document ready script:

parent.postMessage(window.innerHeight, “*”);