Angular material - Cards tip

The fact is, that many times, we miss some obvious solutions that exist in the form of a simple attribute of an object and waste time using techniques that are no longer applicable because of the way technology and tools have emerged and those who do not recognize either end up with redundancies - in practices, techniques and attitudes.

So, when I read a question that was about managing a user login that was not returning to the login page after the user logs out or the session expires, I noticed the usage of a 'localStorage' object, which is the most common thing to do but if instead, the sessionStorage object were to be used, many knowledgeable would see that it solves some major problems straight away, without the usage of any special 'routers' (the software ones), it became clear to me that what the knowledgeable know is not through knowledge or more years of study but due to their experience.

AngularJS and Material (or for that matter, any technology that uses declarative forms of programming - declarative, in this context, does not mean annotations (as in Java) or attributes (as in C#), but as in programming through attribute (as in XML) values and directives (as in AngularJS)) are quite likely to put many of its programmer users in such situations.

One such instance that I wanted to share is inspired by another question on the same forum that was about deciding on AngularJS as a language to use in the project and what should be the criteria in making such decisions.

Rather than elaborating far too much on what could be bread and butter for many, suffice it to say, here goes !

Layouts, for the mobile, any-size-device, and the web, can be as simple as

<md-content layout-gt-sm="row" layout-gt-xs="row" layout-padding border="solid">

and the same layout fits for any device.

One of the most effective example of what should be the criteria for deciding on a language for a requirement (web or mobile app, though, only!)

White in Angular Material - tip

It is not a matter of black or white or any racial discrimination; it is quite simply a matter of the palette. Not that this indicates any taste or lack of it but because it is a colour, it must exist in some palette.

In Angular Material, the colour 'White' simply does not exist. It does, so to speak, but in the .backgroundTheme and to use it, you need to extend the grey palette (using the Google colour themes).

So, what do you do to colour your background 'white'? You simply create a new background theme and extend the palette whose hue you want to change or use! Like so,

var app = angular.module('modulename', ['ngMaterial', 'ngAnimate', 'ngMessages'])
    .config(function($mdThemingProvider) {
        var background = $mdThemingProvider.extendPalette('grey', {
            'A100': '#FAFAFA' // Not exactly white
            });
        $mdThemingProvider.definePalette('background1', background);
 $mdThemingProvider.theme('newTheme').backgroundPalette('background1').primaryPalette('background1');

});

The newly defined palette now can be used with any other palette like the primaryPalette.

But that is not all for, this, you can find in the issues list of the Material forum. Where it gets tricky is when you need to make AM recognize the colour, which Angular Material simply refuses to.

To make the new palette work for, say, md-toolbar, you need to wrap your md-toolbar in md-content for Angular Material to pick the colour from the theme.