Talk is cheap. Show me the code.

Common Breakpoints: SCSS CODE: @mixin for-phone{ @media (max-width: 599px) { @content; } } @mixin for-tab-p { @media (min-width: 600px) { @content; } } @mixin for-tab-l { @media (min-width: 900px) { @content; } } @mixin for-desktop{ @media (min-width: 1200px) { @content; } } @mixin for-desktop-big { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop { padding: 20px; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and ( min-device-width : 320px ) and ( max-device-width : 480px ) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and ( min-width : 321px ) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and ( max-width : 320px ) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) { /* Styles *...

Angular Material Date Picker Formate: 1.) Import in Main module and Provider [ import { DatePipe } from '@angular/common' ;   @ NgModule ({ imports : [ BrowserModule , .... ], entryComponents : [ ], declarations : [ ], bootstrap : [ ], providers : [ DatePipe ] }) export class AppModule {} 2.) Import in Component wher u can use import { DatePipe } from '@angular/common' ; Toset: constructor ( private DatePipe : DatePipe ){ this . startDate = new Date ( '04/06/2019' ); } To get: let data = this . DatePipe . transform ( this . startDate , 'MM/dd/yyyy' ) Example :                https://stackblitz.com/edit/angular-cyseqq?file=app/datepicker-value-example.ts

Create React Component and publish to NPM: //////////////Create React LibRary/////////////// //////////////Create React LibRary/////////////// //////////////Create React LibRary/////////////// 1.) install      cmd:    npm install -g create-react-library 2.) Create Lib Config      cmd:    create-react-library 3.) Now u can see Example Folder(Dummy React app where u can test your plugin)     Go that folder cd ./Example     In One Tab     cmd:    npm start 4.) In Another Tab     got to main folder where u can see package.json files     cmd:    npm start 5.) for upload on github     Note:   create repository in github without README.md files den do following step             In json file chagnes folowing things based on your repository          ...

Batch files for Angular Component  creation @echo off echo "Welcome to Angular Lip App" REM Changing Path     cd\xampp\htdocs\     cd REM Checking Version     echo "///////////////////////////////////////////////////////////////////////////"     echo "Your NPM version"     call npm -v     echo "Your CLI version"     call ng -v REM Get Project name from User     echo "///////////////////////////////////////////////////////////////////////////"     :GETLIPNAME     set /p inputone=Enter Lib Name it will become(*-ra-lib-app):     set temp1=-ra-lib-app     set temp2=-ra-lib     set projectName=%inputone%%temp1%     set libname= %inputone%%temp2%     IF EXIST %projectName% (         echo "Folder Already exists plz enter new one......"         GOTO GETLIPNAME   ...

Sharing data between components in angular

Create library in Angular 4:     /////////////////////////////////////////////////////////////     /////////////////  create Angular Lip  ////////////////////// 1.) ng new example-ng6-lib-app     rename folder name "example-ng6-lib-app" to "example-ng6-lib" 2.) cd example-ng6-lib     ng serve 3.) ng generate library example-ng6-lib --prefix=enl 4.) ng build example-ng6-lib 5.) import in module files ie..     import { BrowserModule } from '@angular/platform-browser';     import { NgModule } from '@angular/core';     import { AppComponent } from './app.component';     import { ExampleNg6LibModule } from 'example-ng6-lib';     @NgModule({     declarations: [         AppComponent     ],     imports: [         BrowserModule,         ExampleNg6LibModule     ], ...

Media query for most common devices: @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:1281px) { /* hi-res laptops and desktops */ } For all Phones: @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } For All Portrait Devices: @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape  For Landscape: @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } For Laptop and Desktop: @media (min-width:1025px) { /* big landscape t...